設(shè)計需要遵循“形式服從功能”的原則，尋找形式與功能之間的平衡點，讓形式為產(chǎn)品帶來價值。設(shè)計出的作品需要符合用戶預(yù)期，將可用性放在設(shè)計的第一位，不做多于設(shè)計，完成產(chǎn)品目標(biāo)。

“1907年美國芝加哥學(xué)派的建筑師路易斯·沙利文在總結(jié)設(shè)計的原則時說：設(shè)計應(yīng)該遵循“形式服從功能”的宗旨”。

雖然現(xiàn)在離他提出已經(jīng)有一百多年了，但是”形式服從功能“這一原則用在界面設(shè)計中也非常適用。

下面一起來看看什么是“形式服從功能”原則；以及它在UI界面中的體現(xiàn)。

一、什么是“形式服從功能”原則

通用設(shè)計法則一書中是這樣定義：“「形式服從功能」法則，可以用兩種方法來詮釋，一種是美感描述，另一種是美感規(guī)范?！该枋鲂栽忈尅怪傅氖敲栏衼碜约兇獾墓δ?，沒有其他多余裝飾?！敢?guī)范性詮釋」指的是設(shè)計注重功能，美感屬于次要?！?/p>

20世紀(jì)初的現(xiàn)代主義建筑師廣泛采用這個法則，從此以后，不同領(lǐng)域的設(shè)計師也紛紛采用。

二、在UI設(shè)計中的體現(xiàn)

在UI設(shè)計中，我們常常說用戶體驗至上，什么是用戶體驗？

如果按照使用程度我們可以分為三個階段：能用、好用、愛用。

1. 能用也就是需要滿足一個最基本的需求，比如房屋的遮風(fēng)擋雨的功能；
2. 好用是在滿足最基本的需求外，同時使用起來舒適、得心應(yīng)手，比如房屋分區(qū)功能；
3. 愛用是在滿足基本需求、用起來好用外，還需要用起來特別爽，也就是我們房屋的布局需要合理。

歸根結(jié)底，功能是設(shè)計的基礎(chǔ)，只有有了完善的功能，才有我們說的用戶體驗和形式美。

下面一起來談?wù)劇靶问椒墓δ堋痹瓌t在UI設(shè)計中的體現(xiàn)：

1. 界面設(shè)計需要盡可能符合人們的心理預(yù)期

如果界面設(shè)計的功能和人們感官的預(yù)期相符合，那么這種設(shè)計會有很高的接納率和使用率，同時也會被認(rèn)為容易操作。人們就會覺得它是一個好用的設(shè)計。

相反的，如果界面設(shè)計和人們感官的預(yù)期相反，那么人們的接納率和使用率就低，很容易導(dǎo)致錯誤操作。人們就會覺得它是一個不好用的設(shè)計。

簡單來說，就是用戶只要看一眼就知道接下來該怎么做，不需要較長的反應(yīng)時間，如果界面中某個元素他看上去像個按鈕，那么他就應(yīng)該具備按鈕的功能，我們不應(yīng)該在基本的交互問題上做過多的”創(chuàng)新“，要在更高的層次問題上發(fā)揮創(chuàng)造力。

例如：QQ和in的登錄界面，其基礎(chǔ)功能就是登錄，而按鈕就就應(yīng)該具有按鈕的功能，我們點擊登錄按鈕，即可完成登錄操作。

2. 可用性是設(shè)計的基礎(chǔ)

可用性是設(shè)計的基礎(chǔ)，它是判斷一個產(chǎn)品成功與否的關(guān)鍵，什么是可用性？

簡單來說就是，是否解決了用戶的問題。怎么判斷是否為用戶解決問題呢？

主要從用戶完成一個操作的效率、完成任務(wù)的有效性、用戶的主觀滿意度等。

如果用戶在使用產(chǎn)品時，能夠快速、準(zhǔn)確、滿意的完成任務(wù)流程，那么我們就說這個產(chǎn)品的可用性較高。

以百度地圖為例：打開地圖頁面首先看到的就是路線的藍(lán)色按鈕，點擊按鈕我們即可進(jìn)入路線的查詢頁面。而當(dāng)我們要搜索某個地點或者公交，可以在頁面頂部搜索。

如果你在開車不方便進(jìn)行文字輸入，那么百度地圖還提供語言搜索功能，整個體驗過程都流暢便利，這一切都是源自產(chǎn)品良好的可用性。

3. 設(shè)計師摒棄盲目的外觀崇拜，減少非功能性的多余裝飾

按照通常的理解，設(shè)計中的裝飾，大多是非功能性的，它的目標(biāo)就是創(chuàng)造審美價值。

裝飾在設(shè)計中不是可有可無的。我們說“形式服從功能”你可能會腦補(bǔ)幾年前的風(fēng)格。

事實上，好的裝飾也是可以為產(chǎn)品帶來價值，這里不是說就不注意形式，而是我們在設(shè)計時，盡量減少非功能性的多余裝飾，一切形式都需要圍繞產(chǎn)品功能。

以京東金融為例，首頁我們很清晰的就能夠看到它的三大模塊：理財、白條、借錢，而其默認(rèn)展示使用頻率較高的理財模塊，在首屏黃金位置對金額、收益進(jìn)行展示，這樣可以刺激用戶將資金轉(zhuǎn)入京東金融，同時對于已加入的人來說，也比較方便對金額進(jìn)行查看。我們看到整個界面清晰簡潔，操作一目了然。

右側(cè)京東金融會員中心，為了營造會員的尊貴感，也可以加入一些金色裝飾，但是整個裝飾都是為了凸顯這一功能而存在的，并不會顯得多余。

然而現(xiàn)在有很多設(shè)計是功能服從形式，僅僅為了展示而存在，這樣的界面往往我們稱為概念稿或者練習(xí)稿。

這張消息界面，從設(shè)計上來說很不錯的，但是在具體使用上，如果用戶量大，我要找個聊天記錄可以就有點痛苦了。

這個僅僅存在設(shè)計師的圈子里面，在商業(yè)社會中，你的設(shè)計稿在炫酷，但是功能不突出，使用不便捷，那就是失敗的設(shè)計。

三、總結(jié)

在設(shè)計時，要明確的是我們是商業(yè)設(shè)計師，我們的目的是滿足用戶需求、解決用戶問題，在設(shè)計中我們需要遵循“形式服從功能”的原則，我們的工作絕不僅僅是給界面填上顏色，換個字體，或者增加一點裝飾，讓它看起來很漂亮，那是藝術(shù)家的工作。

我們做的設(shè)計需要符合用戶預(yù)期，將可用性放在設(shè)計的第一位，同時形式服從功能，不做多于設(shè)計，同時在客戶預(yù)算范圍內(nèi)，或者在產(chǎn)品目標(biāo)上，尋找形式與功能之間的平衡點。讓形式為產(chǎn)品帶來價值。參考通用設(shè)計法則：

1. 《形式服從功能》 P106頁
2. 《淺析“形式服從功能”在界面設(shè)計中的應(yīng)用》 https://wenku.baidu.com/view/3ac78c90650e52ea54189810.html
3. 《[譯] “看起來都一樣”——談設(shè)計的形式與功能》 https://www.jianshu.com/p/63c3b59b2cf8
4. 《功能大于形式！揭秘UI設(shè)計中“性冷淡”風(fēng)格的真相》 http://www.uisdc.com/frigidity-ui-design-style
5. 《淺談“形式服從功能原則”在移動端icon設(shè)計中的應(yīng)用》 http://www.cqvip.com/read/read.aspx?id=668777852

作者：風(fēng)箏KK，公眾號：海鹽社

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議