讓網(wǎng)站易于閱讀,絕不是可選項

7 評論 3195 瀏覽 5 收藏 4 分鐘

當(dāng)我們設(shè)計網(wǎng)站時,我們在想什么?——設(shè)計引人注目嗎?便于理解嗎?有品牌關(guān)聯(lián)嗎?……

其實最先需要思考的是,文字可以被容易閱讀嗎?

微軟估值高達(dá)340億美元,擁有著一支由設(shè)計師、研究員、開發(fā)人員、原型設(shè)計師、排版員、產(chǎn)品經(jīng)理、人種學(xué)者、作家和腦洞大開思想家組成的龐大團(tuán)隊。即便是這樣的公司,依舊被自家花里胡哨的網(wǎng)站首頁的紛繁復(fù)雜折騰著。

微軟不是特例,“閱讀不能”正在成為業(yè)界流行病。

下圖所示,既不是出不起設(shè)計費的小公司,也不是不起眼的邊角內(nèi)頁。偏偏都是極具設(shè)計意識的業(yè)界大牌,卻更加忽視了“易讀性”,而選擇在首頁或重要頁面上強行秀設(shè)計。

我發(fā)現(xiàn)了三個造成“不易讀”的關(guān)鍵要素:

  1. 自適應(yīng)設(shè)計
  2. 脫離內(nèi)容的設(shè)計
  3. 沒有考慮文本

自適應(yīng)設(shè)計

“圖像+文字”的構(gòu)圖方式很難適應(yīng)不同尺寸的屏幕。圖像中的留空和文字線條長度之間有種微妙的平衡關(guān)系。想要在靜態(tài)畫面中解決這個問題是不可能的。

做個原型吧!

不需要寫代碼,也不用考慮瀏覽器兼容,只需要一個簡單粗暴快速的原型就可以看到各種尺寸下的效果!

切實考慮內(nèi)容

使用最優(yōu)圖像組合進(jìn)行設(shè)計相對簡單。但如果是處理用戶生成的或者動態(tài)的內(nèi)容,就得預(yù)先設(shè)想最糟狀況的應(yīng)對方案。比方說,要在圖像上疊加白色文字,可也許有人偏偏選擇以白色為主的圖像。

不考慮文本

視覺設(shè)計的目的是為了溝通,用把文本和圖像結(jié)合起來的方式才能更好地傳遞信息以及講個動人的故事。選張美圖的同時千萬不要忽視文本內(nèi)容,不考慮用戶閱讀體驗而只顧設(shè)計的都是耍流氓、都是無效溝通!

 

本文譯自:https://medium.com/@colm_roche/legibility-optional-764710e769f4

原作者:https://medium.com/@colm_roche

本文由 @李思柰 翻譯投稿發(fā)布,并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 一個頁面要要適應(yīng)自己的目標(biāo)人群的閱讀習(xí)慣,不同的人群有不同的閱讀方式。不過每一點都是原作的理解,希望譯者可以在每點上的一些個人見解,

    來自遼寧 回復(fù)
  2. 我覺得大部分網(wǎng)站其實是個品牌門面,整體感覺很重要,就是逼格高就OK了,然后其次才是用戶能輕易找到自己想要的內(nèi)容。

    來自廣東 回復(fù)
  3. 剛有點興趣繼續(xù)往下看,就沒了……

    來自廣東 回復(fù)
  4. 看不怎么明白,http://www.bbs.kle13.com

    來自廣東 回復(fù)
  5. 說了什么

    來自遼寧 回復(fù)