2015年12月31日 星期四

跟著臉書創辦人 馬克‧扎克伯格 一起念書 (台灣購書書單) A Year of Books 2015 Mark Zucherburg for Taiwan Readers

大家來跟著臉書創辦人 馬克扎克伯格 一起念書

A Year of Books 2015 Mark Zucherburg 馬克扎克伯格 2015年書單




看了 36 氪整理的書籍介紹 後

我決定整理一下方便台灣人買書的 博客來書單 跟 TAZZE書單
附上有繁體書籍的連結,若是只能購買到簡體我會特別註解

更新時間: 20151231 (將定時更新)

2015年6月17日 星期三

2015年 七大新網頁設計趨勢



文章出處:http://delighten.co.uk/7-future-web-design-trends/

我紀錄一些重點跟心得:


1. Gestures are the new clicks:scrolling first, and clicking second
過去我們會把滑鼠移動到 scrollbar 上滑動,成本算高,現在裝置的已經逐漸進化,滑鼠滾輪、觸控螢幕、觸控板...等都非常方便,滾動成已經降低,網頁的"滾動"比"點擊"來的容易,"手勢"的運用應該是未來的趨勢!

2. The fold really is dead this time 
由於滾動的成本變低了,"第一屏"效果將不再是重點。

3. Users are quicker, websites are simplifying
新網路世代【快】,現在的使用者是沒有耐性的,最重要的是讓使用者更快了解你的網站要表達什麼,過去擬真或擬物的風格不再有幫助,扁平化設計代表的是【了解快】跟【速度快】,「簡潔明瞭」會是設計者最大的難題。

4. The pixel is dead
從所謂的 Retina (視網膜技術) 開始,Responsive Web Design 告訴我們的是 1 pixel 將不再是重點,Icon Font 設計師不可不知,不同解析度該提供不同尺寸大小的圖片是必須的。

5. Animation is back
扁平化設計的興起,需要的輔助是動畫效果,這邊所謂的效果互動主要使用 CSS,GIF也開始重現江湖!

6. Components are the new frameworks
過去我們常常需要使用某一個特殊的互動或是功能時,得 import 一個肥大的 framwork,新的網站趨勢是"快速",簡潔的 Components 套用會逐漸取代 framwork。

7. Social saturation and the rise of direct email
社群行銷飽和問題,越來越多人往社群網站跑,大量的貼文跟廣告,其實人們的眼球還是有限的,除了付費給 facebook之外沒有什麼好做法;所以有些企業開始走回原本的 Email 精準行銷,我也開始訂閱相關的文章,每天只看五則精選的內容,像是這篇文章就是從 siderbar 看到的。




2015年4月20日 星期一

HPX69 筆記與心得




活動:HPX69 – 讓團隊動起來 http://www.hpx.tw/archives/19407
日期:4/16 (週四) 晚上 7:30-9:30
地點:台北市松山區八德路四段 123 號 3 樓(CLBC大船艦)

主題:
1. 設計師!起來! / Ethan Chiang
2. 組織溝通技巧 / 莊思凌 David Chuang
3. 好讚呀,下次一定再來! / 李德俊 (紅豆)
4. 學習如何設計即時工作坊 Learn how to design a real-time workshop / 紀旻廷 Min Chi


以下是我聽演講的筆記跟一些心得
設備:iPad Air 2
軟體:Noteshelf

2015年1月22日 星期四

把 User Stories 改成 Job Stories




我們使用 User Stories 讓 designers 跟 developers 了解使用者問題的脈絡,給我他們更多空間或方式去解決使用者發生的問題。

不過有人發現 User Stories 有很大的缺陷,每個人理解的程度不同,最後會變成定義解法 (solution),變成在解決「怎麼做」這件事,並非定義問題。

當我們在開發產品時,應該專注在定義問題,並非解法。

先認識一下兩者的不同

User Story: 
As a [persona/role] I want to [action] so that [outcome/benefit].
身為 某人/某角色,我想要 某個行為/功能,如此可以得到 某種好處/結果 (有商業價值的)。

改成

Job Story:
When [users work/life context] I want to [motivation] so that [outcome/benefit].
當 發生某種情況,我有 某個動機,如此可以期待得到 某種好處/結果。

2014年12月12日 星期五

為什麼人們不捲動頁面?廣告放在頁面上方真的比較有效嗎?




Luke Wroblewski 在 Twitter 上從 12/09 開始提出了一個 "There is no fold" 的討論

探討的是現代跨裝置網頁設計 (contemporary multi-device web design) "捲動" (scroll) 跟 "摺疊" (the fold) 的迷思 (Myth)

我們先來認識一下 "the fold" 英文的解釋是 the typical height of a browser window, about 700 pixels,用比較白話的講法可以說是 "第一屏",大部分網頁在瀏覽器內可以看到的網頁高度,平均在 700 pixel 左右。

因為剛好最近在研究,我想順便把 Luke 的 Twitter 整理一下給大家參考。

(內嵌 Twitter 原文,請稍微等候一下,別急著滾動 :P )


Part 1
Luke 先提出滾動深度的現象給大家參考,人們常常在整個頁面還沒有 load 完就開始捲動頁面,大約有7成的使用者會只會看第一屏看到的東西
橫軸是網頁由上往下的 pixel 高度 。



Part 2
這張在講的使用者願意去互動的秒數(y軸)跟滾動的高度(x)


延伸閱讀:網頁的捲動行為研究
http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/


2014年10月23日 星期四

微博 weibo 2014 改版介紹 Redesign


前幾個月都在研究 weibo 的手機觸屏版 http://m.weibo.cn
很喜歡 weibo 的介面跟互動設計
比較舊手機想使用 weibo 也不用擔心安裝 app會跑不動





這週,看到 weibo desktop 版本大改版了
非常喜歡這個 Parallax Scrolling (視差滾動) 設計的介紹頁面
http://www.weibo.com/new (這網址需要有微博的帳號才能看到)

我將畫面擷取下來:



2014年9月30日 星期二

Email (EDM) 設計指南


這個是有名的電子報服務 MailChimp 撰寫的 Email 設計指南
讓設計者學會更有效的應用圖片、字型、Call to Actoin (CTA)
清楚的重點配上圖片,非常有用的指南阿!

以下為我自己整理的重點,詳細可以看最下方的連結

※ content:
專注在單一清楚的重點、簡化再簡化、內容層級分清楚、區塊切割方便掃視、可連外。

※ template:
找一個適合的版型,拖拉編排,最後嘗試整理存下方便未來使用。

※ identity:
清楚的標示自己的 logo。

※ color:
越少顏色才能讓訊息傳達清楚,讓讀者專心在你想傳達的重點上;清楚分開頭尾。

※ images:
使用公司的 logo,讓 user更清楚你從哪來;使用圖片,但要注意圖片的大小。

※ layout:
大多數使用者只花不到 15秒閱讀行銷類的信件,簡潔扼要很重要;排版不要密密麻麻,保留喘息的空間;如有較多文字對齊會更好閱讀;如果內容屬性不同,請分隔清楚。
※ fonts:建議字體大小在 14px-16px,如果要大於 16px,請簡短;選擇適合你的字型,不要超過兩種以上。

※ calls to action:
首先要了解你的 CTAs 是什麼,仔細盤點,一封信件中請不要有過多的 CTAs;給予明確的指示;例如:「購買」、「申請帳號」...等;清楚標示 CTAs 的大小,按照重要性給予不同層級大小;給予的內容跟預期會到達的頁面要盤整清楚,不要讓使用者感到驚嚇。

http://mailchimp.com/resources/email-design-guide/