閱讀文章要學會整理文章重點,才能好好吸收!
課程來自: http://learn.shayhowe.com/advanced-html-css/
整理方式:Google Docs
小小心得:熟悉基礎CSS觀念很重要,float大家愛用,版面配置用起來最常出問題的也正是float,配合 position 的定義,我們更該小心使用跟注意!
http://learn.shayhowe.com/advanced-html-css/
2013年1月31日 星期四
2013年1月30日 星期三
HPX Life 26 重點筆記與心得
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNx-W3cWVyVEobmJubdl5GM1a6w1HXQ0_FEm9k70wD2iWtOSB3BPFufLFS4lOqcJ9fz2-RZ2JXlh3mSwbnlLt_lJW8GFCM_FKENh-BH2XO6rmYTujy-Wvu4atAYkek5udNnwiDhsUahkw/s400/UXD1.jpg)
圖片來源:http://www.tecmark.co.uk/user-experience-design-uxd/
講者:李毓修
講題:展望2013年使用者經驗設計的發展
http://www.hpx-party.com/archives/8814
下面轉貼一些我用iPad做的筆記跟圖片 (從來沒有這樣赤裸裸的公開筆記本阿!)
記憶力有限,中間有幾段有缺或是誤解的部份,之後會再補充跟修正
------------------- 補上講師提供的簡報 20130203 -------------------
謝謝講師在 UX Murmur 上的補充跟說明
我把更正寫在下面
http://www.facebook.com/uxmurmur/posts/329191137185949
------------------- 補上講師提供的簡報 20130131 -------------------
展望2013使用經驗設計發展 from Yu-Hsiu Li
講者先是說到自己:永遠在設定目標、永遠在跑,不斷地思考自己在做什麼。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9pSpnGUMcp_2jllc9khTPmIc5zQCL-ltiZFZf_i5cMN_awG6lTSGYLKhouQiTwl-WRmDdzthGjoYzrTRGQnD4SdY2uB6gc1jzvQmQc5Lx9nsvTPtUA-PXXQhCY8sR4TJ1jMPXl6oJguw/s640/8276224b-32eb-4dcd-9998-b37671833667.png)
2013年的開始新的現象,經過各式各樣的組織(UiGathering、HPX、IxDA)這麼多年的推動,大家漸漸開始了解什麼是UX,越來越多人知道UX,越來越多人從事跟UX相關的工作,也越來越多人的職稱前面都加上了UX,UX已經達到一定的成熟度了!
這樣就夠了嗎?
P.S.這張投影片,忍不住想要稍微指正一下...是 104.com.tw 不是 104.com (身為忠誠的員工...)
接著講者提到了目前業界會面臨的問題,漸漸發展成三種趨勢
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7bQdmHSCuVYDSY5SzdjVP6UAAlU1IMeqkrYB1xdaYfEgAWS1wtgIq2WCciRGeWVUgDppwPMMg3hVKpOm4IROqRkXH2IEkDIjwovMrShhdhr5JqoJlsFycLdmNuR671kfWm9b8h5F_Tu2/s640/HP45+P4.png)
但因為UX的影響,我們的團隊工作型態已經跟以往大不相同
漸漸演變成這樣的專業分工
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4UrcvvFiUkjAJ-CIGxVk71LxqMza-QYNqf6OgPncCq7mFqfsfNA-dnpUBeMGhzW_aQz7-70fOhyRoAdLv2eQn1BSENKV5EQOUn3Y9QxOesoo2I42EcTILRn3piN4vO0XL2Tn5dPaMNrG0/s640/slide-13-638.jpg)
iPad 筆記圖片不清楚我找到了 阿修的版本。圖片出處:http://www.slideshare.net/lis186 slide 13
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8sHNwVAEIAwOSZ26Iti-X7B0PBp7IQbwO8G4NV_anos48smNPLyqWEYtj_ns3L2w4HKfY1gvi3KJVqyKkDiko7jqsH3rjRXI7f6E-SF847JSntAR8_eel6qwSNjoisqA533s634U349X/s640/HP45+P5.png)
如果現在公司要 Cost Down?這樣的團隊你們覺得誰會優先被裁掉
台下紛紛發出聲音:
1. UX Designer (有點不確定,因為我聽到第三個的時候打擊很大)
2. UX 研究員
3. 前端工程師
但,其實,可能是產品企劃 (
接著講者開始提到他今天想要傳達給大家的幾個重點
Back to Basic
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZNqI7aNcqfUkccNrbUQyUsT4RNCDMwMLcIiNvyD32_S8_j_aZI4M1dLZ_36Th-h9mCTCfzc4vGzZJLkojzQrAlRoCJVbyQhxji6N68VVDCmRTNPXxqX6HjkHZBh1I6k8wgeU6dP_CMhAJ/s640/HP45+P6.png)
以使用者為中心出發,我們要有宏觀的思考、實驗精神、打破藩籬跨界合作。
瞭解問題本身
講者舉了兩個顧問公司當例子,麥肯錫跟BCG Boston:
麥肯錫:收集大量的問題,足夠的資訊,才開始找問題的根本。
BCG Boston:其實我們收集不完全部問題,所以從瞭解"行為"為出發點,從自己本身開始出發去解決問題。
------------------ 講者 更正我的筆記 20130203 ------------------
演說中提到麥肯錫以及BCG對問題的解決方式其實並不是這麼決定,應該說在解決問題的思考過程中,我們不應該只偏重在歸納法,必要的時候演譯法(也就是用假說做出發)也應該被考慮使用。
Sensitivity
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL7Gzn6NxSx6wbYUu1zArtae73uKuQ-kF35an3Pc8Fw8tRwRyT6wlAv5Kfvr8n0UVPSEDw6kzHaBXH47X3FHbfzBu1VPVFgjilfaXDYm4ZUz5BEM1Lx66MWWS5s-sObl4dPlOzCU0sV7gO/s640/HP45+P7.png)
再來提到『敏感度』。
敏感度是需要長時間累積的,看得東西不夠多,無法拓展視野 !
(聽到這邊實在太有感觸,我常常覺得工作上合作的某些企劃沒有世界觀,東西看得太少,看一個想學一個,不然就是永遠都是 「我要跟Yxxxx網站一樣」、「我這邊要跟Gxxxxx網站一樣」)
老闆叫你N+1設計不是問題,重點是你有沒有了解這些東西的優點跟缺點在哪?知不知道設計原理?借用不是問題,有借要有還。要懂得借力使力的道理。
Fit-n-Finish
精緻度跟合度。
APPLE效應促成一個可怕的現象,每個老闆都想學賈伯斯,卻統統變成假伯斯(這句是我講:P),魔鬼藏在細節裡,但你的目標都還不明確,怎麼去在乎細節?產品的成熟度不夠,架構還不清楚,那小小的 1 pixel不是當下該去注意的東西。
這時候講者做了一個照片推理的實驗,大夥猜得很開心,很多看似很篤定的答案都出現了,但其實大家都過度重視 "細節",過度相信 "細節",卻不問線索是否足夠!
Facilitation
引導力
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3iIVEHhCh2uRKNncSQ82pNQJQa_UBBQiyqbTEggbwV5se_8pBnu97UbuuetISEREXOk8GWDLls9gDrrqSv2PDtAL9N4d0Xmu-gLuLlqxudLuC2ofLFXqJXxZq5-MGsweacbRc5SSSR1q9/s640/HP45+P9.png)
設計師的角色要怎麼當,設計的目的在什麼?
引發 "共創" 的過程很重要,必要的話拉著你的團隊成員跟著一起!
講者提到了自己跟工程師合作的經驗,將同理心的想法跟工程師一起分享,團隊一起達成想要達成的目標,這對 UX Designer來講是很重要的事情。
引申出來的議題是 Product Manager跟 UX Designer 的角色責任到底是什麼?
簡單來說就是 Why 跟 How
Product Manager 要讓團隊知道我們為什麼要做這樣的產品,目的到底是什麼
UX Designer 要讓團隊知道我們該如何達成我們目的!
Leadership
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-kmJ81wFCdUaqdFdU2E56r2j4NN_JWeb3uAGMTAvntsB6tGAFCCwMZ3obaC8OgPjDvlckHeyD_4VBX68IJy1-LriaNhsY_ZRqyo2xGh-8R54BGRZ_Tk1aDQ1SXFIxfy-gNN50fzvjFNbD/s640/HP45+P10.png)
那三個三角形我印象深刻
再來講到管理層面,所謂的策略管理
把自己看大,才能做大,台灣產業很多人停留在中間的三角形就覺得夠了
但自己的影響力其實並沒有這麼小
用全面宏觀的方式找到產品的 feature,再去拓展很重要
AARRR方法是很好的方式
最後一個R應該是「客戶的成長如何為公司帶來收入」
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKtkDL5ezIEL9l_KJwFYyEASM9RJSB6lZe_rv8Im6Y1L_sbfTscrXfL3pNJEEb3yDUdkenVLveE7hoPy9xHQuyTSKRvpeha0IiZMdwp24jsFIa88J6bp_LvByRRmVQX0HCc3q2kFal9mlg/s400/HP45+P11.png)
企業品牌的依靠的是這三樣
要時時把這些東西放在心裡
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2_SRH8LbQTU_t99iPtHutfn8drFKnTcK7V9T3BstNc2hOn9kt51BPg_j1wjcFXGdqgTWlpeTeyuTzbImIVjMKm16ZKJhNcaVQPjeu5xCB46ifrNJNYT_qIpEWwCUYgeei4pm4kVwtnAx/s640/HP45+P12.png)
使用者的演化是一個持續性演化的過程
講者的例子很棒:慈禧太后是第一個接觸到電燈泡的人,卻因為害怕,阻礙了後續的科技發展。
(反省:那我們自己呢?使用者又怎麼想呢?)
最後,兩個重點
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPOw9ZAZsPc53Qp2WmksxcwFuXA8HacOvkJOocyJ1GWZCYtoMW8lSCRy1h_dgx-78zGSFLxID0nPd3AorUtkTy6lkiTgLRjod9VotH-5G_CnbBI5NehcOLZ9pG3o4kUjHD2R2PxMhAdM9/s640/HP45+P13.png)
Small Win
設計師不要小看自己的價值
創意不是多唸兩本書就能擁有的
逐步的建立信心,團隊的凝聚力
不要小看你帶給他們小小地歡樂,那都是團隊進步的動力
Action
行動,中國人顧"全"的思維 (我就在這個時候想到了李小龍)
講者引述了論語.字罕
「可與共學,未可與適道
可與適道,未可與立
可與立,未可與權。」
翻譯:
可以一起學習,未必可以志同道合(走相同的路);
可以志同道合,未必可以一起立業;
可以一起立業,未必可以一起通權達變。
結語: 2013年 蛇我其誰!
最後我附上:
Be Water My Friend
讓我們像水一樣訓練2013年的自己吧!
------------------------------------------------------------------------------------------------------
Q&A時間:先貼上紀錄.....但其實我忘記一半了
因為有一些問題邏輯怪怪的
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtD4bzOqD_Wy7nQC4FnqxI6lOl050JmnAErMDJBdFzj8F3mQl9ja7vbZshZ6FCZJUnXz5mB89SHxjVKY1xA_-qMy__y1SNy86dqxW-571-b0nUvBtRVkBrZCLw4pwe3PDPzgE1GqovJuK/s640/HP45+P14.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3JW9J5-mDrlyhbpY4fM8n5UM1I5g_3FCrGyfCaORmZp2sWHIXHKVY3lauxreUOPhP6PX9pdkmyzirEJ4FAH7RHknCijAZDiiu3HeYUIaiwpHpIXilN0Il9_KN56MOXh6-_oMk_lNctE0n/s640/HP45+P15.png)
最後我要說一下我喜歡講者最後正面的能量
不帶有任何宗教的色彩,是一種想法的改變
每天的睡前,想三個快樂的事情、想感謝的人、想感謝的事物....等。
因為我們每天工作面臨太多爭吵抱怨埋怨,太多負面的情緒在身上
就算你想的只是很小的事情,可能只是在捷運上看到有人讓位給老婆婆
但這些微小正面的能量都會在無形之中影響著我們的、幫助著我們!
2013年1月17日 星期四
來談談 z-index
作者:Philip Walton
文章:What No One Told You About Z-Index
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
看到這篇文章寫得很好,決定用來節錄一下重點
每當 web developer 想要移動HTML上面的元素的前後順序時,第一個直覺都是改變 z-index 數字的大小,但其實 z-index 並沒有想像中這麼簡單。
這個作者請你做了一個實驗,下面是一個簡單的區塊堆疊應用
Check out this Pen!
你要如何讓紅色的區塊被壓到最下面,但你不能- 不能改變 HTML 結構
- 不能修改 z-index 大小
- 不能修改 position 的值
想到結果了嗎?
Check out this Pen!
你猜對了嗎? 作者只加了一段CSS
div:first-child {
opacity: .99;
}
如果你感到非常疑惑,不要氣餒,因為作者告訴你:W3C的 z-index 規則 其實真的很複雜!
堆疊的規則
當 z-index 跟 position 屬性沒有共同存在的時候,元素堆疊的規則可以說是簡單的,就是HTML堆疊的先後。
當 position 屬性存在的時候,任何有 position 的元素會顯示在,沒有position的元素前面 (意思是除 static 之外的 position 屬性,relative、absulute....)
當z-index 跟 position 共同存在的時候,這規則就難了,我把作者整理的順序放在下面
由後往前排序是這樣:
- The stacking context's root element
堆疊內容的 root 元素 - Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
有 position 屬性的元素(包含子元素) + 負數的 z-index 值 (數字越大越前面) - Non-positioned elements (ordered by appearance in the HTML)
沒有 position 屬性的元素 - Positioned elements (and their children) with a z-index value of
auto
(ordered by appearance in the HTML)
有 position 屬性的元素(包含子元素) + z-index:auto - Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
有 position 屬性的元素 + 正數 z-index 值(數字越大越前面)
最後,作者說明了上面的例子,整體的順序到底是怎麼改變的
原本的順序是這樣的:
<div><!-- 1 -->
<span class="red"><!-- 6 --></span>
</div>
<div><!-- 2 -->
<span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
<span class="blue"><!-- 5 --></span>
</div>
經過修改後的順序變成這樣:<div><!-- 1 -->
<span class="red"><!-- 1.1 --></span>
</div>
<div><!-- 2 -->
<span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
<span class="blue"><!-- 5 --></span>
</div>
原本CSS的寫法,我們只有兩層的堆疊內容,root 跟 span.red當我們在 span.red 的父層 div 設定了透明度 opacity:.99 (div:first-child { opacity: .99; })
我們讓原本的堆疊變成了三層
第一個 div 跟他的子元素都不會吃到 .red 的 z-index 跟 position
他們變成沒有 position 跟 z-index 的元素了
他們的堆疊順序變成按照原本的 HTML 的結構來計算
所以作者用 1 跟 1.1來代表他們後來變成的順序
感謝這位作者,我看完這篇文章頭都昏了,但也終於弄懂 z-index 的層級判別方式
請不再在隨便相信文章裡面寫「這是 z-index 的 bug」了!
訂閱:
文章 (Atom)