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

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

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

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

微信：切換時(shí)標(biāo)題欄在頂部，導(dǎo)航欄在底部，二者形成對(duì)稱(chēng)結(jié)構(gòu)，內(nèi)容在中間切換；

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

微信：切換時(shí)黑色標(biāo)題欄完全不變，左邊“微信”字樣，右邊是搜索圖標(biāo)和加號(hào)；

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

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

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

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

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

②微信在色彩運(yùn)用上更加純粹

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

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

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

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

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

Ui設(shè)計(jì)應(yīng)當(dāng)使用戶在操作上舒適簡(jiǎn)單，盡量少地減少用戶的學(xué)習(xí)成本。作為兩款社交軟件，它們?cè)诹奶旖缑娴脑O(shè)計(jì)上都是非常用心，但微信的操作邏輯顯然更為成熟。

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

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

不僅如此，Line在同一個(gè)界面中，不僅有左下角加號(hào)，還在右上角安排了一個(gè)下拉菜單圖標(biāo)，但二者的功能確實(shí)有部分重疊的；這給人的感覺(jué)不僅有些重復(fù)，甚至有些混亂。而在微信上，則不存在這種問(wèn)題。

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

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

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

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

生成海報(bào)

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