2021-1-13 ui設(shè)計(jì)分享達(dá)人
信息組織是我們?cè)谌粘Ｉ钪薪?jīng)常會(huì)遇到的問(wèn)題。各式各樣的信息是如何被組織編排到一起，又是以何種方式把信息呈現(xiàn)給用戶(hù)呢？
全文閱讀約 5 分鐘， 主要分享 Ant Design 在頁(yè)面信息組織策略上的探索思路。
人們是如何組織信息的？
在 Ant Design 的界面設(shè)計(jì)中，會(huì)包含大量的信息組織和編排工作，我們常常會(huì)遇到這樣的問(wèn)題：
· 一個(gè)詳情頁(yè)面里應(yīng)該包含哪些信息？
· 什么樣的信息應(yīng)該放在卡片里，什么樣的信息應(yīng)該平鋪顯示？
· 一個(gè)頁(yè)面內(nèi)的信息該怎么讓用戶(hù)快速找到重點(diǎn)？
· ···
信息組織是我們?cè)谌粘Ｉ钪薪?jīng)常會(huì)遇到的問(wèn)題，商場(chǎng)里的樓層導(dǎo)航、機(jī)場(chǎng)車(chē)站的標(biāo)志指引、餐桌上的菜單、手機(jī)里的通訊錄等等，各式各樣的信息是如何被組織編排到一起，又是以何種方式把信息呈現(xiàn)給用戶(hù)呢？
在解答這些關(guān)于頁(yè)面設(shè)計(jì)的問(wèn)題之前，我想先給大家講一個(gè)生活中的小案例：
動(dòng)線(xiàn)設(shè)計(jì)
逛過(guò)宜家的人，應(yīng)該會(huì)注意到宜家類(lèi)似迷宮的動(dòng)線(xiàn)設(shè)計(jì)，這種動(dòng)線(xiàn)設(shè)計(jì)能夠讓消費(fèi)者不知不覺(jué)逛完商場(chǎng)的各個(gè)角落。踏入宜家門(mén)口時(shí)，就會(huì)被一條隱形“向?qū)А蹦匾龑?dǎo)著向前走：一條曲折宛轉(zhuǎn)的主線(xiàn)依次引導(dǎo)至客廳家具、客廳儲(chǔ)物室、臥室、書(shū)房等各個(gè)主區(qū)域，直到一個(gè)不落地走完才抵達(dá)出口。但在這個(gè)主線(xiàn)之外，為了確保一些消費(fèi)者在購(gòu)物中，能夠快速離開(kāi)或快速去往感興趣的區(qū)域，每個(gè)主區(qū)域間都有一些較隱蔽的捷徑作為輔動(dòng)線(xiàn)。
這種動(dòng)線(xiàn)設(shè)計(jì)一方面能夠把所有商品按照路徑有效的串聯(lián)起來(lái)，另一方面又能讓消費(fèi)者不知不覺(jué)的沿著這個(gè)路徑去了解商品。
商品布局
動(dòng)線(xiàn)布局是宜家的隱形骨架，而真正讓宜家賣(mài)場(chǎng)豐富起來(lái)的，還是琳瑯滿(mǎn)目的商品。宜家的賣(mài)場(chǎng)和大部分零售賣(mài)場(chǎng)不一樣，它不會(huì)把同類(lèi)型產(chǎn)品進(jìn)行大集合，而是根據(jù)人們的正常生活場(chǎng)景來(lái)分類(lèi)，不同類(lèi)型的產(chǎn)品在同一區(qū)域組合陳設(shè)，構(gòu)成生活中的一個(gè)小場(chǎng)景，一方面能達(dá)到對(duì)各個(gè)商品功能的完美詮釋?zhuān)硪环矫?，一個(gè)產(chǎn)品盡量不會(huì)重復(fù)出現(xiàn)，盡可能減少商品展示的復(fù)雜性。
在整體商品布局上，有兩個(gè)很有意思的地方：第一，在居家體驗(yàn)中心，樣板間的陳列順序完全是按照消費(fèi)者回家后的場(chǎng)景而布置：客廳、餐廳、廚房、書(shū)房、臥室、衛(wèi)生間......，第二，在家居用品中心，則會(huì)根據(jù)消費(fèi)者在家的日常起居行為進(jìn)行擺放：做飯、休息、讀書(shū)、收納......
現(xiàn)實(shí)生活中的這些例子，對(duì)我們的界面信息組織有什么啟發(fā)呢？
關(guān)于動(dòng)線(xiàn)和布局的思考
在宜家的案例中，關(guān)于動(dòng)線(xiàn)，映射到人的行為上，有一個(gè)比較專(zhuān)業(yè)的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最優(yōu)體驗(yàn)心理學(xué)》中對(duì)“流”的定義：當(dāng)人們?nèi)硇耐度氲侥硞€(gè)活動(dòng)中時(shí)，會(huì)對(duì)周邊干擾視而不見(jiàn)，這種狀態(tài)被稱(chēng)為“流”。宜家的動(dòng)線(xiàn)設(shè)計(jì)很好的營(yíng)造了這種狀態(tài)，讓消費(fèi)者完全沉浸于商品瀏覽，并且盡量不去打斷這種行為流。
經(jīng)過(guò)研究發(fā)現(xiàn)，構(gòu)成“流”的行為動(dòng)作，其前后必然存在某種連續(xù)性或者關(guān)聯(lián)性，例如回家的行為動(dòng)線(xiàn)，日常起居的行為關(guān)聯(lián)等。這個(gè)概念在界面設(shè)計(jì)中依然適用，很多界面設(shè)計(jì)都在有意無(wú)意的去創(chuàng)造“流”的狀態(tài)，帶給你用戶(hù)沉浸式體驗(yàn)，例如各類(lèi)短視頻應(yīng)用會(huì)根據(jù)用戶(hù)瀏覽習(xí)慣推薦相關(guān)聯(lián)的視頻內(nèi)容，讓用戶(hù)沉浸其中無(wú)法自拔。
關(guān)于商品布局，映射到信息組織上，《韋氏大詞典》 中提到一個(gè)詞“編配”（orchestration），對(duì)應(yīng)的解釋為“和諧的組織”。這個(gè)詞能比較好的表達(dá)信息組織的含義，宜家的商品和諧的組織構(gòu)成一個(gè)場(chǎng)景，它向消費(fèi)者傳遞的不僅僅是商品本身的功用性，更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費(fèi)者對(duì)信息篩選的復(fù)雜程度。而在界面設(shè)計(jì)上，表單頁(yè)的和諧組織能夠幫助用戶(hù)快速完成信息錄入，詳情頁(yè)的和諧組織能夠幫助用戶(hù)快速理解一個(gè)描述對(duì)象......
各種各樣的信息總能以某種關(guān)系組織到一起，而如何根據(jù)這種流為用戶(hù)去組織和呈現(xiàn)信息呢？
“流”的本質(zhì)其實(shí)是一系列具有關(guān)聯(lián)性的行為動(dòng)作串聯(lián)，而“編配”的目的則是為了降低串聯(lián)信息呈現(xiàn)的復(fù)雜程度。有了這兩個(gè)基礎(chǔ)的概念之后，我們可以做一個(gè)初步假定：所有的信息是否都可以通過(guò)關(guān)聯(lián)性和復(fù)雜度來(lái)進(jìn)行組織編排？針對(duì)著這兩個(gè)維度，我們又進(jìn)行了更深層次的研究和驗(yàn)證，并得到基本定義：
· 信息復(fù)雜度：信息量的大小，包括種類(lèi)、數(shù)量等。
· 信息關(guān)聯(lián)性：信息之間的潛在關(guān)聯(lián)或者相互影響。
我們?cè)O(shè)想，這兩個(gè)維度能否運(yùn)用到界面設(shè)計(jì)上的信息組織呢？
頁(yè)面信息的組織方式
信息關(guān)聯(lián)性
界面信息之間的潛在關(guān)聯(lián)或者相互影響，通常體現(xiàn)在「邏輯關(guān)聯(lián)」和「視覺(jué)關(guān)聯(lián)」兩個(gè)層面。
邏輯關(guān)聯(lián)
顧名思義是指一個(gè)事件中的所有信息之間的關(guān)系，在界面設(shè)計(jì)中，無(wú)論什么樣的信息，總能以某種方式進(jìn)行分類(lèi)和編排在一起，例如手機(jī)通訊錄中的人名，可以按照字母順序從 a 到 z 進(jìn)行排列，電商網(wǎng)站的商品導(dǎo)航會(huì)根據(jù)類(lèi)別進(jìn)行分組，待辦事項(xiàng)可以根據(jù)時(shí)間進(jìn)行排序等。
如何找出信息之間的邏輯關(guān)聯(lián)性呢？
被稱(chēng)之為信息架構(gòu)之父的 Richard saul wurman 在《信息焦慮》一書(shū)中將信息組織方式用“五頂帽架”來(lái)概括：
· 地點(diǎn)（Location）
· 字母（Alphabet）
· 時(shí)間（Time）
· 類(lèi)別（Category）
· 層級(jí)（Hierarchy）
簡(jiǎn)稱(chēng)LATCH。這五種方式基本可以涵蓋所有的信息組織策略，信息是無(wú)限的，但是信息組織方式卻是有限的。
視覺(jué)關(guān)聯(lián)
任何一個(gè)界面呈現(xiàn)給用戶(hù)的時(shí)候，用戶(hù)都會(huì)下意識(shí)的去判斷界面上什么信息是最重要的，接著會(huì)去關(guān)注這些信息都有什么關(guān)聯(lián)，因此，除了按照邏輯去組織信息之外，還應(yīng)該合理的去呈現(xiàn)信息的視覺(jué)層級(jí)關(guān)系。
視覺(jué)層級(jí)關(guān)系有幾種常見(jiàn)的區(qū)分方式：
· 強(qiáng)調(diào)：使用基本視覺(jué)元素（顏色、形狀、大小等）區(qū)分層級(jí)
· 親密性：位置接近的元素通常是有關(guān)系的，而且位置越近，關(guān)系越強(qiáng)
· 圖勝于言：視覺(jué)符號(hào)和對(duì)象關(guān)聯(lián)，例如：齒輪或扳手=設(shè)置，垃圾桶=刪除
· 瀏覽順序：根據(jù)瀏覽順序，從左到右（部分地區(qū)）或從上到下信息重要程度依次減弱
· ···
如何驗(yàn)證界面元素的視覺(jué)關(guān)聯(lián)性是否合理呢？
瞇眼測(cè)試
《About Face 4: 交互設(shè)計(jì)精髓》 中提到了一個(gè)很有意思的測(cè)試，為了確保界面視覺(jué)信息有效的拉開(kāi)層次關(guān)系，圖形設(shè)計(jì)師經(jīng)常會(huì)用到一個(gè)方法“瞇眼測(cè)試”（squint test）。閉上一只眼睛，瞇著另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成組，哪些元素看上去零散。從多個(gè)角度去觀(guān)察，總能夠發(fā)現(xiàn)之前沒(méi)有注意到的布局和構(gòu)成問(wèn)題。
信息復(fù)雜度
通常以信息量的大小或樣式多少來(lái)衡量，這兩個(gè)維度實(shí)際決定了信息的瀏覽時(shí)長(zhǎng)。例如一個(gè)詳情頁(yè)面內(nèi)都是純文本信息，但是信息量較大（超過(guò)三屏），則認(rèn)為這個(gè)頁(yè)面的復(fù)雜度較高，或者一個(gè)詳情頁(yè)面內(nèi)同時(shí)包括文本、表格、代碼展示、圖表等元素，也會(huì)認(rèn)為這個(gè)頁(yè)面的復(fù)雜度較高。
信息的復(fù)雜度和關(guān)聯(lián)性并不是兩個(gè)完全獨(dú)立的維度，根據(jù)關(guān)聯(lián)性去組織信息，本身就是為了降低信息呈現(xiàn)出的復(fù)雜程度。而對(duì)復(fù)雜度的研究，可以幫助我們?nèi)绾芜x擇合適的方式把信息呈現(xiàn)給用戶(hù)。
頁(yè)面信息組織實(shí)踐 - 詳情頁(yè)設(shè)計(jì)
具體到界面設(shè)計(jì)層面，信息體量大、復(fù)雜度高常常是中后臺(tái)界面設(shè)計(jì)的難題之一。以詳情頁(yè)為例，詳情頁(yè)內(nèi)的信息該如何合理的組織信息并有效的傳達(dá)給用戶(hù)呢？
根據(jù)關(guān)聯(lián)性和復(fù)雜度的概念，我們抽象出一個(gè)簡(jiǎn)單的「復(fù)雜度模型」，用來(lái)判斷信息復(fù)雜程度和關(guān)聯(lián)性對(duì)頁(yè)面結(jié)構(gòu)的影響。
橫坐標(biāo)表示頁(yè)面信息之間的關(guān)聯(lián)性，縱坐標(biāo)表示信息的復(fù)雜程度，兩者交叉組成的色塊代表不同的信息等級(jí)?？拷c(diǎn)最淺的色塊，代表復(fù)雜程度低且關(guān)聯(lián)性強(qiáng)的內(nèi)容，例如一段純文本的產(chǎn)品描述信息；遠(yuǎn)離原點(diǎn)顏色最深的色塊，代表復(fù)雜程度高且相互獨(dú)立的信息，例如一個(gè)發(fā)布流程中的集成測(cè)、預(yù)發(fā)環(huán)境測(cè)試、灰度測(cè)試、上線(xiàn)等各個(gè)階段信息展示。
與之對(duì)應(yīng)的，我們對(duì)信息展示方式也進(jìn)行了維度劃分，用來(lái)解決在復(fù)雜的企業(yè)級(jí)產(chǎn)品界面設(shè)計(jì)中，何時(shí)使用卡片區(qū)分，何時(shí)拆分為 tab 等布局問(wèn)題。
根據(jù)承載信息復(fù)雜程度的不同，我們對(duì)容器組件也進(jìn)行復(fù)雜度劃分，用來(lái)解決在不同頁(yè)面布局中，不同類(lèi)型的信息用何種方式呈現(xiàn)的問(wèn)題。
這個(gè)模型可以幫助設(shè)計(jì)者在決策布局組件時(shí)，有章可循。最終讓用戶(hù)感知，當(dāng)用戶(hù)來(lái)到一個(gè)頁(yè)面時(shí)，即可對(duì)頁(yè)面的信息量、信息的搜尋方式有統(tǒng)一的預(yù)期。我們嘗試將復(fù)雜度和關(guān)聯(lián)性模型在界面布局中落地：
關(guān)于以上的模型在實(shí)際設(shè)計(jì)中該如何操作，這里提供一個(gè)推薦步驟可以參考：
· 「復(fù)雜度判斷」明確設(shè)計(jì)對(duì)象信息量的大小
· 「關(guān)聯(lián)性判斷」判斷各個(gè)信息之間的關(guān)聯(lián)性，并合理分組
· 「組件選擇」選擇合適的容器組件來(lái)呈現(xiàn)信息
· 「模板選擇」選擇合適的頁(yè)面模板，組織編排信息
· 「瞇眼測(cè)試」檢查整體布局是否合理（僅參考）
文章來(lái)源：站酷 作者：Ant_Design
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com