做到這8條 讓你的產(chǎn)品界面盡善盡美

TECH2IPO/創(chuàng)見的編輯團隊由5個 處女座 追求盡善盡美的編輯組成，由于見過、用過了太多的應(yīng)用產(chǎn)品和實物產(chǎn)品，每當我們拿到新東西準備把玩一番時，對于界面、操作邏輯等方面的吐槽完全停不下來。

這也難怪，特別在國內(nèi)，好的 UI 設(shè)計格外的少。就拿手機應(yīng)用來說，國內(nèi)部分大公司和大產(chǎn)品為了迎合已經(jīng)被慣壞的用戶，跨平臺移植用戶界面、傻大粗的按鈕文字等設(shè)計行為，頻頻出現(xiàn)，。亦或者直接抄襲照搬國外的產(chǎn)品設(shè)計，比如新浪微博手機客戶端抄襲 Tumblr 的發(fā)布器設(shè)計。

而國外的公司、設(shè)計人員，通常會學習正統(tǒng)的設(shè)計知識，對于圖形設(shè)計、交互設(shè)計和工業(yè)設(shè)計這三者的獨立與融合，具有良好的理解。從設(shè)計這個詞語進入我們的視野，開始指導(dǎo)我們的生活開始，我們見到的大多數(shù)情況都是國內(nèi)抄襲國外，而國外一直沒有停止創(chuàng)新。中外設(shè)計差異，總是差著那么幾年(近幾年追的速度快多了呵呵)。

對于設(shè)計者來說，不論你是采用包豪斯風格，以博朗(Braun)和蘋果(Apple)的實物或虛擬產(chǎn)品為例，還是是極簡風格，以 Android 4.0 操作系統(tǒng)以來的設(shè)計規(guī)范“Holo Design”為例，你都能夠，且應(yīng)該按照符合現(xiàn)代人美感、操作習慣去設(shè)計產(chǎn)品。

于是，我們總結(jié)了8條能夠指導(dǎo)你設(shè)計出優(yōu)雅、精致的產(chǎn)品 UI 的原則，希望能給設(shè)計者、開發(fā)者們帶來幫助。

頭圖來自 grasshopperherder.com：What is UX?

1. 美觀

顧名思義，我們不要難看的設(shè)計，我們不要難看的顏色搭配，不要奇形怪狀的按鈕，不要任何讓眼睛難受的元素存在。好看、美觀的設(shè)計，不僅僅能讓你的用戶用的開心，還能讓他們想再用，一直用。你的產(chǎn)品獲得了很高的

一萬個人心中有一萬個哈姆雷特，這意味著不是所有的用戶都覺得某一種界面設(shè)計風格很好看。設(shè)計者應(yīng)該去了解最大部分的用戶需求，了解到他們心中“美觀”的交集在哪里。

這是Google Chrome瀏覽器(for Mac)的標簽界面。Google 崇尚極簡風格設(shè)計，這不代表他們做好最基本之后就結(jié)束了。你能從這個界面清楚地看到，他們花了很大心思打磨 UI，在保障了功能性的同時讓用戶賞心悅目(跟 TECH2IPO/創(chuàng)見 的風格也很搭配呢)。同樣，你的桌面/網(wǎng)頁/移動應(yīng)用，是不是也應(yīng)該在完成所有功能之后，先別匆匆上線，而是找?guī)讉€設(shè)計師再打磨優(yōu)化一下呢?

在簡約、扁平化設(shè)計流行的今天，你的應(yīng)用和網(wǎng)站應(yīng)該采用一或幾種平滑、大氣、優(yōu)雅的配色方案。http://flatuicolors.com/ 這是筆者經(jīng)常使用和參考的一個配色網(wǎng)站，你也來看看吧。

2. 清晰

清晰是 UI 設(shè)計中最重要的部分：試想用戶在你的產(chǎn)品上根本找不到需要的功能在哪兒，而不想要的功能堆疊、羅列在眼前，心煩意亂，又怎能使用的開心呢?

這是知名博客服務(wù) WordPress 中，創(chuàng)建新文章的工具條 (Toolbar) 界面。這個按鈕是干什么用的?鼠標放置在上面一會，一個簡單的功能介紹 (Tooltip) 就會出現(xiàn)，告訴你這個按鈕的作用。同時，設(shè)計者在這個按鈕上使用了符合功能說明的圖標，讓你印象更深更清晰，下次需要用到這個功能的時候就不用再費力尋找了。同樣，你的桌面/網(wǎng)頁/移動應(yīng)用每一個按鈕是干什么用，你確認用戶都知道嗎?打個比方，如果你沒有使用 iOS/Android 的開發(fā)工具包，沒有使用他們提供的設(shè)計規(guī)范設(shè)計你的應(yīng)用，很有可能用戶不知道你在這個地方放置一個齒輪/加號/三橫線是干什么用的，而這很有可能導(dǎo)致誤操作，惡化用戶體驗。

3. 相似

當然，我不是在鼓勵你把自己的應(yīng)用做的和別人的應(yīng)用、那些熱門應(yīng)用差不多，那樣根本就不是在設(shè)計，是在抄襲。相似的意義在于，用戶進入到你的產(chǎn)品中，使用了某一個功能，之后，他就知道其他功能的位置和使用方法了。假如所有的功能都被羅列在一個菜單下，或使用選項卡規(guī)整的排列好，有效降低用戶學習成本，對用戶體驗將有很大的提升。

以下圖片，分別是網(wǎng)頁端 Gmail，和 iOS 端 Twitter 的頂級界面圖，在 Gmail 界面的左邊和上邊你能清楚的看到所有的信箱/標簽卡羅列出來。Twitter 也是，點過一個信箱/標簽卡，就知道點其他的是干什么用的了。

4. 簡明

太多的菜單，太多的標簽，太多的圖標，太多的 Tooltip ……好的東西堆積多了的話，也變成了不好的事。我們需要精確，需要簡明。一句話能說明白的事，絕對不說3句。

把一些選項類的東西做成最直觀的樣子。

這是 OSX 工具欄中的音量調(diào)整選項，很簡明直觀：從下到上就是從小到大。大部分的音量、亮度等選項也是這樣的，要么就是從左到右。當然，這只是一個例子，目的是告訴你不要把音量做成“音量 1”、“音量 2”、“音量 3”這樣的感覺。

同樣，錯誤提示也是很多設(shè)計的大問題“丟失關(guān)鍵的 xxxx.DLL 文件”、“xxxx 指令引用的 xxxx 內(nèi)存，該內(nèi)存不能 written ”，這是什么東西?跟我有什么關(guān)系?我要解決問題，而不是先被大棒打暈再解決問題;很多開發(fā)者干脆忽略了錯誤提示，出現(xiàn)故障的時候應(yīng)用直接閃退，用戶的所有修改全都丟失。不好好處理錯誤提示，會導(dǎo)致極差的用戶體驗。

錯誤提示可以做的很簡單：“應(yīng)用剛崩潰了，不過你的修改已在崩潰前上傳云端/本地緩存”?；蛘吒唵?，一句話“崩潰已恢復(fù)”就搞定了。用戶不需要知道機器或應(yīng)用到底什么地方出了毛病，他只需要知道還可以繼續(xù)用。

5. 一致性

針對單獨的應(yīng)用設(shè)計適合的 UI，這是正確的，具體情況具體分析，這是馬克思主義哲學教導(dǎo)我們的。但，如果一個開發(fā)者開發(fā)了多款應(yīng)用，他是否應(yīng)該給這些應(yīng)用設(shè)計一致的界面呢?

一致性的 UI 設(shè)計使得用戶能夠養(yǎng)成相對固定的使用習慣，讓他們在同一開發(fā)者的多款應(yīng)用間，或者同一應(yīng)用的新舊版本間，自由的切換使用，而不需付出太大的學習成本。

一個最標準的例子：Microsoft Office 套件，他們的菜單的一致性設(shè)計是業(yè)界的楷模。

6. 及時響應(yīng)

“及時響應(yīng)”意味著：

(1)快：不管背后的應(yīng)用運算，還是網(wǎng)絡(luò)傳輸，至少界面的所有動作要快。要么整個界面讀取迅速，要么界面元素先最快速度讀取出來，內(nèi)容隨后跟上也成。因為“加載中”“小菊花”這樣的界面元素，實在是令用戶心碎。

(2)即時反饋：這個按鈕我按了還是沒按來著?網(wǎng)絡(luò)信息瞬息萬變，這一秒按了什么下一秒我也許就不記得了。不論用戶在 UI 上進行了何種操作，UI 都應(yīng)該給予用戶適當?shù)姆答?。那么這個按鈕能不能至少呈現(xiàn)一個“被按下”的樣式?讓用戶知道剛才按過這個按鈕了。盡管網(wǎng)速慢或是運算速度慢，但至少用戶知道應(yīng)用不是死掉了，后臺在很努力的加載新內(nèi)容當中。

這是 Gmail 第一次加載收件箱的界面。郵箱界面元素加載需要時間，用戶郵件內(nèi)容加載也需要時間。為了不讓用戶看著“白菊花”干瞪眼，或者看著沒有成行的網(wǎng)頁框架逐漸加載出來，Google 加入了這個非常簡單的加載界面。既告訴了用戶后臺正在加載，沒有“死機”，向用戶通報了加載的進度。

7. 操作效率

UI就是一輛觀光車，不同的功能是這輛車帶你去的地方。那么，為了讓游客玩得舒心，玩的放心，除了讓他們在車上的時候坐得舒服(上一條：及時響應(yīng))之外，一輛好的觀光車至少應(yīng)該能快速地把游客帶到他們想要去的地方，而不是順路經(jīng)過了太多別的地方(冗余功能)。這就是操作效率的問題所在。

使用 iPhone 的朋友都知道 iOS 的圖片分享功能，這個功能就是 UI 設(shè)計中注重操作效率的典范。選擇了一張圖片之后，iOS 早就幫用戶想好了我可能要拿這張圖片做什么：分享到 Twitter 或是微博?和附近的朋友通過 AirDrop 分享?當做朋友頭像，或是設(shè)定為墻紙?有了這一步操作邏輯的加入，用戶不再需要單獨打開對應(yīng)的應(yīng)用，再進行操作。“圖片分享”就是用戶的一站式解決方案。

8. 操作可修正(錯誤-友好)

人無完人，即便是經(jīng)常使用的網(wǎng)站或應(yīng)用，用戶都可能因為誤操作而丟失數(shù)據(jù)：這封郵件不小心刪除了，為什么回不來?你這破郵箱怎么設(shè)計的?滾粗吧!大部分用戶都是無情，不要指望他們理解你作為一個開發(fā)者有多苦多累。你需要做的，就是讓自己的應(yīng)用盡善盡美，而修正用戶誤操作，就是其中重要的一項體驗方面。

這是 Gmail 的撤銷操作提示。Gmail 為用戶刪除郵件的動作提供了雙重可反悔的選項。第一重，你可以點擊這個撤銷動作的按鈕。第二重，你還可以在“已刪除”郵件箱里面找到所有刪掉的郵件，30 天內(nèi)的已刪除郵件都有機會恢復(fù)。

Mailbox是一款知名的郵件應(yīng)用，之前一度要求用戶排隊注冊。該應(yīng)用使用 GTD、To-Do List的操作邏輯，為用戶提供了一種革新的郵件處理模式。我們都知道，To-Do List是一個重要的效率管理方式，完成的項目可以被歸檔，而不是簡單的刪除。在 Mailbox 當中，郵件被當成了待辦事項，而對一封已讀郵件的處理方式，包括了“已辦”和“刪除”。所以，被用戶處理掉的郵件，要么在“已辦”當中，要么在“已刪”當中，而這封郵件的狀態(tài)可以在“已辦”、“已刪”、“待辦”、“推遲以后辦”的數(shù)種狀態(tài)中來回切換。

后話

即便了解以上 8 點，想要為產(chǎn)品和應(yīng)用設(shè)計優(yōu)雅、精致的 UI，開發(fā)者還是會發(fā)現(xiàn)他們陷入了矛盾當中：設(shè)計地簡約一些，會功能表達不完整，用戶學習成本太高。而功能表達完整了，界面又變得臃腫不堪。在所有的要點中達到均衡，需要不斷時間和項目的不斷磨練。最關(guān)鍵的在于，開發(fā)者要根據(jù)自己的產(chǎn)品/應(yīng)用類型，實施最適合的 UI 設(shè)計。如果我要做一款記賬應(yīng)用，我可以考慮為頂級界面設(shè)計一個按周或者按月展開的監(jiān)視表，這是一種邏輯;我也可以選擇按照流水的種類：收入、支出、借貸等項目按菜單羅列清晰，而這又是一種邏輯。選擇適合產(chǎn)品的設(shè)計風格，才是最重要的事。