在UI的設(shè)計上微信比Line好在哪里？

上世紀美國最偉大的工業(yè)設(shè)計師之一亨利·德萊福斯在其《為人的設(shè)計》一書中有這樣一句話：工業(yè)設(shè)計師一開始就要丟棄過度裝飾，他們的實際工作就是堅持對產(chǎn)品進行仔細分析，研究是什么使得產(chǎn)品進行運作，并設(shè)計出一套讓產(chǎn)品更好運作的方法——最后是使得它看起來更美觀；我們可以將這句話簡單理解為：工業(yè)設(shè)計首先要實現(xiàn)功能，然后在此基礎(chǔ)之上追求美感。這里雖然是定位于工業(yè)領(lǐng)域而言，但其實它適用于包括UI設(shè)計在內(nèi)的所有設(shè)計。

微信和Line作為移動互聯(lián)網(wǎng)時代在全世界范圍內(nèi)最為流行的幾款即時通信軟件中的兩個，它們各自在通信功能上的實現(xiàn)已經(jīng)沒有什么大的差距了；因此我們不如從UI設(shè)計的角度來對比二者。筆者經(jīng)過一段時間的體驗，發(fā)現(xiàn)了微信比LINE在UI設(shè)計方面的更加優(yōu)秀之處。

①微信在界面設(shè)計上更加一致

一致性是UI設(shè)計的一個重要原則；它能夠保證用戶在同一個軟件的不同界面都能夠看到某些共有的設(shè)計元素的存在，從而感受到軟件是一個有機的組合體而不是幾個界面的簡單拼湊。在軟件主界面的設(shè)計上，微信比LINE更加精致，更能體現(xiàn)這種一致性。

微信：切換時標題欄在頂部，導航欄在底部，二者形成對稱結(jié)構(gòu)，內(nèi)容在中間切換；

Line：切換時標題欄在頂部為第一欄，導航欄為第二欄，內(nèi)容在二者之下切換。

微信：切換時黑色標題欄完全不變，左邊“微信”字樣，右邊是搜索圖標和加號；

Line：切換時無論是左側(cè)的標題還是右側(cè)的圖標都在隨著界面的改變而改變；

微信：在所有的二級菜單下，都保持了頂部黑色標題欄，左側(cè)是返回箭頭和標題，右側(cè)是隨功能而變的附加項圖標。

Line：在不同的二級菜單下，頂部的標題欄保持灰藍色不變，但是其左右側(cè)的圖標則一直在改變。

這里微信給人的感覺是，它以不變的頂部標題欄為“天”，以微變的底部導航欄為“地”，“天”和“地”形成一個顯著的對稱結(jié)構(gòu)，在這個一樣相對穩(wěn)定的結(jié)構(gòu)之下，進行內(nèi)容的交互；這個框架一直在用標題欄中的字樣提醒你，你用的是“微信”。而在Line四個界面的切換中，我們看不到貫穿于四個界面的完全一致的元素。

微信讓用戶感受到萬變不離其宗；而Line則會讓用戶在諸多的改變中感受到少了某種一以貫之的穩(wěn)定感和歸屬感。

②微信在色彩運用上更加純粹

色彩運用是UI設(shè)計的重要組成部分。微信和Line作為通訊軟件，它們都不約而同地選擇了綠色作為自己軟件圖標的主色調(diào)，然后襯以白色。但在打開軟件之后，兩者的顏色搭配卻大相徑庭。

微信對綠色和白色極為鐘愛：主界面導航欄圖標填充色（綠色和白色）；聊天對話框中的背景色（綠色和白色）；單個聯(lián)系人“詳細資料”頁面下“發(fā)消息”和“視頻聊天”按鈕的背景色（白色和綠色）；“掃一掃”下圖標填充色（白色和綠色），以及掃描框四角標志顏色（綠色）；設(shè)置界面下某些項目的狀態(tài)按鈕的填充色（白色和綠色）……

Line的顏色則更加多樣化：軟件圖標為（白色和綠色）；主界面的標題欄和導航欄（灰藍色和白色）；單個聯(lián)系人卡片圖標（深灰藍色）；聊天界面時發(fā)送按鈕（藍色）……

Line的顏色安排具備一定的間接性和合理性；但它并沒有堅持軟件從外到里，從整體到局部的顏色協(xié)調(diào)，從而在某些界面表現(xiàn)出不和諧甚至凌亂的特征。然而微信的極致之處在于，它充分地將綠色和白色作為UI設(shè)計的元素，并將白色和綠色充分地運用軟件界面到各個可能的地方，構(gòu)成了綠、白、黑三大主色調(diào)（當然黑色或灰色作為背景色或者字體色出現(xiàn)是必然的，淺藍色等其他顏色也有極低的出現(xiàn)率）。這種色彩運用使得微信在色彩上顯得更加純粹，更加簡潔，當然也更具有一致性。

③微信在操作邏輯上更加成熟

Ui設(shè)計應當使用戶在操作上舒適簡單，盡量少地減少用戶的學習成本。作為兩款社交軟件，它們在聊天界面的設(shè)計上都是非常用心，但微信的操作邏輯顯然更為成熟。

首先，在微信的聊天界面里，聊天對象的頭像在左，“我”的頭像在右，更為直觀地體現(xiàn)出聊天雙方的互相交流的關(guān)系；而在Line的聊天界面下，左側(cè)有聊天對象的頭像，而右側(cè)卻并沒有“我”的頭像與之對應，這樣就導致用戶在聊天體驗中視覺上和感覺上的不平衡。

其次，在微信聊天界面中，右下角有一個加號來調(diào)出“圖片”“小視頻”等附加功能，當點擊時，各項附加功能很自然地出現(xiàn)在底部；而在Line中，調(diào)出附加功能的加號則被安排在左下角，但若點擊此加號，各項附加功能卻突然從頂部彈出，讓人覺得十分突兀。

不僅如此，Line在同一個界面中，不僅有左下角加號，還在右上角安排了一個下拉菜單圖標，但二者的功能確實有部分重疊的；這給人的感覺不僅有些重復，甚至有些混亂。而在微信上，則不存在這種問題。

綜合以上三點來看，微信在UI設(shè)計上的確比Line更加精致；它充分地貫徹了UI設(shè)計中的一致性原則，將色彩、圖標、文字等相關(guān)設(shè)計元素有效地使用在各級菜單中，使用戶在體驗不同功能的同時又能感覺到某種貫穿整個軟件的特征；從而使軟件擁有了靈魂。如果非要將這種靈魂打上幾個標簽的話，可能是：簡潔、一致和自然。

當然，Line相比微信而言，也有它自己的長處；比如說Line在功能實現(xiàn)上就比微信更加全面和自由。但問題是，當這種功能的全面實現(xiàn)已經(jīng)超出了普通用戶的需求的時候，它并不能成為一個加分項。微信和Line的使用者都是人，而人都是視覺的動物；但一件產(chǎn)品足以滿足人們的使用功能的時候，它就不得不在滿足人們對于產(chǎn)品美感的要求方面下功夫。從這個意義上而言，任何成功的產(chǎn)品都必然是基于對于人性的理解和滿足的。

而微信，顯然比Line更懂人性。

文章系@產(chǎn)品美學 原創(chuàng)，首發(fā)于百略網(wǎng)，轉(zhuǎn)載請注明作者及來源。掃描下方二維碼關(guān)注作者公眾號。

生成海報

免責聲明：本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性，但不保證有關(guān)資料的準確性及可靠性，讀者在使用前請進一步核實，并對任何自主決定的行為負責。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏，概不負任何法律責任。任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時，應及時向本網(wǎng)站提出書面權(quán)利通知或不實情況說明，并提供身份證明、權(quán)屬證明及詳細侵權(quán)或不實情況證明。本網(wǎng)站在收到上述法律文件后，將會依法盡快聯(lián)系相關(guān)文章源頭核實，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。