B端產(chǎn)品如何進(jìn)行頁面設(shè)計?

0 評論 9999 瀏覽 86 收藏 34 分鐘

在日常工作中的設(shè)計工作中,常常拿到產(chǎn)品的原型圖不知道如何下手,業(yè)務(wù)與流程都基本沒問題,真正到了頁面設(shè)計時就會卡住。那么,B端產(chǎn)品如何進(jìn)行頁面設(shè)計?作者總結(jié)了一些思路,希望對你有所啟發(fā)。

前言

在日常的設(shè)計工作中,拿到產(chǎn)品給的原型或者需求清單,分析完用戶和任務(wù)流程后不知道該如何下手,或者不知道如何系統(tǒng)地開展設(shè)計工作,再或者不知道如何做出符合用戶和業(yè)務(wù)目標(biāo)的設(shè)計方案。

有的時候流程和業(yè)務(wù)都不在話下,但是到了具體的頁面設(shè)計就會捉襟見肘。如何引導(dǎo)用戶在頁面中迅速的完成任務(wù)流程,我們看一下是不是有套路可走。

在一二線城市,相信很多人都去過宜家,有媒體統(tǒng)計過:宜家的迷宮式動線設(shè)計創(chuàng)造了60%的沖動購物。宜家的動線設(shè)計將用戶與各類商品區(qū)進(jìn)行了有效的串聯(lián),在刻意設(shè)計的路線上,商家填滿了各類家用商品,用戶在從入口到出口的路上,使高沖動購物率成為了可能。從動線展示圖中我們可以看到,一條“清晰明了”的曲線引導(dǎo)用戶前進(jìn),同時還會提供一些捷徑供用戶穿梭,這像極了頁面中的友好鏈接,幫助快速抵達(dá)目的地。

在整個宜家商場的設(shè)計中我們可以看到,這條清晰明了但實際不存在的線帶給了商家巨大的收益,這個設(shè)計表達(dá)中,離不開實際存在的懸掛路標(biāo)、小地圖、地面標(biāo)識、醒目的商品名稱、價簽和特意設(shè)計的商品堆積,當(dāng)然還有一些消費者手冊等。

這與我們的頁面設(shè)計有著異曲同工之妙,將商場的商品陳設(shè)和頁面中的信息組織放在一起我們可以發(fā)現(xiàn),都在向消費者或用戶傳遞一種建議和方向。所以,在頁面設(shè)計我更愿意稱之為頁面框架或者頁面信息設(shè)計,就是將該頁面的內(nèi)容信息通過一定的框架組織起來,然后呈現(xiàn)出來,實際上就是在與用戶溝通交流,使得頁面易學(xué)易用。

有一個成語是“明修棧道,暗渡陳倉”,而我們要做的是“暗修棧道,明渡陳倉”,所謂的棧道就是設(shè)計師所搭建的頁面框架。經(jīng)過設(shè)計師的合理分析和設(shè)計,使用看不見的設(shè)計手段和看得見的表現(xiàn)方式,給予用戶明確的“提示”,幫助用戶迅速的完成任務(wù)。

一、如何做進(jìn)行頁面框架設(shè)計

前面對頁面框架設(shè)計有了一定的了解,那么怎樣才能設(shè)計出好的頁面,應(yīng)該運用什么方法,采用什么流程。

在《信息架構(gòu)-超越Web設(shè)計》一書中,作者將“如何做”闡述為:設(shè)計相應(yīng)的信息顆粒度和組合方式,為用戶創(chuàng)造他們所熟悉的環(huán)境。根據(jù)日常的工作經(jīng)歷,將“如何做”這個過程分成了以下四個步驟。

1. 了解業(yè)務(wù)

在著手進(jìn)行整體頁面設(shè)計之前,必要的設(shè)計工作就是進(jìn)行切實的業(yè)務(wù)分析,了解我們要做什么,為了什么做。

在辛向陽的交互設(shè)計五要素中強(qiáng)調(diào)了,交互設(shè)計的對象是行為,他們之間的聯(lián)系可以概括為:用戶在某個場景下通過某種媒介產(chǎn)生行為,最后達(dá)成了他的目標(biāo)。

那么如何讓用戶產(chǎn)生更有利于目標(biāo)實現(xiàn)的行為,在設(shè)計之前先了解一下這些業(yè)務(wù)要素。

1.1 用戶

簡單來說就是使用我們平臺的人。在一些B端產(chǎn)品中用戶會分很多的角色,比如管理角色和普通角色,每個角色的訴求也是不一樣的。

管理者:我希望能夠看到團(tuán)隊中所有人的工作進(jìn)度。

普通員工:我希望能快速的完成自己的任務(wù)。

這兩種角色的訴求都是用戶需求,分析階段需要做好用戶分層,在后面的目標(biāo)拆解中就可以獲得更明確的方向。

1.2 場景

對于用戶提出的反饋或者意見,要切實考慮應(yīng)用場景,辨別用戶提供的是需求還是方案。

比如上個月用戶提到一個需求,希望在某某頁面中,復(fù)制粘貼就可以上傳圖片,某某平臺就是這么做的。接到這個反饋,我的第一反應(yīng)就是你在“教我做設(shè)計?”(開玩笑??),首先他的這個方案我們目前是不具備的,然后這個設(shè)計確實很方便,但是目前團(tuán)隊沒有時間做這個。找到特定的用戶聊過之后,他表示當(dāng)前只能點擊或者拖拽上傳,截圖的文件需要本地保存后才能上傳,很不方便。我向她提供了我們目前平臺要實施的方案:

  • 可以直接在描述的富文本中編輯保存;
  • 可以在下個迭代將要實現(xiàn)的備注中直接粘貼上傳附件。聽了我的解釋后,他表示這兩個方案都可以,不需要頁面的隨意上傳了。所以在真實的項目中,要找到真實的需求場景,而不是被用戶牽著鼻子走。

具體如何去了解我們的用戶場景,除了業(yè)務(wù)或者產(chǎn)品經(jīng)理的闡述和解釋,另外我們在前期進(jìn)行競品分析的時候也是不錯的時機(jī),因為在相似業(yè)務(wù)場景中,不同平臺之間的表現(xiàn)方式不會出現(xiàn)太大差異,相當(dāng)于設(shè)計思考前置,由方案倒推了需求。不過還是建議以具體業(yè)務(wù)具體分析為主,畢竟每個公司的工作方式是不同的。

1.3 目標(biāo)

對于設(shè)計師而言,目標(biāo)就是這次設(shè)計的目的是什么、解決什么問題、創(chuàng)造什么價值,利用某些設(shè)計策略手段,對未來一段時間內(nèi)所要達(dá)成的預(yù)期結(jié)果。設(shè)計的目標(biāo)是要依附于業(yè)務(wù),忠實于用戶。一個平臺的每次升級側(cè)重點不一樣,但是業(yè)務(wù)和體驗是要同時考慮到的。

業(yè)務(wù)提出了今年我們要在去年的基礎(chǔ)上,提升用戶滿意度15%

那么設(shè)計就應(yīng)該去分析低滿意度背后的原因是什么,用戶為什么打了低分,這可能會涉及到任務(wù)流程、頁面布局、組件使用等問題。

當(dāng)我們確定好影響滿意度的因素之后,可以對其中一個因素提出設(shè)計目標(biāo):縮短用戶完成某個任務(wù)的時間20%,以此來聚焦用戶操作流程的低效問題。

設(shè)計目標(biāo)是在了解業(yè)務(wù)和用戶之后所得到的一個共贏產(chǎn)物,也是將抽象的業(yè)務(wù)信息轉(zhuǎn)化為具體的設(shè)計要素的過程。

1.4 媒介

用戶產(chǎn)生交互行為的最大媒介就是我們的頁面,細(xì)化一下顆粒度,就會落到我們每一個頁面組件上面。而組件并非是簡單的平鋪,而是要做的設(shè)計目標(biāo)的指導(dǎo)下,選擇合適的組件和表現(xiàn)方式,使用戶看到頁面時,快速的產(chǎn)生恰當(dāng)?shù)男袨椤?/p>

1.5 行為

在界面中中用戶主要的操作動作無外乎:點擊、懸浮、滑動、拖拽,應(yīng)考慮怎樣的觸發(fā)形式能使用戶最低成本、最順暢地完成行為。當(dāng)然行為并不是孤立存在的,它需要多個動作和媒介,以及視覺行動等共同構(gòu)成。而如何讓用戶產(chǎn)生恰當(dāng)?shù)男袨椋枰δ苄畔@性化的設(shè)計。

2. 組織信息

組織信息是頁面設(shè)計的重要組成部分,我們看到的頁面信息都是整齊的,每個整齊的背后又暗含了特殊的組織關(guān)系。對于業(yè)務(wù)分析或者需求文檔所得到的業(yè)務(wù)信息需要設(shè)計師進(jìn)行下一步的精加工,首先要了解當(dāng)前所處頁面的主要功能是什么,其次是明確功能信息并進(jìn)行相應(yīng)的分析,獲得可以搬運羅列的功能塊。

《佐藤可士和的超整理術(shù)》對信息組織的策略有著非常專業(yè)的建議,作者從中提煉出以下處理方式。

2.1 明確信息

通過業(yè)務(wù)了解,明確當(dāng)前頁面將要進(jìn)行哪些操作或者應(yīng)該具備哪些功能點。

以上圖所展示的簡單需求為例。從當(dāng)前頁面中我們可以看到,這是一個任務(wù)管理的模塊頁面。在任務(wù)管理中,要支持用戶創(chuàng)建三類任務(wù),創(chuàng)建結(jié)束后還要支持信息的瀏覽、查找和編輯。而這些信息的來源就是上面我們分析的業(yè)務(wù)場景,這只是經(jīng)過整理之后的。

2.2 羅列信息

明確了業(yè)務(wù)信息之后,相對應(yīng)的我們要將我們頁面布局所需要的核心元素剝離出來,比如創(chuàng)建數(shù)據(jù),就可以剝離成一個創(chuàng)建按鈕。

對于剛才的信息我們可以簡單的羅列如下:

創(chuàng)建A、創(chuàng)建B、創(chuàng)建C、修改、刪除、標(biāo)題、篩選狀態(tài)、關(guān)鍵詞篩選、數(shù)據(jù)列表

2.3 導(dǎo)入觀點,確定關(guān)系

確定信息元素之間的關(guān)系是為了在頁面中更好的劃分和取用,方便在后面頁面布局中給相關(guān)信息找到恰當(dāng)?shù)奈恢谩?/p>

以剛才的需求為例,在羅列的過程中大概也能找到信息之間的關(guān)系。可以分為三類:操作、篩選和數(shù)據(jù)展示。

如果我們對個別的信息再進(jìn)行賦予觀點,還能出現(xiàn)新的關(guān)系。如果從業(yè)務(wù)使用頻率進(jìn)行觀點導(dǎo)入,那么任務(wù)A、B、C的使用頻率依次降低,最后可以確定的優(yōu)先級關(guān)系就是創(chuàng)建A>B>C。在任務(wù)頁面中,創(chuàng)建類的操作優(yōu)先級要明顯高于編輯類,所以“創(chuàng)建”>“編輯”。操作和篩選作為數(shù)據(jù)產(chǎn)生和查找的工具,需要放在更顯眼的位置以更容易被發(fā)現(xiàn)。

以上是對展示頁面的簡單信息進(jìn)行的處理,對于一些表單頁面我們也可以采用相應(yīng)的策略。通過信息的屬性維度可以大體分類,如果信息量很大,那么信息的層級關(guān)系就會展現(xiàn)出來,方便頁面布局中采取相對應(yīng)的設(shè)計方式。針對信息的關(guān)系,我們可以確定信息的先后順序、頁面位置以及顏色等樣式的使用。

當(dāng)然組織信息的最后產(chǎn)物還是虛擬的,我們輸出的信息關(guān)系無外乎,比如信息組、信息架構(gòu)、優(yōu)先級等。組織信息是繼了解業(yè)務(wù)之后的信息處理和清洗的步驟,也是業(yè)務(wù)場景以及設(shè)計目標(biāo)的應(yīng)用,可以為后面頁面布局提供更有針對性的建議。

另外,我們還可以了解一些常規(guī)的信息組織方式。

2.4 常見的組織方式

常見的組織方式可以分為精確分類模糊分類

精確分類將信息分成定義明確和互斥的區(qū)域,采取的是客觀態(tài)度。如果用戶通過已知的明確信息,可以迅速的找到相應(yīng)的位置,并且這種分類方式好維護(hù)。字母順序、時間順序、地理位置等都屬于精確分類。

比如App中的城市選擇,就是采取的字母分類,用戶可以根據(jù)目標(biāo)城市的首字母,迅速定位到相應(yīng)的位置。

模糊分類將信息分成不精確定義的種類,采取的是主觀態(tài)度。受困于人的主觀性和分類標(biāo)準(zhǔn)的模糊性,因此很難設(shè)計和維護(hù)。但是在一些場景中,模糊分類卻更重要和有用。主題、任務(wù)、受眾、隱喻導(dǎo)向等屬于模糊分類。上面操作按鈕的分類就是采用了任務(wù)導(dǎo)向,將按鈕分成了創(chuàng)建和編輯兩個部分。

京東商城的左側(cè)商品分類采用的就是模糊分類。

混合方案是在B端產(chǎn)品中常見的方式,能靈活的處理頁面信息,應(yīng)對不同用戶和信息的場景差異。在Ant design的典型頁面中,左側(cè)菜單采用了模糊分類(主題),而表格信息采用的是精準(zhǔn)分類(時間倒序)。

3. 組件選擇

組件的選擇是信息可視化的第一步,是為信息尋找相應(yīng)容器載體的過程。

3.1 導(dǎo)航

導(dǎo)航存在的作用是任何告知用戶他在哪里,他能去什么地方以及如何到達(dá)那里的方式。常見的導(dǎo)航可分為:

全局導(dǎo)航:屬于常駐導(dǎo)航,基本平臺的每個頁面會存在,常見的組件形式有側(cè)邊、頂部、彈出式、下拉等。

頁內(nèi)導(dǎo)航:根據(jù)當(dāng)前業(yè)務(wù)場景所配置的導(dǎo)航,常見的組件有頁頭、Tree 樹型控件、錨點、回到頂部、走馬燈等。

返回導(dǎo)航:常見的組件有面包屑、返回按鈕等。

友好導(dǎo)航:不在該模塊的信息架構(gòu)規(guī)范內(nèi),用戶可以通過點擊跳到其他頁面查看,比如操作日志中的超鏈接。

其他導(dǎo)航:常見的有步驟條、分頁器等。

3.2 標(biāo)簽

標(biāo)簽通常是向用戶顯示組織系統(tǒng)和導(dǎo)航系統(tǒng)最明顯的方式,例如全站導(dǎo)航系統(tǒng)相匹配的文字標(biāo)簽:主頁、搜索等。

標(biāo)簽分文字標(biāo)簽和圖形標(biāo)簽:

文字標(biāo)簽涉及到頁面中所有功能的文案命名,例如標(biāo)題、導(dǎo)航、按鈕、鏈接、索引詞、提示等,這是用戶理解信息最直接的方式,所以文字標(biāo)簽的選擇要常見并且易于理解,選擇行業(yè)中的通用用法。比如在協(xié)同工具的領(lǐng)域,一些最主要業(yè)務(wù)單元的命名,無外乎項目、需求、任務(wù)、缺陷、迭代等,即使是新出現(xiàn)的平臺,也會默認(rèn)去遵循這個行業(yè)命名。因為在業(yè)務(wù)的發(fā)展過程中,這些標(biāo)簽已經(jīng)成為了協(xié)同領(lǐng)域中相互共識的點,如果為了強(qiáng)差異化,反而會增加用戶教育的成本,降低平臺的使用效率。

圖形標(biāo)簽在頁面設(shè)計中,作為文字標(biāo)簽的補(bǔ)充,會更形象的傳達(dá)信息。主要應(yīng)用的地方的是圖標(biāo)。圖形的使用也是要易于理解,不要讓形式凌駕于功能之上,不能給用戶帶來思考成本。在Iconfont上搜索“返回”,檢索的結(jié)果都是相似的箭頭,即使有設(shè)計師會做一些樣式調(diào)整,但是都離不開箭頭這個符號,因為這已經(jīng)形成了深刻的用戶心智。

還有圖文類的軟件,我們可以看到他們上面展示的文字和標(biāo)簽都是相似的,大家都在做一些微調(diào),但是都在遵循最初Office給用戶形成的符號認(rèn)知。所以針對新的平臺產(chǎn)品,除了調(diào)研用戶對標(biāo)簽的使用習(xí)慣之外,還可以參考競品的使用現(xiàn)狀,這屬于行業(yè)的隱形共享資源。

3.3 搜索

搜索系統(tǒng)是用戶快速尋找信息的工具,搜索系統(tǒng)的使用要根據(jù)頁面信息的內(nèi)容量和場景要求進(jìn)行配置選擇。

常見的組件可以分為:

  • 輸入類篩選:輸入類篩選需要用戶輸入一定的文本關(guān)鍵詞,篩選出對應(yīng)的數(shù)據(jù);
  • 選擇類篩選:選擇器類篩選可以是單選或者多選,用戶點擊選擇待選項即可;
  • 平鋪類篩選:平鋪類篩選是將所有的待選項鋪出來,方便用戶直觀選擇;
  • 分頁篩選:分頁Tabs類似于平鋪類篩選,都是將待選項平鋪出來;
  • 高級篩選:高級篩選的判斷關(guān)系較多,一般會包括篩選條件、篩選關(guān)系(且、或)、篩選類型(包含、不包含、等于、不等于等)、篩選值和添加。

以上是闡述了對頁面結(jié)構(gòu)設(shè)計影響較大的三類組件,像按鈕、選擇器等顆粒度的組件,可以到大廠的設(shè)計網(wǎng)站查看詳細(xì)的使用說明,這里不再描述。

4. 頁面布局

頁面布局是頁面設(shè)計的最后一步,是功能信息布局的關(guān)鍵,是為用戶搭建易于發(fā)現(xiàn)的流程節(jié)點。

4.1 選載體

首先根據(jù)當(dāng)前的業(yè)務(wù)的場景特點,先選擇信息的承載方式。

目前有三種方式:頁面、對話框、抽屜。

  1. 頁面:信息承載量最大,適合信息瀏覽、數(shù)量級較大的創(chuàng)建和展示;
  2. 對話框:信息承載量小于頁面,流程中斷性較強(qiáng),適合輕量級的信息創(chuàng)建、處理和展示;
  3. 抽屜:信息承載量大于對話框,小于頁面,流程中斷性較弱。

在具體的使用過程中:

  • 如果信息量較大,有組合方式比較復(fù)雜的信息創(chuàng)建和展示,考慮使用頁面;
  • 如果信息與觸發(fā)頁面有較強(qiáng)的關(guān)聯(lián)性,考慮使用抽屜;
  • 如果信息與觸發(fā)頁面有較弱的關(guān)聯(lián)性,需要聚焦當(dāng)前任務(wù),考慮使用對話框或頁面。

4.2 分區(qū)域

在確定好使用的承載方式之后,要對基本的大塊信息區(qū)域進(jìn)行劃分。

首頁要確定的是導(dǎo)航的位置,導(dǎo)航代表了用戶當(dāng)前所處的位置和能去的位置。因此要放在非常顯眼且穩(wěn)定的地方。

以一開始展示的需求頁面為例,根據(jù)F型視覺動線理論頂部和左側(cè)用戶關(guān)注點較多和穩(wěn)定性較強(qiáng)的地方。在大廠的典型頁面中我們也可以看到相應(yīng)的實踐。頂部和左側(cè)相比,擴(kuò)展性較弱,為方便后面業(yè)務(wù)擴(kuò)展,將導(dǎo)航區(qū)域選在了左側(cè)。

其次是操作、篩選和數(shù)據(jù)展示區(qū),根據(jù)前面組織信息的結(jié)論,操作和篩選要放在比數(shù)據(jù)展示更容易發(fā)現(xiàn)的固定位置,根據(jù)F模型,放在信息展示區(qū)的頂部。這樣基本的頁面區(qū)域就劃分好了:導(dǎo)航區(qū)、操作篩選區(qū)、數(shù)據(jù)展示區(qū)。

按照本文的闡述,選載體和分區(qū)域略顯啰嗦,在實際的工作中,往往導(dǎo)航等框架組件的選擇與分區(qū)域同時進(jìn)行,所以,我們一般可以從以下方面迅速開始:

  • 如果是老平臺,只是做部分功能擴(kuò)展,需要按照原來的頁面框架設(shè)計進(jìn)行新的功能設(shè)計,保持界面的一致性。
  • 如果是新的頁面,可以參考競品的頁面,因為他們的處理方式已經(jīng)經(jīng)過市場和用戶的檢驗,具有一定的可靠性。
  • 參考各大廠規(guī)范的典型頁面,這些頁面是他們內(nèi)部設(shè)計師經(jīng)過多次討論才上線對外,應(yīng)用場景上具有一定的廣泛性和通用性,并且用戶對這類頁面可能會更熟悉。

4.3 調(diào)布局

在劃分好區(qū)域之后,需要對頁面中的組件布局進(jìn)行調(diào)整。比如前面的我們所確定的按鈕關(guān)系,在頁面中,為創(chuàng)建類和編輯類的按鈕分別選擇了填充和線框按鈕,當(dāng)前按鈕數(shù)量太多,頁面空間受限,可以對按鈕進(jìn)行組織收起,根據(jù)使用頻率高低進(jìn)行相應(yīng)的排序。同時篩選和操作是兩類信息且優(yōu)先級有差異,可以區(qū)分更明顯一些,同時頁面中的右側(cè)有視覺空白,可以將篩選類組件右對齊。

在B端產(chǎn)品中常見的表單頁面中,根據(jù)Ant design的復(fù)雜度模型,從頁面信息的復(fù)雜度和關(guān)聯(lián)性維度上,對相應(yīng)的組合容器進(jìn)行劃分,方便設(shè)計師準(zhǔn)確匹配,快速呈現(xiàn)出用戶更容易理解和查找的內(nèi)容模塊布局。其中步驟分組一般用在創(chuàng)建頁面,Tab分組一般用在展示頁面。

在具體的組件布局中,還需要考慮組件的對齊方式、尺寸、位置等,這些都需要根據(jù)當(dāng)前的業(yè)務(wù)特點、頁面空間大小、瀏覽效率等進(jìn)行實際判斷決策。如果說頁面空間有限,但是業(yè)務(wù)字段又非常多,在很多的后臺軟件中,我們會發(fā)現(xiàn)做左對齊的方式比較常見,因為在一屏內(nèi)它的信息承載量是最大的,屏效比最高。

4.4 建議

4.4.1 設(shè)計理論的應(yīng)用

設(shè)計理論和原則是前人在實踐的基礎(chǔ)上總結(jié)出來的規(guī)律和方法,雖然設(shè)計趨勢會發(fā)生變化,但是信息的傳遞原理短期內(nèi)是相對穩(wěn)定的。通過理論的應(yīng)用,引導(dǎo)用戶關(guān)注頁面架構(gòu)的焦點,就可以達(dá)到信息傳遞的目的。

a、視覺動線理論

F型視覺動線模型是尼爾森于2006年提出的,模型中指出,用戶常用習(xí)慣方式是:掃描。在信息瀏覽過程中,遵循最省力的路徑來瀏覽內(nèi)容,直至找到想要的信息,因此前幾行左側(cè)內(nèi)容看得多,而右側(cè)內(nèi)容和頁面靠后部分便看得少,通常情況下便形成大體的F型。

Z型視覺動線模型也是尼爾森對用戶的瀏覽習(xí)慣進(jìn)行研究后得出的結(jié)論,一般會用在門戶類、文字類網(wǎng)站,Z布局應(yīng)用很簡單,將重要的信息元素放到Z形上面,用戶掃描過程中會沿著這條路徑獲取信息。但是Z形也有弱點,用戶很容易會受其他顯眼的元素吸引,所以在布局的時候,要控制好這些元素。

b、交互設(shè)計四策略

刪除:

將產(chǎn)品中可有可無或者沒有使用頻率的功能刪除,使用戶能聚焦在核心流程上,減少信息干擾和產(chǎn)品維護(hù)成本。在具體的設(shè)計中,還包括不必要的裝飾元素,比如分割,空間分割和線分割保留一種方式即可,疊加使用反而耗費產(chǎn)品的簡潔感,給用戶增加視覺負(fù)擔(dān)。

分類:

面對種類和數(shù)量眾多的功能,為了能讓用戶更迅速的定位到目的位置,可以將信息分類組織,使頁面更清晰。剛才上面的操作關(guān)系就是分類的一種,面對一一擺開的按鈕,用戶難免會有選擇延遲,快速定位后可以有效加快選擇。還有產(chǎn)品中的一些狀態(tài)、標(biāo)簽、顏色等,合理的分類組織,設(shè)定邊界,再次復(fù)用可保持產(chǎn)品的一致性。

隱藏:

將高頻的功能和信息適時適地的展示,其他的則進(jìn)行合理隱藏,也是為了頁面聚焦,減少視覺負(fù)擔(dān),保持頁面簡潔。像表格中的操作按鈕,一般情況下都會將用戶將會使用的兩個高頻按鈕放在外面,其他的放在更多中;另外,按鈕的使用還有一定的引導(dǎo)性,比如從平臺角度講,希望用戶的數(shù)據(jù)越來越多,所以不是很希望用戶刪除或注銷,所以這類按鈕都會放在架構(gòu)設(shè)計的末端。

轉(zhuǎn)移:

一般情況下是將復(fù)雜進(jìn)行轉(zhuǎn)移,將用戶的重復(fù)或復(fù)雜操作,交給后臺處理,增加任務(wù)處理效率。

c、格式塔心理學(xué)

格式塔心理學(xué)源于視知覺,通過對視覺元素形式、圖形的研究,幫助人們產(chǎn)生某種視覺傾向,從而快速的辨別。

在這里主要說一下這四個原則:

接近性原則:在人們的視覺感受中,會習(xí)慣于將彼此接近的元素看成一個整體。元素之間的距離越小,說明彼此的關(guān)系越近,當(dāng)然,這個原則也是反過來用,如果想讓人感受到兩個元素不是一個整體或類別,那么把他們的距離拉大即可。

購物APP的卡片瀏覽模式,圖片下的標(biāo)簽與圖片的距離差異,可以讓人輕易的區(qū)分出,圖片和標(biāo)簽的整體關(guān)系。我們在劃分區(qū)域的時候,一般內(nèi)容區(qū)中導(dǎo)航區(qū)、數(shù)據(jù)展示和操作可以通過距離來劃分,使頁面歸類感更強(qiáng),提高信息獲取效率。

相似性原則:人們的視覺判斷中,可以輕易的將相似的元素歸為一類,面對數(shù)量眾多的元素,可以根據(jù)樣式分成若干組合。比如形狀、大小、顏色、方向等都是視覺判斷的維度。與親密性有一定的相似,但是親密性強(qiáng)調(diào)的是位置,相似性強(qiáng)調(diào)的是內(nèi)容。

在美團(tuán)APP的首頁中,根據(jù)圖形的樣式,我們可以清晰的分辨出首頁的金剛區(qū)和內(nèi)容卡片區(qū)。

閉合性原則:人們的視覺會主動將不完整的圖形補(bǔ)全,形成一個完整的整體。人類的感知是完整的、閉合的。

IBM的logo是閉合原則應(yīng)用的經(jīng)典案例,雖然中間有條形的切割,但是不影響人們識別出這是字母IBM。

主體與背景原則:當(dāng)兩個元素重疊在一起,頂部偏小或者明顯的元素往往會被人們認(rèn)為是主體,會將底部元素當(dāng)作背景。

比如對話框的使用,利用前后重疊的空間感,突出對話框的主體地位,從而清晰的向用戶傳遞信息。

4.2 遵循用戶習(xí)慣

在產(chǎn)品調(diào)研前期,我們需要對用戶習(xí)慣有全面的認(rèn)識,比如當(dāng)前用戶日常常用的軟件是什么,基本的工作流程,具有什么業(yè)務(wù)習(xí)慣。這些采集信息將會在具體的頁面布局中給我們帶來非常大的指導(dǎo)作用。如果說設(shè)計之初對用戶是未知的或者刻意差異化,那么用戶使用和理解平臺有可能會帶來額外的成本。

遵循用戶習(xí)慣,簡單來說,就是讓用戶一眼就能知道平臺應(yīng)該怎么用,不需要思考就能理解平臺所提供圖形和語言。當(dāng)然,對于一些復(fù)雜的流程,還需要建立恰當(dāng)?shù)膸椭到y(tǒng)。

這是一些通用的流程和模版參考,在實際設(shè)計過程中,可能會反復(fù)的斟酌和考慮,對前面的一些內(nèi)容再做出調(diào)整,這是無法避免的,比如有些設(shè)計師會在布局中選擇組件,這些都是根據(jù)個人情況快速實踐的,并沒有標(biāo)準(zhǔn)答案。以上是作者自己根據(jù)日常的工作經(jīng)歷復(fù)盤整理,如果有其他的補(bǔ)充分享,歡迎一起交流。

參考:

  • https://ant.design/docs/spec/form-page-cn
  • https://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeaw
  • https://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ

本文由 @聿來體驗筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

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

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!