頁面設(shè)計(jì)原則與技巧

時(shí)間：2023-09-03 06:30:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-03 06:30:02 來源：網(wǎng)站運(yùn)營

頁面設(shè)計(jì)原則與技巧：隨著工作年限的增加，越發(fā)感受到，好的PM和好的設(shè)計(jì)師，應(yīng)該是站在同一陣線上的。一個(gè)頁面的體驗(yàn)和美感（設(shè)計(jì)師負(fù)責(zé)）與一個(gè)頁面的信息量、信息架構(gòu)（PM負(fù)責(zé)）息息相關(guān)。不懂設(shè)計(jì)的PM是不合格的PM，不懂產(chǎn)品的設(shè)計(jì)師也不是合格的設(shè)計(jì)師。

上一節(jié)，我們舉了很多實(shí)例來輔助我們學(xué)習(xí)一些設(shè)計(jì)原則，學(xué)習(xí)如何設(shè)計(jì)友好而易用的界面，這一節(jié)，我們繼續(xù)來討論相關(guān)的問題。

信息量太大，頁面怎么擺？

作為崇尚極簡的設(shè)計(jì)師，信息量太多，無處可放，嚴(yán)重影響了界面美感。

設(shè)計(jì)師沒辦法控制界面信息量的大小，多少與產(chǎn)品和業(yè)務(wù)相關(guān)。但我們?nèi)砸Ｕ鲜鼙姷慕邮招Ч莆招畔⒌恼宫F(xiàn)方式，來組織好這些信息。就如同，沒有經(jīng)過組織的頁面就想擺滿地?cái)偟募?，而?jīng)過精心設(shè)計(jì)的頁面就像精品市場(chǎng)，信息量雖大，但井然有序。




1. 接近原則

相鄰的元素會(huì)在視覺上讓用戶認(rèn)為是同一組事物。同一組元素使用小間距，不同組之間使用大間距，讓用戶一目了然。




2. 差異原則

展現(xiàn)形式不同的元素會(huì)讓用戶認(rèn)為是屬于不同組的，讓信息層級(jí)更加清晰。類別不同，但展示形式相同會(huì)讓用戶產(chǎn)生疑惑。如下圖，新聞板塊與視頻、圖集、專題的展示形式都做了差異化處理。




3. 包含關(guān)系

邏輯上有包含關(guān)系的要在視覺上進(jìn)行嵌套。就如同Word，需要給一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、正文等使用不同的樣式，讓層級(jí)結(jié)構(gòu)一目了然。設(shè)計(jì)界面的時(shí)候，設(shè)計(jì)師也需要用視覺語言，讓頁面層級(jí)關(guān)系不言而喻。如下圖：




4. 增強(qiáng)對(duì)比關(guān)系

弱化非重點(diǎn)信息，強(qiáng)化重點(diǎn)信息，使界面的重點(diǎn)信息“跳出來”。如下圖，電商網(wǎng)站的評(píng)論模塊。對(duì)于商品評(píng)價(jià)，用戶最先想要看到的是商品的綜合評(píng)分，看到感興趣的內(nèi)容，用戶才細(xì)細(xì)查看評(píng)論內(nèi)容。所以該模塊的設(shè)計(jì)，通過加粗評(píng)論標(biāo)題，給評(píng)分星級(jí)增加鮮艷的色彩，將評(píng)論字體顏色明度降低等方法，來讓重點(diǎn)信息“跳出來”。

又如下圖，Gmail收件箱界面。對(duì)于用戶來講，未讀郵件是需要首先被看到的，所以增大文字和背景的對(duì)比度，同時(shí)加粗文字著重強(qiáng)調(diào)。而已讀郵件是用戶已經(jīng)閱讀過的，可以弱化顯示，降低文字和背景的對(duì)比。







5. 將次要信息隱藏

根據(jù)二八原則，80%的用戶僅使用到產(chǎn)品20%的功能。也就是，設(shè)計(jì)師不該將那80%不常用的功能重點(diǎn)展示。為了避免干擾新手和中間用戶使用，我們應(yīng)該將次要信息隱藏起來，待用戶需要時(shí)再展示出來。如Google的主頁，將不常用的功能放到更多里。將專家級(jí)用戶才用的功能放到下一層級(jí)的頁面中：




Google應(yīng)用商店也使用了這一技巧。當(dāng)鼠標(biāo)懸浮在某個(gè)應(yīng)用上時(shí)，會(huì)顯示應(yīng)用的評(píng)分、簡介和添加按鈕、分享按鈕。當(dāng)用戶覺得這是我想要的，可以快速通過添加按鈕將應(yīng)用添加至Chrome瀏覽器。

該頁面起到的作用是 “快速篩選、激發(fā)興趣”。如果展示的信息太多，用戶瀏覽起來會(huì)很累。如果展示信息過少，用戶看到某個(gè)興趣點(diǎn)之后，需要進(jìn)行點(diǎn)擊，到新打開的詳情頁去判斷了解詳情，判斷是否是他想要的東西。多一次跳轉(zhuǎn)意味著用戶的流失。而Google的設(shè)計(jì)者應(yīng)用這一技巧，巧妙地將兩個(gè)頁面的內(nèi)容融為一個(gè)，平衡了信息展示的利弊。

感性的界面 VS 理性的界面

通過產(chǎn)品定位、需求采集與分析、撰寫需求文檔、信息分類與組織、導(dǎo)航設(shè)計(jì)、任務(wù)分解、繪制界面草圖等一系列理性的步驟，我們終于得到了界面雛形。但在細(xì)化具體的界面時(shí)，我們又常常糾結(jié)于細(xì)節(jié)無法自拔。比如：圖片大點(diǎn)還是小點(diǎn)？按鈕放左邊還是右邊？

為什么會(huì)出現(xiàn)這種狀況？這是因?yàn)樵谧鲈O(shè)計(jì)的過程中，設(shè)計(jì)師需要用到不同的思維方式。在以上的設(shè)計(jì)階段中，只有你的設(shè)計(jì)思路是清晰的，你給到用戶的指引和操作路徑才可能清晰。而在繪制界面細(xì)節(jié)時(shí)，設(shè)計(jì)師又需要使用偏感性的思維方式。因?yàn)橛脩粼谑褂卯a(chǎn)品時(shí)不會(huì)可以思考背后的邏輯，而是通過感覺來判斷你的產(chǎn)品。




印象是第一位的，如果你第一眼看到的界面并沒有吸引到你，那么你可能會(huì)離開這個(gè)網(wǎng)站，即使這個(gè)網(wǎng)站所有的操作流程都設(shè)計(jì)得非常流暢，用戶也沒機(jī)會(huì)使用了。




以人為本的設(shè)計(jì)理念

做設(shè)計(jì)，要至始至終考慮到用戶的使用情景和心理感受。如下圖例子，淘寶的收藏夾和購物車頁面內(nèi)容類似，都包含圖片、商品名稱、價(jià)格等。如果按照正常邏輯來處理，兩個(gè)頁面的設(shè)計(jì)樣式應(yīng)該是類似的。有的電商網(wǎng)站甚至把這兩個(gè)頁面的樣式設(shè)計(jì)成一模一樣的，但為什么淘寶的收藏夾和購物車卻又很大差別呢？

這正是因?yàn)榭紤]到用戶的使用情景和心理感受。如果用戶對(duì)商品感興趣，但又不急于購買，就會(huì)傾向于把商品加入收藏夾。如果用戶的購買欲望較強(qiáng)烈，就會(huì)傾向于把商品加入購物車。所以，收藏夾適度突出圖片、評(píng)論、人氣等去吸引用戶購買，購物車則盡量簡潔明了，不過多干擾用戶，僅陳列商品、價(jià)格、購買數(shù)量，方便用戶迅速下單，完成支付。

幫助用戶找到想要的東西

信息組織與分類的目的，就是要讓信息易于找尋。讓有明確目標(biāo)的用戶，能夠快速找到所需信息；有不確定目標(biāo)的用戶，通過瀏覽和尋找，一點(diǎn)點(diǎn)明確自己的需要，最終找到信息；讓沒有目標(biāo)的用戶在探索中激發(fā)需求?；ヂ?lián)網(wǎng)產(chǎn)品中信息的組織與分類，要滿足這3種情況。

如下圖ebay首頁，有明確目標(biāo)的用戶通過搜索找到特定商品，對(duì)于有大概目標(biāo)的用戶通過左上角的商品分類，在特定類目中尋找商品，而對(duì)于沒有目標(biāo)的用戶可以瀏覽最近熱銷或有折扣的商品，激發(fā)購買需求。




新聞資訊類網(wǎng)站也同樣如此：




吸引無目標(biāo)用戶

對(duì)于無目標(biāo)或目標(biāo)不明確的用戶來說，我們不能再用理性、邏輯的思維方式來對(duì)待他們，而是要充分換位思考，用感性的方式來給他們營造貼心、友好、有吸引力的界面。

以下是新浪微博的登錄界面：




對(duì)于有明確的登錄或注冊(cè)需求的用戶來講，界面邏輯清晰，沒有問題。但對(duì)于不了解新浪微博是做什么的用戶來講，既想了解又懶得注冊(cè)的用戶，這個(gè)頁面的內(nèi)容完全無法吸引他們。




而本站的登錄頁，在最顯眼的地方提供了登錄框，下方則推薦了高質(zhì)量的用戶和畫圖，讓用戶沒有注冊(cè)時(shí)也能夠?qū)Ρ菊玖私庖欢?。從產(chǎn)品邏輯上來講，登錄頁的任務(wù)就是讓用戶完成登錄，一個(gè)簡單的登錄框即可，如果嚴(yán)格遵守產(chǎn)品邏輯，內(nèi)容推薦也許不會(huì)出現(xiàn)在這個(gè)頁面上，無目標(biāo)用戶也很難被吸引。




改版前和改版后的Flickr注冊(cè)頁，哪個(gè)界面邏輯更清晰呢？顯然是改版前，清晰地展示了注冊(cè)按鈕以及注冊(cè)后所能使用的功能。但哪個(gè)更吸引人？




符合用戶的心理模型

下面兩款用戶天氣應(yīng)用。第一款似乎更加清晰，用最大的數(shù)字表示天氣情況，用戶理解起來應(yīng)該不存在任何問題。但第二款通過顏色的變化和數(shù)字的高低，讓用戶直觀地感受到了天氣的變化趨勢(shì)，仔細(xì)觀察還發(fā)現(xiàn)，界面背景有向下波動(dòng)的波紋，可以讓用戶更貼切地感受到氣溫在下降。




用戶不僅有理性，更有感性。過分關(guān)注邏輯可能導(dǎo)致設(shè)計(jì)偏離用戶目標(biāo)，最終導(dǎo)致易用性受到影響。邏輯正確的產(chǎn)品保證產(chǎn)品可用，只是未必好用。平衡好理性和感情，才能設(shè)計(jì)出友好而易用的產(chǎn)品。


以下舉例更多情感化的設(shè)計(jì)案例。

網(wǎng)易云的部分?jǐn)M物化，抽取老式播放機(jī)的唱片和唱針：







使用色彩表示晴天雨天：




仿造抽屜思想的彈窗：




寵物電梯按鈕，有帶寵物就按上（以免有人受到驚嚇）：




Quora登錄時(shí)的貼心設(shè)計(jì)：




郵件提到 “附件” 兩個(gè)字時(shí)，會(huì)在發(fā)送時(shí)，提醒郵件中沒有任何附件，確定發(fā)送嗎？




微信和Google的驚喜：




情景的烘托和帶入，Ben The Bodyguard 是一款保護(hù)手機(jī)隱私數(shù)據(jù)的iphone應(yīng)用：




說明：該系列教程主要來自對(duì)《破繭成蝶》的總結(jié)，感謝劉津和李月前輩！