如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

你為什么覺得交互設(shè)計難？

原創(chuàng) 康石石 2018-07-30 10:14:24

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

交互設(shè)計作為國內(nèi)當(dāng)下藝術(shù)留學(xué)中的一個新興專業(yè)，申請人數(shù)逐年增加，甚至已有趕超服裝設(shè)計、建筑設(shè)計這些熱門留學(xué)專業(yè)的趨勢。但在專業(yè)認知上，申請交互設(shè)計的同學(xué)卻不及其他兩個專業(yè)。這也使得很多交互學(xué)生在專業(yè)學(xué)習(xí)上要比其他人耗費更多時間，很難快速上手進行交互項目的創(chuàng)作。

但這絲毫不能推責(zé)于各位同學(xué)身上，因為國內(nèi)基本沒有正兒八經(jīng)的交互設(shè)計專業(yè)，即便是有，多數(shù)也在工業(yè)設(shè)計與多媒體設(shè)計之間存有剪不斷理還亂的關(guān)系，這使得很多同學(xué)對交互設(shè)計的認知較為單一，項目創(chuàng)作除了APP設(shè)計就是APP設(shè)計。但其實交互設(shè)計“入門”這件事，找對了方向，往往事半功倍。

今天的文章，康石石將為處于交互“入門”階段的同學(xué)詳細梳理兩個問題：

1. 交互設(shè)計是什么？

2. 入門交互作品集需要從哪些方向入手？

希望大家在通讀文章之后，能夠盡快跨過“入門”這道門檻，以更穩(wěn)定專業(yè)的心態(tài)進入作品集創(chuàng)作。

一、交互設(shè)計是什么？

---

各個百科上對交互設(shè)計都有非常明確的定義，但對于沒有專業(yè)基礎(chǔ)的同學(xué)們來說，這些定義還是略顯彎彎繞繞，康石石簡單解釋一下：交互設(shè)計，其實就像人與人之間的日常交流一樣，人與系統(tǒng)之間也是“有問有答”，具有互動性的，而交互設(shè)計就是協(xié)調(diào)人與系統(tǒng)之間的“交流”方式。凡是可以通過五感來達成的信息傳遞、觀念傳遞、情感傳遞的互動行為都在“交流”的范圍之內(nèi)。

從具體表現(xiàn)形式上來說，包括但不限于手機APP、傳統(tǒng)網(wǎng)站、可穿戴設(shè)備以及新興的VR，各種與非電子類產(chǎn)品的交互關(guān)系也屬于交互設(shè)計的范圍。

這樣一講，交互設(shè)計的范圍似乎太過寬泛，但其實簡單來說，交互設(shè)計大致可以分為三個基礎(chǔ)模塊：

1. 美學(xué)——用戶界面設(shè)計（User Interface Design）

2. 心理學(xué)——用戶體驗設(shè)計（User Experience Design）

3. 計算機&工程學(xué)——人機交互設(shè)計（Human-Computer Interaction）

在這里我們先說UI設(shè)計（用戶界面設(shè)計），大多人似乎都知道UI設(shè)計是什么。但其實，UI放在交互系統(tǒng)內(nèi)，比如眾所周知的app、網(wǎng)站，它可以成為交互設(shè)計展現(xiàn)的一種媒介，是交互設(shè)計中一個難以或缺的組成部分。嚴格來說，UI設(shè)計并不屬于交互設(shè)計，它實則應(yīng)該歸類于Graphic Design--平面設(shè)計。

而HCI（人機交互設(shè)計），與VR、AR，以及大數(shù)據(jù)等次時代的前沿科技相關(guān)，未來發(fā)展前景光明。但需要強調(diào)的是，HCI絕大部分學(xué)校是按理工科教授，因為它主要研究的是人機如何交互，而不是人機為什么交互，為誰交互，以及交互究竟有何意義。簡言之，就是HCI研究人機交互的技術(shù)，更簡言之，多數(shù)是在搞程序、編代碼。

最后，重點說一下涉及到心理學(xué)的UX設(shè)計（用戶體驗設(shè)計）。在交互作品集的創(chuàng)作中，UX是尤為關(guān)鍵和重要的，主要原因在于，相較國內(nèi)對于學(xué)術(shù)研究和視覺審美的培養(yǎng)，國外院校更看重的是設(shè)計出來的物品是否真正解決了用戶的需求。

這一點就要求了設(shè)計者必須換位思考，設(shè)身處地的站在用戶的角度上去考慮設(shè)計的每一步。這也應(yīng)證了交互設(shè)計的本質(zhì)——交互設(shè)計師設(shè)計出來的是用戶想要的東西，而不是設(shè)計師要做用戶想要的東西。

二、入門交互作品集需要從哪些方向入手？

---

一般情況下，對于完全零基礎(chǔ)的同學(xué)，康石石東家-漢藝國際在其進行作品集創(chuàng)作前通常會先安排2-3周的基礎(chǔ)專項課，一系列課程下來，基本就能掌握作品集創(chuàng)作所需的所有知識及能力。這些課程康石石無法在這一篇文章中表述完全，僅為還處于入門階段的同學(xué)就兩方面內(nèi)容作簡要解析：

1. 交互項目

這一點是大多同學(xué)都非常關(guān)心的問題，以下康石石列舉五種最常見的交互項目，若有些同學(xué)已經(jīng)具備較為完善的交互專業(yè)知識與能力，可以嘗試更為高階的項目：

1）APP、網(wǎng)頁

交互設(shè)計作品集中，最容易上手的就是單一化的APP或網(wǎng)頁項目，幾乎每一個同學(xué)都會涉及到。而且APP與網(wǎng)頁項目的制作過程與方法相似程度高達90%，同學(xué)們在創(chuàng)作項目初期可以先嘗試這類項目練手，盡快熟悉作品集的創(chuàng)作流程。

Y同學(xué)，17屆學(xué)生，獲卡內(nèi)基梅隆offer

2）復(fù)合APP制作

比上述提到的APP和網(wǎng)頁稍復(fù)雜的是復(fù)合APP，比如產(chǎn)品+APP、傳感+APP、裝置+APP、手表+APP 、網(wǎng)頁+APP等等，簡單說，不僅僅是以APP為載體類型的應(yīng)用都可以稱之為復(fù)合App。主要也是為了解決形式單一化，以及豐富項目內(nèi)容創(chuàng)造更多設(shè)計點。如果思考維度多元化，專業(yè)領(lǐng)域深入探究，也可以發(fā)展為一個服務(wù)設(shè)計項目。

3）交互裝置制作

交互裝置在交互作品集中屬于拔高項目，因為技術(shù)方面涉及到了電子化編程和電路板連接傳感器等內(nèi)容，呈現(xiàn)效果體現(xiàn)了交互意識、審美意識以及代碼意識。內(nèi)容方面，交互裝置更多是從產(chǎn)品原型開發(fā)去研究。由于涉及到代碼問題，在創(chuàng)作這類項目之前，專業(yè)技能及代碼知識都需要系統(tǒng)的了解。

H同學(xué)，15屆學(xué)員，獲倫敦傳媒學(xué)院、愛丁堡大學(xué)、拉夫堡大學(xué)offer

4）游戲制作（普通→AR→VR）

在交互游戲制作過程當(dāng)中，很多同學(xué)會遇到不知道制作流程，不明晰VR和AR是什么概念，或許也會困惑為何我們把AR、VR列入游戲制作等種種問題。事實上，VR、AR也都需要通過游戲引擎搭建，所以從本質(zhì)上來看，它們都是游戲。

L同學(xué)，17屆學(xué)員，獲倫傳offer

2. 創(chuàng)作交互作品集需要具備的“基礎(chǔ)能力”

對于申請名校而言，同學(xué)們在基礎(chǔ)專業(yè)知識、作品集創(chuàng)作流程之外，還要具備四種基礎(chǔ)能力：基本審美能力、思考和解決問題的能力、創(chuàng)意、以及個人風(fēng)格。

1）基本審美能力

對于設(shè)計師而言，良好的審美能力是必備的創(chuàng)作基礎(chǔ)。一般情況下，院校的考官大多會通過項目中各種低保真、高保真的UI原型設(shè)計，以及整體作品集的排版等視覺元素來判定，包括排版中每個圖標的位置、統(tǒng)計字體大小的一致性、整個項目風(fēng)格的統(tǒng)一性等等。

2）思考和解決問題的能力

設(shè)計過程中，設(shè)計者的思維方式、邏輯關(guān)系是否清晰、有條理，是否通過設(shè)計過程解決了前期提出的問題，這些才是海外藝術(shù)設(shè)計院校的老師們最關(guān)注的關(guān)鍵性問題。

需要和同學(xué)們強調(diào)的是，想要創(chuàng)作一本優(yōu)秀的作品集，最基礎(chǔ)的要求是熟知其創(chuàng)作流程，這是考官的考察點，但僅憑這些自然不夠。

無論是前期調(diào)研還是后期做原型做測試，正規(guī)作品集的流程通常都是一樣的。因此，考官在判定申請者個人思考和解決問題能力的高低時取決于不同人在思考過程中每一步的邏輯所在。根據(jù)什么現(xiàn)象發(fā)現(xiàn)什么問題，根據(jù)什么問題設(shè)計什么功能，如何通過思考一步步得到解決方案，這些都值得同學(xué)們在創(chuàng)作中進行多維度的思考與試驗。

3）創(chuàng)意

不拘泥于APP類型的交互設(shè)計。一個交互作品集通常需要5個項目，同學(xué)們在APP設(shè)計之外，必然需要通過更多創(chuàng)新型項目，用以體現(xiàn)自己對專業(yè)能力的把控以及創(chuàng)意思維的體現(xiàn)。比如目前還屬于創(chuàng)新型拔高項目的VR和AR，尤其是在如今眾多藝術(shù)作品集表現(xiàn)形式都略顯中規(guī)中矩的情況下，一個優(yōu)秀的VR或AR項目會幫助作品集脫穎而出，為整個作品集增加亮點。

比如漢藝16屆學(xué)員T同學(xué)的作品集項目中，將水下AR系統(tǒng)與導(dǎo)航系統(tǒng)相結(jié)合，讓兩種不同的交互題材領(lǐng)域相互融合，展現(xiàn)了自己多維度的創(chuàng)作能力。

T同學(xué)，漢藝16屆學(xué)員，獲金史密斯，威斯敏特大學(xué)offer

4）個人風(fēng)格

在交互作品集中，個人風(fēng)格的體現(xiàn)，幾乎可以算得上能夠最快讓自己的作品集脫穎而出的有效方式之一。這里說的個人風(fēng)格并不是指每個人所做的作品集項目的風(fēng)格，而是你作為設(shè)計者，作品集中所包含的個人設(shè)計理念和思考風(fēng)格。

以漢藝16屆學(xué)員D同學(xué)的CUI項目DANA為例，項目主要為已刑滿釋放重獲自由的前犯人們提供重返社會工作的各種服務(wù)。首先，可以看出項目題材切入點較為新穎，充分展現(xiàn)了D同學(xué)在生活中善于觀察的獨到之處，此外，D同學(xué)還細心的為DANA設(shè)計了虛擬形象，細節(jié)部分可見一斑，充分體現(xiàn)了設(shè)計者的與眾不同和強烈的個人風(fēng)格。

D同學(xué)，16屆學(xué)員，獲CCA、SVA、Parsons Offer

Final: 以上對交互作品集入門階段的知識要點為同學(xué)們做了簡要整理，大家需要明確的是，交互設(shè)計雖是一個新興專業(yè)，很多人對其認知也確實不夠全面，但從零基礎(chǔ)到能夠創(chuàng)作一個完整的交互項目之間并非難以跨越，甚至只要合理安排好時間，有明確的學(xué)習(xí)規(guī)劃，便能很快進入創(chuàng)作期。

最后，上述只是入門交互設(shè)計的基礎(chǔ)知識，若想要支撐自己創(chuàng)作出更具競爭力的交互作品集，必然需要同學(xué)們在交互設(shè)計領(lǐng)域中繼續(xù)學(xué)習(xí)和探索。康石石與東家漢藝也在一直嘗試通過各種課程幫助大家探索更多交互的可能性，這不僅是為了作品集創(chuàng)作，更多的是希望各位在專業(yè)能力以及創(chuàng)作思維上都能有更高質(zhì)的提升。

---

藝術(shù)留學(xué)&藝術(shù)作品集咨詢：

漢藝國際教育--康石石作品集指導(dǎo)團隊

藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

設(shè)計沒有捷徑，但是能騎上自行車肯定會快很多。文章中用17個簡單案例進行透徹的分析。

設(shè)計沒有捷徑，但是騎上自行車肯定會快很多。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

作為設(shè)計師，我們需要很好的控制用戶在使用產(chǎn)品過程中，他們?yōu)g覽的路徑，需要了解我們的眼睛是如何處理信息，本周我會結(jié)合我之前學(xué)習(xí)的一些知識和大家分享下視覺動線這個概念，以及如何在設(shè)計中進行運用！學(xué)習(xí)過程紅大家任何不明白地方，歡迎加我微信交流:uiskyss

藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

作為在即時通訊領(lǐng)域超越昔日霸主 qq，并成為第一大全民 app。微信在產(chǎn)品設(shè)計領(lǐng)域一直被奉為經(jīng)典享受著無數(shù)贊美和模仿追逐。

但是我們用戶在使用產(chǎn)品過程中，難免對微信的某些設(shè)計產(chǎn)生疑問，有的設(shè)計可以說脫離了我們對用戶體驗的認知。

為什么會這樣呢？是否在微信這些「不友好」的設(shè)計存在其背后的深層次的邏輯呢？

以下我舉例10個點來分析這些「不友好」設(shè)計以及它背后的設(shè)計產(chǎn)品邏輯（個人思考猜想）。

1. 點贊評論為何要聚合，增加一個操作層級

朋友圈點擊操作 icon，出現(xiàn)評論和點贊兩個操作按鈕。如果要點贊評論還要點擊對應(yīng)的點贊評論按鈕，為何不直接將點贊和評論按鈕放出來呢？

從用戶操作的性來看，現(xiàn)在的朋友圈這種設(shè)計方式不夠，多增加了一個操作路徑。微信這樣設(shè)計是有什么背后的深意和思考呢？

朋友圈的定位是分享生活，重點是分享而不是互動，如果將點贊和評論的入口直接放出來的話，用戶互動頻率變高，導(dǎo)致點贊者和評論者的特意的意圖性和含金量遠遠不如將兩個操作收起來的高。收起來的點贊評論所收到的贊美和互動會讓分享者更真心實意，同時也減少了消息通知的無效打擾。這樣整個朋友圈互動分享生態(tài)會變得更好。

2. 朋友圈為何不單獨為一個tab，而只是tab里面的一個模塊

在大眾用戶使用最多的兩個功能，一個就是對話，一個就是朋友圈了。但是朋友圈卻作為 tab3 中一個模塊，按照用戶高低頻操作來說，朋友圈完全可以另成為一個單獨 tab 了。

微信為什么這么做呢？我覺得如果微信朋友圈作為一個 tab 的話，那么微信真的變?yōu)榱艘粋€社交工具，而不是一種生活方式了。從格局緯度上說，生活方式的格局定義遠高于社交工具。同時朋友圈作為一個模塊，可以很好的將一部分流量分發(fā)到購物、游戲、掃一掃及小程序等模塊中。

3. 購物、錢包、游戲商業(yè)盈利強的產(chǎn)品為何都只是tab的一個小模塊

在互聯(lián)網(wǎng)產(chǎn)品中，幾乎所有產(chǎn)品的思路都是如何將產(chǎn)品做大，然后實現(xiàn)變現(xiàn)盈利。在中國用戶流量最大的 app 上可以有無限的變現(xiàn)玩法，向游戲、購物、支付這些都是強盈利的產(chǎn)品，而微信卻只以 tab 中的列表展示給用戶，這似乎不符合商業(yè)邏輯。

如果將購物、游戲、支付再升一級進行強化，那么微信給用戶的標簽和定位不再是生活方式，而變成了一個單純的賣貨、游戲、支付平臺，這樣的話可能會影響微信牢不可破的用戶認知和產(chǎn)品地位。

4. 朋友圈為何不支持gif

gif 圖通常是好玩有意思的圖，里面可以充滿各種梗，各種笑點。對于發(fā)朋友圈的人來說，發(fā) gif 圖是用戶一個較大的需求。

在考慮用戶分享者的需求時，也同時要考慮朋友圈瀏覽者的用戶，如果做了 gif 圖，那么用戶在瀏覽朋友圈的過程中，很容易被 gif 動態(tài)所吸引干擾，影響瀏覽者瀏覽整個朋友圈的視覺焦點。有的用戶為了吸引用戶注意會故意發(fā)一些嘩眾取眾動態(tài)圖，吸引微信好友重點關(guān)注，這樣會導(dǎo)致瀏覽者體驗很差。

所以說用戶需求并不是都要做的，需要綜合考慮產(chǎn)品所有角色的所有需求和體驗。

5. 通訊錄作為一個超低頻的需求，為何作為第二個tab

在微信寸土寸金的頁面上，作為第二個 tab，無疑是代表著特別重要的地位，但是呢？這個 tab 內(nèi)容都是和聯(lián)系人相關(guān)的。用戶進入這個頁面操作的頻率很小，為什么要將這么重要的位置給予通訊錄聯(lián)系人呢？

歷史原因，早期的微信版本就是一個即時通訊的 app，所以聯(lián)系人顯得比較重要，作為 tab2 是很正確的，這樣更有即時聊天軟件的認知。

隨著微信成熟之后，其他各個業(yè)務(wù)的進入，導(dǎo)致微信平臺的臃腫，為了避免微信產(chǎn)品的認知和意識形態(tài)的改變，畢竟微信認知還是要保留即時工具這個屬性，所以這個 tab2 一直保留。

6. 微信號為什么不能修改

很多用戶第一次設(shè)置微信號時，隨意取了，例如前任的拼音、以前手機號、很長隨意的字母等等，現(xiàn)在都有想改的需求。但是微信號只能設(shè)置一次，不允許修改。

• 微信號如果可以隨意修改，那么和 qq 昵稱一樣了，不具有唯一性和識別性，整個后端數(shù)據(jù)存儲會變得特別混亂。
• 很多用戶會在好多地方留下微信號（二維碼）以此聯(lián)系，如果可以修改的話，那么留下的微信號（二維碼）可能會作廢，這樣很影響添加微信的成功率和體驗，導(dǎo)致以后雙方添加為了保險都不敢用微信添加好友而轉(zhuǎn)用 qq 添加好友了。

7. 我的-相冊為何不叫我的朋友圈

朋友圈鼓勵發(fā)相片，發(fā)相片比單純的發(fā)文字的動態(tài)質(zhì)量更高，所以呢，我的-相冊為何不叫我的朋友圈，如果改為了我的朋友圈，則更偏向動態(tài)發(fā)布。

8. 朋友圈為什么不支持分組查看

• 實現(xiàn)朋友圈分組，首先需要對所有微信好友分組，這就需要改變微信添加好友操作邏輯，而且維護分組成本特別高，使用起來是災(zāi)難。
• 大部分用戶查看朋友圈是打發(fā)時間的需求。所以朋友發(fā)的內(nèi)容對于他們來說，越多越好。增加分組功能，反而會降低內(nèi)容的數(shù)量，讓用戶需要很多操作才能看完所有內(nèi)容。
• 對于內(nèi)容過濾的需求，已經(jīng)提供屏蔽某人功能。
• 從內(nèi)容分發(fā)上來說，增加按組來查看內(nèi)容，很容易忽略掉其他分組的朋友產(chǎn)生的高質(zhì)量內(nèi)容。
• 朋友圈分組，會導(dǎo)致很多的好友動態(tài)無法被瀏覽到，影響朋友圈的數(shù)據(jù)，也影響朋友圈的互動性。

9. 為什么群發(fā)僅限200人

很多人有群發(fā)需求，希望可以將所有的好友群發(fā)消息，但是微信只支持200人群發(fā)。

這里也涉及到兩種角色：群發(fā)者和接收者。

現(xiàn)在群發(fā)的使用場景：二維碼宣傳、點贊請求、過年群發(fā)，微商定目標人群發(fā)廣告消息等等，這些對于接收者而言都是騷擾信息。

如果支持不限量群發(fā)，那么接收者的垃圾信息會變多，會被過度干擾。

10. 對話列表為何不能批量刪除

• 如果可以批量刪除，則微信對話的整體活躍會降低，批量的話聊天列表都刪了，后續(xù)和被刪者主動對話概率下降。
• 刪除為謹慎操作，刪除后聊天記錄不在。

總結(jié)

微信的設(shè)計邏輯大體上都分為兩個方面：

• 所有角色整體考慮，在考慮角色 a 的使用需求，同時還要角色 a 的使用需求給角色 b、c 亦或平臺所帶來的影響（這點很重要，也是我們在做設(shè)計的時候很容易忽略的）。
• 整個產(chǎn)品的定位以及平臺生態(tài)考慮，考慮需求或設(shè)計時先全局再局部。

  藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

   

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

列表時間排序到底應(yīng)該正序還是倒序？哪種體驗會更好？各大知名產(chǎn)品都是如何做的？

背景

前陣子正好做到了一個類似“申請通知“的功能，因為涉及到列表，所以要考慮列表的排序規(guī)則，那么問題來了，要用哪種排序規(guī)則（拼音、時間…）？

當(dāng)然，這里肯定會用時間排序，那么按照時間的正序（新的通知在下面）還是倒序（新的通知在上面）？以下將進行一個系統(tǒng)的分析，列表時間排序到底要正序還是倒序？

產(chǎn)品分析

我們可以先看下市場上的產(chǎn)品都是怎么做的，在這里我將這些產(chǎn)品分成了兩類（可能不全，這里不談評論頁面哈）：

1. 消息通知頁面

一般由產(chǎn)品推給用戶，可能是產(chǎn)品運營通知，也可能是其他用戶發(fā)生了一些操作等。

看了很多產(chǎn)品的例子，這里就不全部列出了，幾乎大部分的通知列表都是按照時間倒序，只有網(wǎng)易馬上辦和拼多多是正序。

2.內(nèi)容信息流頁面

內(nèi)容更新相對比較頻繁：

幾乎所有新聞資訊類都是這種類型的列表，采用的都是時間倒序。

微信和釘釘邏輯分析

1.微信

提及微信大家對微信新版本的一大改動肯定非常熟悉了，那就是訂閱號的變化，微信把用戶關(guān)注的所有訂閱號的新消息拿出來放到一個頁面——訂閱號消息，它的排序是倒序，而其他具體的訂閱號內(nèi)部歷史消息是正序，另外新的好友申請消息頁面是倒序。

那么微信的這些模塊為什么排序規(guī)則不一樣呢？背后的原因是什么呢？我個人認為有幾點原因：

1. 首先新的訂閱號類似新聞資訊一樣（可能微信就是想把它打造成這樣，這點我們不展開），所以按照倒序排列也講得通；
2. 具體訂閱號中按照正序排列是因為頁面下面有操作，可以進行文字的輸入，所以這個頁面很像聊天頁面，按照正序也有道理；
3. 騰訊新聞這個功能模塊的排序有點不太理解，明明是新聞類，排序是按照正序，和訂閱號很像，這里我也分析了兩點原因：

1）畢竟微信主體功能是IM，那么其他的模塊都是附屬，不是主要功能，可能騰訊新聞的根本目的就是為了給騰訊新聞APP導(dǎo)流。

2）將其他的模塊做成訂閱號模式在產(chǎn)品層面一致性和復(fù)用性很高，既保證了體驗一致性，又減少了開發(fā)成本。

綜上所述，微信內(nèi)部列表排序規(guī)則是根據(jù)具體場景和功能決定的，其實都可以講得通，不過單純就某些模塊的體驗來講卻是有些勉強。感興趣的話，大家可以看看支付寶，它的內(nèi)部所有的列表高度一致，都是按照倒序，包括它的生活號（和微信的訂閱號很像），這里就不講了。

2.釘釘

釘釘作為一款企業(yè)級IM產(chǎn)品，大家也許并不陌生，它的功能可謂相當(dāng)復(fù)雜，涵蓋了很多模塊，已然做成了一個大的平臺生態(tài)系統(tǒng)，那么是不是因為功能的復(fù)雜導(dǎo)致了內(nèi)部一些列表的排序規(guī)則各不相同呢？

說實話我是有些懵的，比如其他大部分產(chǎn)品的通知都是倒序排列，而釘釘就是正序，那如果說釘釘有自己的產(chǎn)品規(guī)則和邏輯的話，為啥有些類似通知的頁面排序又是倒序？

這個實在講不通，而且場景和功能層面這些列表其實還是比較相近的，那唯一能解釋的可能就是互聯(lián)網(wǎng)界經(jīng)常說的——“這些模塊不是一個團隊做的”。

思考

綜上，大家可以看到，基本大部分產(chǎn)品都是采用時間倒序，也就是的內(nèi)容在上面，也有小部分采用正序，那么為什么會按照這樣的邏輯呢？我進行了幾點分析猜測：

1. 用戶視覺流習(xí)慣從上到下，產(chǎn)品希望用戶能及時關(guān)注新的內(nèi)容，所以按照正序
2. 列表可能有一些操作，如下拉刷新、篩選，的內(nèi)容靠近操作會更自然
3. 列表中若有回復(fù)的功能（微信公眾號），更類似IM聊天頁面，所以正序新的內(nèi)容在下，比較合理
4. 產(chǎn)品內(nèi)部體驗一致性，大部分產(chǎn)品內(nèi)部只采用了一種排序規(guī)則（除釘釘和微信新公眾號），這讓用戶在使用同一款產(chǎn)品時，體驗是一致的，有預(yù)期的。
5. 技術(shù)實現(xiàn)，技術(shù)實現(xiàn)的框架可能產(chǎn)品內(nèi)部采用了同一套方案，所以如果是正序都是正序，是倒序都是倒序。

藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

想做好一個好的UI設(shè)計師除了應(yīng)該具有一定的審美能力，還要了解整個產(chǎn)品的開發(fā)過程，因為目前國內(nèi)的軟件行業(yè)還不能對UI設(shè)計形成應(yīng)有的重視度，所以對我們的要求就更高了，你要能作出奪人眼球的東西，還要站在用戶的角度充分了解他們的需求和使用習(xí)慣，因為一般的軟件公司的UI設(shè)計師只有一個或者幾個也都是孤軍奮戰(zhàn)，而且經(jīng)常會碰見沒有經(jīng)驗的TEAM LEADER,不懂得協(xié)調(diào)你和其他團隊成員的工作，所以你還要與團隊成員充分溝通，來獲得設(shè)計中所需要的基本信息，要有耐心有好脾氣，做界面設(shè)計的工具一般有PS、AI、FH、CD、c4d、（至少一個），Dearweaver、FLASH HEML；編程方面最好能跟程序員同步，懂一點ASP JSP等軟件開發(fā)語言、還有開發(fā)壞境、服務(wù)器種類；還要耐得住寂寞，在漫長的項目開發(fā)過程中，你的工作可能只是前期，到了后面可能會有很多的空間時間，用來學(xué)習(xí)充電是不錯的選擇。

揭開隱喻設(shè)計面紗-界面隱喻類型與隱喻設(shè)計方法

互聯(lián)網(wǎng)er的早讀課 2018-07-14 18:46:25

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

來源：網(wǎng)易UEDC（ID：NetEase_UEDC）

編輯：Juvae

隱喻設(shè)計是一種常用卻很少有人提及的概念，人們往往身在其中卻不知究竟為何物。

簡單說，隱喻設(shè)計它可以將現(xiàn)實生活中用戶熟悉的事物以多種形式映射到界面中，從而使用戶不熟悉的概念、陌生且復(fù)雜的操作等變得熟悉與簡單。

它不等同擬物設(shè)計，隱喻是一個大的概念，界面中充斥著不同的隱喻元素。本文將常見的隱喻元素按照視覺、聽覺、觸覺三種界面交互類型分類，并整理了四種隱喻設(shè)計方法，以供大家參考。

界面隱喻的類型

1. 視覺隱喻 - 靜態(tài)

1.1 文字隱喻

界面中常見的文字隱喻可以分為兩種，一種是功能命名類語言，另一種是產(chǎn)品定義類語言。

常見的功能命名類語言有：“解鎖、導(dǎo)航、登錄”等等。功能命名類語言主要是運用隱喻的方法對界面中經(jīng)常使用的功能進行命名，例如“導(dǎo)航”本義是駕駛某種交通工具從某個地方去往另外一個地方，它可以指引人們路線，設(shè)計師將界面中“依據(jù)地圖行走可以到達目的地”這一功能命名為“導(dǎo)航”,可以和現(xiàn)實生活中人們熟悉的導(dǎo)航本義結(jié)合起來，方便記憶。

常見的產(chǎn)品定義類語言有：應(yīng)用市場中的“市場”、文件助手中的“助手”等等。而產(chǎn)品定義類語言，不僅可以準確表達功能要求，還能傳遞給用戶某種情感。例如，文件助手中的“助手”兩個字本義是可以幫助他人的人，設(shè)計師將手機中的文件夾定義為“文件助手”，意圖是這一功能可以為用戶整理文件排憂解難，給用戶傳遞一種被感動的情感。

1.2 色彩與材質(zhì)隱喻

在界面設(shè)計中也有兩種形式的色彩隱喻。一種為指示性的設(shè)計，運用用戶熟悉的某種顏色指示界面中的某種狀態(tài)，例如QQPC版用綠色icon代表我在線上、紅色icon代表忙碌或請勿打擾。另一種為氣氛的營造，借用色彩帶給用戶的某種心理暗示，為產(chǎn)品營造某種氛圍，例如支付寶軟件整體采用藍色的風(fēng)格，可以營造一種安全的氛圍。

材質(zhì)的隱喻可以使界面不再生硬，用戶使用起來更加親切。例如讀書APP的閱讀界面采用紙質(zhì)效果，使用戶在閱讀時更像是閱讀一本真正的書。

1.3 圖形隱喻

圖形是構(gòu)成界面的重要元素，具有隱喻特征的圖形會讓一些繁瑣并難以理解的操作行為變得輕松且生活化。所以在設(shè)計中，設(shè)計師需要有效地構(gòu)建圖形隱喻從而表達事物的含義與特征。

常用的圖形隱喻非常多，例如界面中鎖可以代表“密碼”，火箭可以代表“加速”，調(diào)色板可以代表“主題”，齒輪可以代表“設(shè)置”，地球可以代表“瀏覽器”，雨傘可以代表“安全”等等。

2. 視覺隱喻 - 動態(tài)

2.1 人的行為習(xí)慣上的隱喻

人的行為習(xí)慣上的隱喻是指界面設(shè)計中的交互方式模擬用戶真實操作生活中的物體時的手勢、動作。例如，界面中的手勢操作：滑動，放大，縮小，旋轉(zhuǎn)，拖動，抓取等；將垃圾文件放置回收站，將商品放入購物車；手機滑動解鎖等等。

2.2 物體物理屬性的隱喻

物體物理屬性上的隱喻是指現(xiàn)實生活中，物體被移動、被操作會表現(xiàn)出一種自然的屬性，設(shè)計師根據(jù)這種屬性進行界面隱喻設(shè)計。常見界面中物體物理屬性的隱喻有：讀書軟件中翻書書頁模擬真實的效果；點擊或觸摸屏幕時視覺水波效果的反饋; 頁面轉(zhuǎn)場的加速度，慣性等物理運動曲線效果等等。

3. 聽覺隱喻

聽覺隱喻元素是指界面系統(tǒng)反饋給用戶的某種能夠準確映射出這種交互行為的隱喻性聲效。例如，將文件放入回收站的音效（當(dāng)將一個文件放入回收站后系統(tǒng)會模擬紙張被撕開，扔入垃圾桶的音效）；當(dāng)用戶讀電子書翻頁時，紙張的摩擦聲的音效；此外還涉及游戲音效：當(dāng)用戶玩游戲植物大戰(zhàn)僵尸游戲的時候存在多種聽覺隱喻元素，種下植物時植物與地面結(jié)合的音效、植物發(fā)射子彈打在僵尸身上的響聲、僵尸來臨時的營造氛圍的恐怖音效、最終失敗時主人公大腦被吃掉時的叫聲，聽覺通道上的隱喻音效讓整個游戲更加真實、生動。

4. 觸覺隱喻

觸覺上的隱喻可以理解為，設(shè)計師模擬真實世界用戶獲得的某種觸覺體感，為界面提供適當(dāng)?shù)姆抡娣答?，從而提高用戶體驗的方法。常見觸覺上的隱喻，例如：iPhone7的home鍵并非實體按鍵，但為了保持用戶的使用習(xí)慣，仿真設(shè)計成實體按鍵的外形并提供用戶實體按鍵的反饋；iPhone的3DTouch可以理解為設(shè)計師為了模擬電腦鼠標的右鍵，為產(chǎn)品提供更多功能的一種移動端快捷方式；此外，在游戲中，撞車時、飛機被擊中時的震動反饋也屬于觸覺上的隱喻形式。

界面隱喻的設(shè)計方法

界面隱喻設(shè)計方法的本質(zhì)是設(shè)計師通過將界面中某元素和現(xiàn)實生活中的某事物聯(lián)系起來，挖掘二者之間相似的屬性，從而使用戶接觸到界面中的此元素時，就能夠認知這個元素所代表的概念或功能等。針對二者之間相似的屬性，具體可以分為概念上的屬性、特征上的屬性、結(jié)構(gòu)上的屬性、行為上的屬性等。

1. 從概念上進行隱喻設(shè)計

例如，現(xiàn)在最普遍的兩大電腦操作系統(tǒng)Mac OS系統(tǒng)與Windows系統(tǒng)的“桌面”界面都是由現(xiàn)實生活中的工作桌面的概念映射而來。

2. 從特征上進行隱喻設(shè)計

例如，設(shè)計師會使用盾牌的圖形來表示安全軟件，因為盾牌與安全管家等軟件同樣具有防護的特征。

3. 從結(jié)構(gòu)上進行隱喻設(shè)計

例如，網(wǎng)易郵箱大師的“郵箱與文件夾”展開結(jié)構(gòu)與現(xiàn)實生活中抽屜被抽開的結(jié)構(gòu)具有一致性。

4. 從行為上進行隱喻設(shè)計

例如，在界面中用戶將某文件拖進回收站這一動作模擬了現(xiàn)實生活中人們將廢紙扔進垃圾桶。

寫在最后

好的隱喻設(shè)計可以簡單地傳達一個功能所代表的意義，或能更加匹配用戶心智模型從而引導(dǎo)用戶進行正確的操作。

本文歸納的隱喻設(shè)計類型和隱喻設(shè)計方法，希望可以對大家提供一些設(shè)計啟發(fā)。

藍藍設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)