首頁

設計師必看的保姆級間距控制規(guī)范!

博博

一、間距在UI中的重要性

1.什么是間距?

間距指的是界面各元素彼此相隔的距離,可以是文字自身的行距、與圖片、與組件、與模塊的間距,或是界面兩側的安全距離(如網(wǎng)頁的寬度為1920px,內(nèi)容區(qū)為1400px,那么安全距離為兩側各260px)等。
作為UI設計師,在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距,利用各間距之間的規(guī)律來組織界面內(nèi)容,確保信息的節(jié)奏性,給用戶輕松、預約的瀏覽體驗。


2.間距的實際作用

間距可以讓界面信息更有節(jié)奏,提升內(nèi)容的可讀性,還能通過不同的疏密程度來闡述各元素之間的關系,以吸引用戶的注意力,所以在控制界面間距時,一定要有“較真”的心態(tài),任何一次的改動與調整都要先考慮清楚為什么,能給產(chǎn)品和用戶帶來什么。要做好間距,不能僅停留在視覺層面,需要進行多方面思考。
設計師層面:規(guī)范的定義間距,不必每個元素都去考慮間距的大小,有效減少決策和思考時間,提升效率。
開發(fā)層面:開發(fā)可以按照基礎間距去定義變量,長期如此,雖然不能煉成像素眼,但僅憑視覺也能看出間距的倍數(shù)。例如基礎間距以8px增量,在使用8px、16px、24px、32px、48px...等,開發(fā)直接使用基礎間距x1、x2、x3...,以此類推,在開發(fā)眼中,肉眼定然看不出1px的差別,但卻能區(qū)分出8px的差距,不必每次都去測量,還能減少誤差,高度還原設計效果。
用戶層面:有節(jié)奏且具備一致性美感的界面效果,信息的有效傳遞變的輕松,用戶體驗能得到很大程度的提升。


3.間距的統(tǒng)一性

設計規(guī)范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統(tǒng)一。同理,間距也是設計規(guī)范中非常重要的一環(huán),它作為規(guī)范中的最小單元,如果沒有遵循統(tǒng)一,將會直接影響界面整體的版式和布局,信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師,開發(fā)每次面對同樣的模塊都需要定義不同的間距也是崩潰的,毫無規(guī)律可循。
統(tǒng)一的間距能讓界面的視覺效果更有節(jié)奏,設計師在設計某些相似的模塊時可直接復用組件,即便是多人共同完成同個項目或更換成員,也不會因間距不統(tǒng)一的問題造成整個APP的風格混亂。
對開發(fā)來說,如果清楚間距的使用規(guī)律,即便有小的誤差,也能自行更正,例如使用8px增量,8、16、24...按倍數(shù)規(guī)律以此類推,若出現(xiàn)9的間距,開發(fā)會更正為8、15則會更正為16,自行多退少補,雖然設計師需要細心、盡量不出現(xiàn)這種小的出入,但任何事情都沒法做到絕對,統(tǒng)一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通,能進一步提高開發(fā)效率。


▲ 從上圖可以看出,間距不規(guī)范、信息就像一鍋粥,而規(guī)范的使用間距就能將信息自動分組。

二、定義文字間距

文字是UI設計中非常重要的信息元素,雖然大多數(shù)設計師對文字的屬性比較了解,但在真實設計中總會因其他信息的干擾不能合理運用,與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單,但實際上有很多因素要考慮,例如字間距、行高、段落等,下面帶大家一起了解。

1.字符間距

字符間距一般都是設計工具的默認數(shù)值,無需調整。當碰到多行文字需要避開頭尾的標點符號時,使用工具中的避頭尾功能即可自動調整字間距,如無此功能,則需手動調整,這里并沒有所謂的技巧與方法,頭尾避開標點符號即可。
另外,在設計卡片、瓷片區(qū)的標題時,有時需要通過調整字符間距來提升界面的舒適度,間距數(shù)值自行定義,但相同層級的內(nèi)容標題字間距一定要保持一致。


2.文字行高

行高是指上邊框+下邊框+字號的高度之和,這里主要針對多行文本。在平面設計中,行高沒有一定的標準,如無特別需要,使用系統(tǒng)默認的行高即可。
在UI設計中,文字會有5~6個不同的等級,為便于用戶閱讀,一般會設定行高標準,尤其是新聞資訊類型的應用本身就以文字內(nèi)容為主,不同的行高對文字的易讀性會產(chǎn)生較大的影響。
文字行高一般會設定為字號的1.2~1.5倍,具體值跟字號有很大關系,文字越小,行高就越大。例如,我們可以設定字號32px為中間值(非絕對),小于或等于32的字體、行高為字號的1.5倍,大于32的為1.2倍。另外,也可以直接將所有行高固定在字號的1.5倍,不難發(fā)現(xiàn),字體越大其折行的概率就越低,試想一下,如果將48px的文字折成幾行,界面還能剩下多少空間?


3.文字段落

文本段落間距的重要性在移動UI界面中并不明顯,更多體現(xiàn)在網(wǎng)頁設計中。需要著重糾正一點的是,部分設計師在設置段間距時習慣性的多敲一次回車鍵,這種方式并不可取,會造成間距過大、內(nèi)容脫節(jié)。
如有需要,一定要手動設置段間距,這里沒有固定的數(shù)值和規(guī)律,視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍,例如字號為30、段間距為15,字號為40、段間距為20,僅供參考。


三、定義元素/組件間距

定義間距其實并沒有一個絕對的標準,主要取決于最小單位,例如4px、5px、6px、8px都是可以的,到底使用哪個數(shù)值還得根據(jù)產(chǎn)品自身定位及內(nèi)容組織形式,前提是所有間距都要遵循最小單位并基于倍數(shù)形成規(guī)律。
在設計界面時,需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關系,這就是為什么當我們打開新聞資訊、電商類應用會發(fā)現(xiàn)信息非常緊湊,而打開工具、社交類應用時感覺信息比較寬松。間距的基數(shù)越小、頁面就越細碎;基數(shù)越大、頁面的留白就越多,使用不同的基數(shù),呈現(xiàn)出來的視覺效果也形態(tài)各異。
筆者在工作中通常以8px作為基數(shù),以此衍生出8、16、24、32、48、64這6個間距數(shù)值,完全能夠滿足絕大多數(shù)的使用場景。當然,針對信息較少的頁面也會使用到120、160、200...其他間距數(shù)值,例如缺省頁、登錄頁面等。不難看出,上述以8px為基數(shù)定義間距數(shù)值時,沒有40、56這兩個數(shù)值,難道他們不是8的倍數(shù)嗎?我們以8和16做對比,后者是前者的2倍,其間距的變化尤為明顯;但如果用56和64做對比,后者是前者的1.14倍,其間距的差別微乎其微。敲重點,設計師在定義間距時,需要遵循倍數(shù)規(guī)則,但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規(guī)則,當間距數(shù)值越大時,根據(jù)基數(shù)所跳躍的倍數(shù)就越大,其實設定字號也是相同的邏輯(后期詳解)。


四、定義模塊間距

從信息層級角度來看,等級權重越高、間距就越大,在現(xiàn)實世界中也是如此,一個物體周圍的空間越大,就越容易吸引人們的注意力。
模塊間距分為塊內(nèi)間距(同一模塊中不同元素或信息組之間的距離)和塊外間距(同一個頁面中不同模塊的之間的距離),為了更好的區(qū)分信息層級,塊外間距一定會大于塊內(nèi)間距,也能保持塊內(nèi)信息的親密性。
如下圖所示,將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊,每個模塊內(nèi)元素的間距都會比各模塊之間的間距小很多。


五、間距的使用技巧及原則

1.接近性原則

需要通過各元素的間距來體現(xiàn)出信息的關聯(lián)性,格式塔原理中的“接近性”原則告訴我們,相互靠近的物體被認為比相互距離較遠的物體更有關聯(lián)性,因此,相關聯(lián)的元素之間靠的越近,用戶越能感知到信息的關聯(lián),同時更能了解整個界面中各模塊信息的邏輯關系。


2.利用留白強調

很多時候,想讓一個元素變的突出,可以用加大字號、修改色值或后加粗等方式進行強調,但這并不是突出信息的唯一方式,當所有元素都變的突出,那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出,留白也是一種強調信息的方式,它能引導用戶將注意力集中在特定的內(nèi)容上。

3.使用柵格系統(tǒng)

善用柵格系統(tǒng)(上述有詳細說明),通過最小間距值進行遞增,讓整個界面看起來更協(xié)調。柵格系統(tǒng)可以讓設計師在元素的親疏關系上更快作出決策,后續(xù)不管是迭代還是更換設計成員,都能保持統(tǒng)計的間距規(guī)范。


4.文字行高規(guī)則

這個問題在很多團隊中都是硬傷,甚至在設計驗收時還被直接忽略。在主流UI設計工具中,添加文本元素時,都會有默認行高,在前面的內(nèi)容中有講過多行文本的行高為字號的1.2~1.5倍,那么單行文字的行高到底是需要手動設置還是遵循默認,筆者認為都是可以的,但一定要與開發(fā)保持一致。
行高決定著文字邊緣與定界框的間距,而開發(fā)只能看到定界框與其他元素的間距。

1)默認行高
默認行高值會隨著字號的變化基于一定的倍數(shù)自動增減,需要將此規(guī)律或倍數(shù)告知開發(fā),開發(fā)將此規(guī)則植入代碼方能最大化還原設計效果。另外在設計界面時,尤其是多組文字元素的上下間距,需要通過計算(文字邊緣到定界框的間距+文字元素間距=實際間距)或手動測量才能達到精準狀態(tài),下圖為例:

2)手動設置行高
手動設置即字號是多少、就將行高設置為多少,確保文字邊緣緊貼定界框,在設計過程中調整間距時,無需計算,根據(jù)設計工具的智能提示調整即可。


5.間距值數(shù)量設定

在同一APP應用中,根據(jù)最小基數(shù)定義的間隔值數(shù)量不易過多,一般在6個左右就能滿足絕大多數(shù)的設計場景。例如以8px的基數(shù)為8、16、24、32、48、64等,以5px的基數(shù)為5、10、15、25、40、60等。數(shù)量過多會導致界面不同元素、模塊的間距差異化不夠明顯,數(shù)量太少無法滿足多元素、模塊使用場景,也會導致間距跨度較大。


6.明顯相鄰間距值

設定間距值需遵循一個原則“數(shù)值越大、遞增的倍數(shù)就越大”。當相鄰間距值的差異化較小時,用戶很難感知到界面中信息之間的邏輯關系,我們需要根據(jù)柵格系統(tǒng)中間距值的增大、設置更大的區(qū)間值,讓相鄰間距值之間的視覺差異更加明顯。


7.跳出間距的束縛

當界面中的信息較為密集、間距不足以滿足信息的突出程度時,需跳出純粹的間距規(guī)范束縛,換種方式或許更好。例如:給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等,需知「此消彼長」的道理。


六、結語

如果在處理界面信息層級時,改來改去還是覺得很亂,不防從間距角度出發(fā),或許會有不一樣的收獲。雖然在剛開始的時候,規(guī)范間距帶來的效果甚微,但隨著團隊規(guī)模不斷擴大、界面數(shù)量越來越多、內(nèi)容越來越復雜時就會發(fā)現(xiàn),所有內(nèi)容統(tǒng)一間距規(guī)范,不管是構建一致性界面視覺效果、還是對開發(fā)和設計師來說,既能提升用戶體驗、還能提高團隊的工作效率。
間距是否規(guī)范使用,決定著界面是否規(guī)整、信息傳達是否清晰,即便如此,間距也只是解決信息層級方式的其中之一,切不可讓其限制設計師的發(fā)揮和思考空間。制定設計規(guī)范有助于項目的高效運轉,間距也好、色彩也罷,設計師依然需要從實際用戶場景出發(fā),通過不斷的思考和經(jīng)驗總結,打磨出更合理、更符合項目需求的設計規(guī)范。



作者:大漠飛鷹CYSJ



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

B端工作臺設計思路解析

博博

一、需求分析

在設計一個產(chǎn)品的時候,我們要透過現(xiàn)象看本質。

我們是為誰?解決什么問題?分析的結果將直接影響到方案的好壞。 這里推薦大家采用5W1H分析法,5W1H分析法也叫六何分析法,是一種思考方法,也可以說是一種場景創(chuàng)造分析法。



5W1H分析法包含如下幾個方面:

Why:為什么要做,是原因。

What:做什么、做成什么,是目標。

Where:在哪兒做,是地點。 

When:什么時候做,是時間。 

Who:誰來做,是執(zhí)行對象。 

How:怎么做,是方法。

通過上述分析我們可以(假設)知道:我們的用戶是技術人員、基層管理人員;做這個頁面的目的是為了讓用戶隨時掌握各項工作的進展情況,快速進入需要處理的工作事項。 根據(jù)結論可以得出工作臺是一個導航頁面或者綜合管理頁面,它是用戶感知產(chǎn)品價值的重要“門面”,使用者有一定的經(jīng)驗,屬于高級用戶。從設計角度來看,首頁工作臺是整個系統(tǒng)規(guī)范與視覺風格的核心場景。

使用角色:

主要是技術人員、基層管理人員

內(nèi)容主次(根據(jù)需求得出):

P0:各類數(shù)據(jù)指標的匯總、我的動態(tài)

p1:總量趨勢、數(shù)據(jù)排名、操作匯總

p2:分發(fā)匯總、待辦事項 

設計要求:

重點突出、簡潔、清晰

二、信息架構

優(yōu)先級處理

下面這張圖是產(chǎn)品給的原型,也是B端面試題中經(jīng)常會遇到的題目。如果你打算就按照產(chǎn)品給的原型直接做美化,那估計很難被選中。



做需求分析的目的之一就是為了做信息處理,這里要提到一個詞叫“屏效”。B端產(chǎn)品我們都知道,目的是“降本增效”,在合理的信息布局下盡量利用交互等手段讓頁面縮短。 

比如:上面原型中有兩個top10排名,如果一行展示會比較擁擠,也體現(xiàn)不了top10排名??紤]“易讀性”我們會放兩行,但這樣又占據(jù)了屏幕空間,在與產(chǎn)品溝通后我們把它整合到一起,利用按鈕組切換進行查看。同時排名也是業(yè)務人員需要關注的,所以我們把它們往上放。

頂部個人信息內(nèi)容比較少,也沒必要占一整行,我們把它移到右邊;各類指標因前3個是不能點擊的,為了和后面可點擊按鈕做區(qū)分,我們整合到一個卡片上;待辦事項與產(chǎn)品溝通后說不太重要,移動到了最下面,操作匯總模塊往上移;



到這里模塊之間的信息優(yōu)先級基本處理完成,下面就要對單個模塊進行拆解處理。 

首先我們要觀察哪個是:重要信息、次要信息、輔助信息,上面我們提到了“效率”,把重要信息突出顯示,就是為了讓用戶一眼就能看清,不需要去尋找或被次要信息干擾。 

最后一個模塊原型上只有一個標題,這真是驗證了一句話:“巧婦難為無米之炊”,所以又去找產(chǎn)品溝通,為什么單個模型可以點擊查看更多?用戶在這個地方想要獲取什么樣的數(shù)據(jù)?

經(jīng)過一番溝通,拿到了一些“米”,巧婦終于可以干活了。為了體現(xiàn)“易發(fā)現(xiàn)性”,我們在后面這個模塊上加了一個詳情按鈕。



柵格化處理

其實上面的圖是我處理過的,產(chǎn)品的原型可不長這個樣子,模塊大小、間距都是隨便給的。你如果也按照產(chǎn)品給的原型模塊大小做,估計研發(fā)會“罵娘”,因為這樣沒法按照比例進行換算,也就沒法做自適應。



這一步主要就是做柵格化處理,我們需要定義每個模塊的占比與間距。B端產(chǎn)品通常選用24柵格布局,也就是24欄+23水槽+2頁邊距。

我遇到的工作臺頁面有兩種,一種是帶左側樹,一種是不帶,這兩種對應的柵格化數(shù)值不太一樣。 按照目前常用的尺寸1440*900來計算:不帶左側樹我采用的是1440=2*20+43*24+16*23。



如果大家做的是帶左側樹,可以參考下圖數(shù)據(jù)



三、可視化圖表

重點來了,我個人覺得這一節(jié)才是工作臺、數(shù)據(jù)分析頁面的核心,但很多人都忽略了,覺得不就是幾個圖表,唰唰唰一下就搞定了...... 

上面我們提到過B端測試題給的都是原始數(shù)據(jù)(表格),需要設計師自己根據(jù)數(shù)據(jù)找合適的可視化圖形進行展示。

如果你對可視化圖表不熟悉,不知道什么時候該用柱圖、折線圖、餅圖;不知道隨時間變化該用什么圖形;不知道體現(xiàn)排名的數(shù)據(jù)該用什么圖形。那你很難輸出一份有理有據(jù)的作品。

因圖表類型太多,詳細的留到后面文章討論,這次只對原型中使用的到圖表進行分析:

柱圖:

柱狀圖是常用的數(shù)據(jù)可視化圖形之一,可用于隨時間變化而產(chǎn)生變量的數(shù)據(jù)統(tǒng)計,也可用于數(shù)據(jù)類別的對比、排名。

如圖,柱狀圖能展示知乎文章觀看者地域分布,也能反應出不同時間段的情況,并通過圖形能夠快速了解 分布最多和最少的省份。



優(yōu)點:

人眼對長短(高度)比較敏感,可以直觀體現(xiàn)數(shù)據(jù)差異性。

缺陷:

分類過多時數(shù)據(jù)的展示效果會降低。 

設計要點:

能把圖形視覺與體驗都兼顧好,才能體現(xiàn)設計師的價值。 設計師的能力不僅體現(xiàn)在技法上,更多的是體現(xiàn)在思考能力上。圖形擴展性設計和創(chuàng)新性設計都需要設計師做縝密的思考,只有這樣才會有出彩的設計結果。

信息層級:



視覺展示:

2個人站在一起我們除了對比高度、顏值,還有會對比胖廋。那么,柱狀體的粗細和間距如何定義呢? 在圖中,中間柱狀圖的柱子間距過于疏散沒有規(guī)律;右邊圖中的柱子間距又過小,視覺上顯得擁擠,并且當分類過多時,過小的間距會導致柱狀體之間沒有獨立性,不易閱讀。



定義柱狀體的間距可以用5分原則設計法,即柱子之間的間距為N,左右兩邊與柱子之間的距離就是2/N。 如圖所示。這也是很多界面設計中常用的技法,其原理就是接近黃金比例,視覺上較為舒適。同時,在保證界面元素整體協(xié)調性的情況下,盡可能把柱子的寬度設計成N,這樣視覺上最為協(xié)調。



另外,在設計圖形前,設計師最好能了解到真實數(shù)據(jù),這樣才能結合真實的數(shù)據(jù)來設計圖形,盡可能還原落地后的樣子。在圖中,圖形的設計和落地后的樣子存在較大的差異。問題就出在設計前設計師沒有了解數(shù)據(jù)的真實情況,前端工程師按照設計圖把X軸的數(shù)值固定了。



相似圖表: 

堆積柱狀圖:堆積柱狀圖可以展示兩個或多個數(shù)據(jù)的變化,以及數(shù)據(jù)之間的綜合比較情況。 

分組柱狀圖:分組柱狀圖可以在同一數(shù)軸上展示各個分類下的不同分組數(shù)據(jù)。 

有序柱狀圖:與有序條形圖一樣,有序柱狀圖也能呈現(xiàn)數(shù)據(jù)的排名情況。



折線圖:

折線圖常用于表示一個連續(xù)時間段內(nèi)數(shù)據(jù)的變化趨勢,主要功能是能夠清晰地反映出數(shù)據(jù)隨時間變化的趨勢。

如圖,折線圖不僅能展示不同月份的價格趨勢,還能清晰呈現(xiàn)數(shù)據(jù)的峰值和低谷。折線圖也可以是多條線,用來分析多組數(shù)據(jù)隨時間變化的趨勢及數(shù)據(jù)間的趨勢比較。



優(yōu)點: 

直觀反映數(shù)據(jù)變化趨勢 

缺陷:

無序的類別無法展示數(shù)據(jù)特點。

設計要點:

折線圖可以用于展示數(shù)據(jù)的趨勢變化,通過折線的起伏波動可以幫助人們探究數(shù)據(jù)背后的邏輯。但如果折線圖的設計不夠合理,在視覺上會讓人產(chǎn)生錯誤的認知。在圖中,有的折線圖的刻度值設置不合理,如中間折線圖的刻度值未從0開始,導致折線的呈現(xiàn)夸大;右邊折線圖的刻度值過高,趨勢變化呈現(xiàn)過于平緩,這些都是在不客觀地表達數(shù)據(jù)。正確的方式應該是刻度值從0開始,隨著數(shù)據(jù)的增減,刻度值也做相應的變化。

視覺展示:



在折線圖設計中,還需要注意折線的粗細要適中。在圖中,其中一條折線過細,這會降低數(shù)據(jù)可視化的表現(xiàn);另一條過粗,就會損失折線中的數(shù)據(jù)波動細節(jié)。在產(chǎn)品的圖形設計中,一般網(wǎng)格線和起始線都是1像素,折線一般用2像素,這樣的粗細會有較好的視覺表現(xiàn)。



相似圖表:

階梯線圖:線在數(shù)據(jù)點之間形成一系列步驟。



面積圖:與折線圖唯一不同的是,其自變量數(shù)據(jù)和坐標軸之間有顏色填充,這樣能更加突出數(shù)據(jù)的趨勢變化。



餅圖:

提到數(shù)據(jù)的占比,相信你第一個就會想到餅圖,主要用來展示數(shù)據(jù)分布情況。 餅圖是展示占比數(shù)據(jù)最直觀的圖形,通過弧度大小來表示分類的占比多少。但餅圖有一定的局限性,當占比數(shù)值接近或占比分類過多時,在視覺上就不容易辨別各個類別占比的大小。在數(shù)據(jù)可視化產(chǎn)品中,因為餅圖是大面積的色塊,視覺上會非常突顯,很容易搶走重要數(shù)據(jù)的風頭,所以使用時要酌情考慮。



優(yōu)點: 

直觀顯示各項占總體的占比,分布情況,強調整體與個體間的比較。

缺陷: 

分類過多,則扇形越小,無法展現(xiàn)圖表。

設計要點:

每個圖形都有自己的設計規(guī)范,如當餅圖分類過多時,一般不把文字放在圖形元素上,因為一旦出現(xiàn)幾個相對較小的占比數(shù)據(jù),字就很容易溢出,不容易辨別指向的分類,如圖中的右圖所示。好的解決方案就是,在圖形的外圍用引線指出分類數(shù)據(jù),或者加示例圖展示。

視覺展示:



另外,餅圖的分類最好從12點鐘的位置開始,這樣較為符合人的閱讀習慣,即從上到下、從左到右,如圖中。如果餅圖隨意從不同位置開始展示,就會缺少規(guī)范,這樣當多個餅圖同時展示時容易出現(xiàn)混亂。

同時,在餅圖的分類中如果沒帶排序,如1月、2月……,那么占比最好能夠從大到小依次排列,這樣還能直觀地呈現(xiàn)出分類的排名情況。任何時候,如果有“其他”這項分類,無論其占比多少都要放在最后,因為其數(shù)據(jù)通常是最不被關注的數(shù)據(jù)。



相似圖表: 

嵌套圈餅圖:用于一個指標在不同維度的占比。 

跑道圖:看到占比的同時,可以直觀看到指標在當前維度下的排名情況。

表格

表格看起來簡單,但想設計好也不是一件容易事。通常我們見到的(產(chǎn)品中)表格都屬于比較簡單的表格。

在BI系統(tǒng)中有一些復雜的表報,如果直接用組件信息會很難閱讀。我們需要對表格的視覺進行調整,讓信息獲取更高效,這就需要一些設計技巧和原則。



設計要點:

表格排版第一大原則:文字左對齊,數(shù)字右對齊表格中文字需要左對齊,因為我們閱讀文字的習慣是從左到右。

而圖中(上圖)的項目名稱長短不一,居中對齊在視覺上會使切入點呈現(xiàn)“Z”字形,影響閱讀效率。左對齊可以使線性結構在視覺上不跳躍,閱讀流暢且更具美感。表格中的數(shù)字需要右對齊,因為當我們在面對一個長數(shù)字時,一般會從右往左讀。比如數(shù)字¥368,568,023.00,我們一般是從個位到最后的千萬位順序識別數(shù)字體量,有的人可以通過千分符迅速判斷數(shù)字的體量,但其實也是從右到左的瀏覽順序,因此數(shù)字右對齊最符合人的閱讀方式。

在圖中(下圖),讓我們感受一下數(shù)字左對齊、居中對齊、右對齊的閱讀效率,以及對各個數(shù)據(jù)體量的對比感知。



文字左對齊和數(shù)字右對齊,針對的是長短不一的名稱和大體量的數(shù)字,而對于文字數(shù)量一樣、體量較小的數(shù)字也可以嘗試用居中對齊的方式,對稱的元素本身就具有美感。如圖所示,通過對表格中的文字和數(shù)字的重新排版,相信在閱讀效率上會有較大的提高。雖然提高了閱讀效率,但這相比優(yōu)秀的表格設計還差得很遠,其中最明顯的是表格的邊框在視覺上過于突出,接下來我們繼續(xù)調整。



弱化邊框

如圖(下圖)所示,通過弱化邊框在視覺上能夠突出表格的內(nèi)容。表格邊框可以讓信息的呈現(xiàn)更有條理,能夠提高易讀性,但在視覺層級上不能高于內(nèi)容信息。



去掉邊框與分割線

將表格的邊框與分割線去掉,用留白分隔內(nèi)容,無框勝有框,增大留白可以使表格更有空間感。這樣的設計需要注意的是,元素的間隔不能太小,不然會顯得擁擠。由于去掉邊框后有些問題會被放大,比如標題與內(nèi)容沒有對比,因此需要增強對比,在整體上要有層次。



強調標題

圖中的表格加強了標題,這樣看起來更有層次。強調標題的方法有很多種,不一定只是加粗字體或加大字號,還可以給標題欄添加背景,以形成對比。



突出重要信息

如果在一組數(shù)據(jù)中有重要數(shù)據(jù)和次要數(shù)據(jù)之分,那么就需要在對重要數(shù)據(jù)的設計上著重突出,表格的設計同樣如此。圖中所示就是把重要的數(shù)據(jù)信息通過增加背景色與其他元素形成較為突出的對比,這種設計是一種為用戶做選擇的設計方法,容易讓用戶的視覺停留在他本想重點關注的地方。



表格擴展設計

由于人們常常會對熟悉的事物產(chǎn)生審美疲勞,因此設計中有創(chuàng)新才容易給人眼前一亮的感覺。

下圖在背景上面給了一根橫線,來凸顯這一列的數(shù)據(jù),這樣除了可以加強信息傳達也可以打破常規(guī)的表格樣式(這里只是提供一種思路)。




表格字體運用

表格數(shù)字最容易出問題的是數(shù)字字體的運用,因為很多數(shù)字字體不是等距設計,比如數(shù)字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級的數(shù)字,就有可能會誤導觀者。

如下圖所示,本來32,118,116,00大于28,558,363,00,但由于不同數(shù)字所占寬度不一樣,這樣的設計在視覺上容易誤導用戶。因此,表格中的數(shù)字要使用表格字體,因為表格字體每個數(shù)字所占面積一致,這樣就不會出現(xiàn)案例中的問題了。




其實很多表格里面的數(shù)字字體都存在類似問題。下圖是修改數(shù)字字體后的設計,這樣就能客觀地呈現(xiàn)數(shù)據(jù)了。

表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。



四、視覺設計

配色:

參考631配色法 

對有含義的顏色要謹慎使用,例如:紅、黃、綠



圖標:

常用的圖標分為兩類:
工具圖標:包含一定產(chǎn)品功能隱喻的簡化抽象圖形,代替文字節(jié)省界面空間,方便用戶理解,常用于b端產(chǎn)品里面。
如圖,里面來自不同產(chǎn)品的圖標,雖然表現(xiàn)形式不太一樣,風格不太一樣,但都是為了體現(xiàn)圖標后面文字的意思。



裝飾圖標:主要目的是用來裝飾界面的視覺元素,樣式大于功能,常用于產(chǎn)品宣傳、活動等頁面。 如圖,云計算、大數(shù)據(jù)相關的產(chǎn)品,語義都比較復雜,很難通過圖標去表達,既然看不懂,就抽象點。



在 B 端產(chǎn)品中,應用最廣泛的還是工具圖標。 可能有人覺得工具類圖標太簡單了,它是看起來簡單,想做好一點都不容易。

首先要保證“一致性”, 粗細一致、圓角一致、透視一致、大小一致,同時還要把語義用圖形表達出來。

間距:

一般采用8的倍數(shù):8、16、24、32、40、48、...



字體:

12px、14px、16px、20px、24px,可采用“回退機制”






作者:夜鶯YEAH



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

用戶體驗研究應該安排在哪里?

博博

用研的進階

根據(jù)公司結構和職能角色的需求不同,用研中部分是行為觀察,部分是商業(yè)戰(zhàn)略,部分是心理學,部分是數(shù)據(jù)分析,部分是設計,部分是團隊促進。用研可以有不同的風格,因此可以在行業(yè)范圍內(nèi)四處移換位置。根據(jù)公司規(guī)模和類型的不同,我見過很多用研團隊變成設計部門的一部分,有些則變成營銷部門的一部分,還有一些則在產(chǎn)品管理部門——最終在哪都根據(jù)公司的規(guī)模和類型來決定。在我任職期間的某個時候,我自己的團隊已經(jīng)集結到了之前提到的各個部門。

所以...有沒有一個部門可以更加適合配備用研部門,讓用研更加成功且具有影響力呢? 這是我想找到的答案。

...

用研部門應該存在于...

...在設計團隊?



攝影:Harpal Singh 于 Unsplash

優(yōu)勢:

研究與設計交織在一起:用研已經(jīng)成為許多用戶體驗設計師工作職位描述中的一部分,而用研的核心就是指導設計。研究結果可以指導交互行為,并且它從一開始就已經(jīng)嵌入了設計過程里。如果一個設計團隊有專門設立研究部門,會讓這個團隊變成一個強大的聯(lián)盟。讓更大的設計團隊統(tǒng)一研究整體用戶策略,會讓之后的調研和設計過程更加整體和完善。同樣,設計師也有想改善用戶體驗的眾多想法,并且通常很高興能看到用戶和他們的想法進行交流。這直接與這些創(chuàng)造用戶體驗改善的設計師們,促成了一個強有力的文化測試、迭代、再測試的過程。由于設計與用研的過程是結合在一起的,因此可以立刻將這些用戶洞察應用到設計中去。

類似的工作流程:用研的工作流程與傳統(tǒng)的設計流程十分相似。設計領導者可以無縫地理解研究的各個階段:復查現(xiàn)有的數(shù)據(jù),引導生產(chǎn)性研究,匯編各種信息從而尋找新的模式,創(chuàng)建一份報告,陳述研究結果,在上線后測試等等。同時,從設計概念開始,征求意見、進行測試比較設計方案的好壞、迭代設計、產(chǎn)出最終的版本、呈現(xiàn)并且在上線之后進行迭代。設計和用研通常希望攜手合作,共同努力改善數(shù)字化體驗。

劣勢:

設計≠用研:不是所有的設計師都會進行研究,要么是因為他們沒有時間,要么是因為他們沒有接受過理解研究方法的訓練。(相反,也不是所有的研究人員都是設計師)通常,公司會安排設計師同時做研究員的工作,反之亦然。這對最終實現(xiàn)的產(chǎn)品來說可能是災難性的。尤其是在較小的公司中,設計師需要扮演很多職能。這意味著他們“有時候“有時間能親自調研。不幸的是,在設計和用研沒有明確定義的前提下,這意味著雇傭部門和領導團隊認為這兩者是可以互換的 (注意: 這并不意味著某些設計師沒有資格,只是“視覺設計師 / 平面設計師”、“UI設計師”和“UX設計師”的技能組合是有區(qū)別的,但我不會在這里討論這些!)

用戶需求可能會被遺忘: 有時候,一個設計規(guī)劃圖會被過分熱烈的創(chuàng)造性驅動從而創(chuàng)建,而不是來自于數(shù)據(jù)或研究。很多時候,創(chuàng)意人員會對他們喜歡的新想法產(chǎn)生依戀,即使它并非源于用戶需要的東西(有時候我們都會為此感到內(nèi)疚)。不幸的是,這意味著研究可能是事后的想法,更經(jīng)常地被作為驗證工具而使用,而不是在產(chǎn)品生命周期中預先定義需求。這對于用研來說可能成為難以克服的一個障礙,特別是如果設計概念與利益攸關方或決策者領導人一起審查,他們喜歡并認為這是一個“ 可以去做的設計”。這意味著研究的機會很有可能喪失。

...在市場運營團隊?



攝影:Carlos Muza 于 Unsplash

優(yōu)勢:

相似的技能組合:市場研究和 UX / 產(chǎn)品的研究在他們特定的核心研究中,共享相似的過程和研究方法。在社會心理學、市場營銷學、人類學、人的因素、運作和設計等許多領域進行 “人的研究” 所使用的工具包非常相似:定量方法,如大樣本調查和分析;定性方法,如面對面的觀察,焦點小組,適度的訪談,日記研究以及其他。每個領域的方法都需要研究設計、用戶招募和研究分析。對于市場團隊來說,這是一個非常熟悉的世界,作為 用研 流動到這個部門意味著領導者可能會對你的角色需求有一個徹底的了解。

共同的目標是了解用戶: 市場團隊也將是你的擁護者。無論如何,源自于產(chǎn)品和設計的用戶研究的洞察力,為市場部門關注的許多舉措增添了直接價值。透過略微不同的角度來看,市場營銷和用戶體驗有著相似的目標(理解客戶) 。盡管如此,當團隊協(xié)作并共享信息,在以業(yè)務或用戶為中心的舉措之間建立平衡時,用研結果還是能夠幫助我們進行決策。

劣勢:

商業(yè)需求可能與用戶需求相反:如果組成“聚焦點”的事物變化太大,那么這個”聚焦點“既可以將市場營銷與用戶體驗結合起來,也可以將它們分開。當業(yè)務需求與用戶需求相矛盾時,可能會產(chǎn)生摩擦。如果市場部門的領導層將眼前的業(yè)務優(yōu)先級置于用戶研究之上,那么獲取工具和客戶的途徑就可能受到限制。在一天結束的時候,市場團隊關注創(chuàng)收,即使這對用戶來說不是最好的體驗(比如在某個地方放置廣告,可能會干擾網(wǎng)頁,以確保用戶看到它) ; 而用研團隊關注什么是對用戶體驗最好的(比如在頁面上放置一個廣告,使其不會干擾用戶的任務,冒著用戶看不到并參與其中的風險)。

用研 ≠ 市場研究: 有時候,流動到市場部門意味著其他人將 用研視作為市場研究的延伸。由于這一點,一些項目有可能被認為應該由市場專家處理,而不是用戶體驗專家。例如,營銷活動的目標可能是“我們?nèi)绾巫層脩羰褂眠@次促銷活動” ?另一方面,用研 可能會強調用戶的需求,比如“用戶希望如何獲得有關促銷活動的通知” ?這種情況(關注點的轉移)并不可能經(jīng)常出現(xiàn)在市場部的議程表上。

...在產(chǎn)品管理團隊?



攝影:Marvin Meyer 于 Unsplash

優(yōu)勢:

為產(chǎn)品使用路徑圖研究分配時間:通過將 用研 嵌入到產(chǎn)品管理團隊中,研究有機會通過在產(chǎn)品路徑圖中劃出其應有的空間和時間來充分發(fā)揮其潛力。通過讓 用研 和產(chǎn)品經(jīng)理向同一個領導層匯報,這意味著目標和優(yōu)先級可以被共享,并且在同一時間被一起審查。這可能是一個有效的工作方式,特別是當你與產(chǎn)品經(jīng)理一起工作的項目,他們知道如何使他們的產(chǎn)品更直觀地呈現(xiàn)給用戶。用研的產(chǎn)品管理為定義實際產(chǎn)品需求創(chuàng)建了一種更加無縫的方法。這意味著路線規(guī)劃圖中留出了時間,在積壓成定局之前走出去,獲得用戶見解。這告知了大家需要開發(fā)的功能的優(yōu)先級,并在完成設計之前,就形成產(chǎn)品了本身的特性。當 用研 與產(chǎn)品經(jīng)理的目標緊密相連時,每個注入了用戶見解的產(chǎn)品階段都變得更加容易(因為它應該是在一個理想的世界中!)

更容易地與決策者進行知識交換:將產(chǎn)品經(jīng)理的內(nèi)部結構與 用研 的內(nèi)部結構相結合,也意味著他們可以獲得更多用戶關于他們的體驗的言論,從而形成定期更新,并且可以更容易地進入用戶途徑。用研經(jīng)常關注復查定性趨勢的反饋(比如 Qualtrics 或者 Medallia 系統(tǒng))(在線調查或客戶體驗管理系統(tǒng)),這意味著產(chǎn)品經(jīng)理聽到這些趨勢的機會變得更加頻繁。產(chǎn)品經(jīng)理一般來說應該對他們的用戶群有深刻的理解,但是他們通常很難在傾聽用戶的基礎上來保持沖刺、業(yè)務分析、 KPI 和產(chǎn)品路線圖規(guī)劃。因為團隊會議中現(xiàn)在有一個指定的用戶代言人一直在場,這就是為什么與 用研 如此緊密地聯(lián)系在一起對產(chǎn)品經(jīng)理來說是有益的。參加這些會議使得 用研 有機會直接與那些最需要了解用戶需求的人進行自發(fā)的對話。加入同一個團隊可以使這些溝通渠道更加開放,并且可以更加頻繁地了解用戶對產(chǎn)品經(jīng)理的需求。

劣勢:

研究的優(yōu)先級可能會降低:不幸的是,轉到產(chǎn)品管理團隊意味著有時研究的優(yōu)先級會降低。當利益相關者對產(chǎn)品交付施加壓力時,這通常意味著產(chǎn)品需要盡快推出。然之后,產(chǎn)品經(jīng)理必須專注于發(fā)布他們產(chǎn)品路線圖規(guī)劃上的項目,并在時間表和開發(fā)周期內(nèi)實現(xiàn)業(yè)務目標。為了滿足這些時間要求,盡快交付某些東西成為更緊迫的目標,而不是交付一個經(jīng)過研究和磨練的產(chǎn)品(這需要更多的時間)。

更多的評估而不是生產(chǎn)性研究: 把用研流動這個部門可能意味著這項研究變得更加可評估(或者驗證、可用性和迭代測試) ,而不是生產(chǎn)性(或者理解需求、價值和概念發(fā)現(xiàn)或開發(fā)的測試) ,就像在設計團隊下可以做的那樣。這不是一件壞事,而只是需要牢記在心,以便作為一個用戶倡導者,用研 的工作可以更直言不諱地說,需要留出時間來做更深入、生產(chǎn)性的工作,從長遠來看而不是短期內(nèi)為產(chǎn)品提供信息。提前了解這個可能的障礙意味著用研可以更好地裝備自己的 ROI(投資回報率)影響,以便為更深入的研究騰出時間。

...在自己獨立的部門?



攝影:José Alejandro Cuffia 于 Unsplash

注意: 我還沒有在一個獨立的,指定的 UX 研究部門作為一個 UX 研究員的工作經(jīng)驗。我只能推測將一個獨立的 用研 團隊集合起來會是什么樣子,或者當 用研 成為一個大型組織中自己的分支時,領導力的優(yōu)缺點是什么。

優(yōu)勢(推測):

擁有自己帶領的用研部門,可以為更深入地研究需求提供機會。它將有能力根據(jù)合作伙伴的規(guī)劃路線圖從而制定自己的規(guī)劃路線圖。它可以讓部門領導層能夠深入地支持研究人員的需求,因為需求經(jīng)常遇到障礙(如招聘、用戶日程安排、預算、批準、 ResearchOps( Research Operation service 研究運營管理) 的行政工作等)。能夠擁有一個研究路線規(guī)劃圖,并為發(fā)現(xiàn)和生成性研究騰出時間,從長遠來看,可能會大大有助于產(chǎn)品和客戶體驗的信息共享。擁有一個獨立的團隊可以使這些研究成為奢侈品。當一個領導者致力于使研究成功,這意味著他們希望研究可以帶來更多戰(zhàn)略上的影響。

正如我之前提到的,一些被稱為 “ ResearchOps(研究運營管理)” 或者研究操作的東西,是一個趨勢短語,類似于 “ designnops①” 或者 “ DevOps②” 等等。拋開時髦不說,設立一個獨立的部門和領導層可能意味著在決策層有一個更大的席位,這反過來又意味著在使體驗研究產(chǎn)生影響方面有更多的投資。當投入更多資金進行研究時,業(yè)務側就有機會進行戰(zhàn)略思考并得到支持。一個獨立的 用研 部門反過來將能夠雇傭人來支持行政管理,為研究人員能夠專注于他們眼前的工作和分析而負責。在小型組織中,甚至在大型組織中的小型 用研 團隊中(比如我的團隊) ,研究人員往往負責所有的職能,這也是可以的!但是,如果有一個專門關注于這些研究人員需求的部門,并擴大他們工作的影響(不管團隊規(guī)模有多大) ,我相信將有更大的機會去收集更好、更深入的見解,研究過程也能充分發(fā)揮其影響力和潛力。

①Design Systems Ops 是設計團隊的一部分,他需要足夠了解設計,并且要了解他們試圖概念化什么。同時,Design Systems Ops 需要理解工程師的需求和定義方法,這將有助于設計系統(tǒng)的裝運和規(guī)?;?。在某些程度上,一個 Design Systems Ops 是兩個世界的翻譯。

② DevOps( Development和Operations的組合詞)是一組過程、方法與系統(tǒng)的統(tǒng)稱,用于促進開發(fā)(應用程序/軟件工程)、技術運營和質量保障(QA)部門之間的溝通、協(xié)作與整合。它是一種重視“軟件開發(fā)人員(Dev)”和“IT運維技術人員(Ops)”之間溝通合作的文化、運動或慣例。透過自動化“軟件交付”和“架構變更”的流程,來使得構建、測試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。

劣勢(推測):

相反,單獨作為一個獨立的 用研 部門,也可能使得決策層難以接受。如果不流入一個直接產(chǎn)生收入影響的部門內(nèi)(至少在短期內(nèi),比如在銷售或營銷方面) ,那么 用研 的工作就很難得到認可。利益相關者之間的伙伴關系和一致性,對于用研人員能夠成功地完成他們的工作來說至關重要。如果沒有它,如果 用研 的需求被認為不是直接以產(chǎn)品為中心,同樣的職位可以幫助 用研, 也可能會阻礙他們。開展生產(chǎn)性研究的時間可能被視為“有風險” ,而且當團隊的領導層與其他更為成熟的角色(即風險較低的角色)分離時,可能很難獲得合作伙伴和利益相關者的支持。

同樣,投資一個獨立的用研團隊總的來說可能是有風險的。可能很難預測到有形的ROI(投資回報率)預測,以便業(yè)務合作伙伴能夠理解,并在第一時間投入資金。這意味著,決策者們可能認為給用研分配預算或增加人數(shù)是有風險的,其他研究需求也是如此。一般來說,R&D(產(chǎn)品研發(fā))在組織中是一個棘手的領域,而 用研 肯定會在這個預算范圍內(nèi)。盡管有證據(jù)表明,對研發(fā)的投資有能力改變企業(yè)經(jīng)營的底線,并且可以通過創(chuàng)新保持企業(yè)價值,所以相對于獨立的用研部門,緊迫的商業(yè)需求可能話語權更大。

...







作者:三分設



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

找設計師不是幫我解決問題的嗎?為什么越幫越忙?!

博博

什么是清晰明確的需求

一.何為「清晰」 

在設計項目中,甲方通常會表述的需求是「我要做什么?」因為這個需求對于甲方來說,是最迫切和最直接的。但站在設計公司的角度來說,除此之外,還有另外三點甲方容易忽視的內(nèi)容需要了解,一是「我是誰?」二是「為什么做?」三是「用在哪?」 



「我是誰?」包括甲方公司的名稱,品牌理念,所屬行業(yè),主營業(yè)務,主打產(chǎn)品和主要受眾等;

「我要做什么?」包括甲方所需設計內(nèi)容的具體細節(jié),主要是設計類別,種類,數(shù)量,尺寸,以及預算和周期等; 

「為什么做?」是指甲方通過設計內(nèi)容想達到什么目的,是進行品牌的宣傳,還是獲得更多潛在用戶信息; 

「用在哪?」則是說最終完成的作品以什么途徑進行展示,線上還是線下,網(wǎng)頁還是包裝等。 

二.何為「明確」 

「明確」意味著,甲方向乙方所提供的需求內(nèi)容,皆為真實的,準確無誤的,有理有據(jù)的,不會隨意修改的。 

以上兩點,則為本文提及的「清晰明確的需求」的整體框架和詳細內(nèi)容。在真實案例中,還需要依據(jù)具體的情況進行增減和調整,靈活運用。 

不過萬變不離其宗,牢記「清晰」代表甲方的需求是系統(tǒng)和完整的,「明確」代表甲方對自己提出的需求是清楚和確定的,就能夠在實際操作中很好的運用。 


為什么需要甲方提出清晰明確的需求 

一.提出清晰明確的需求是甲方的工作職責 

在設計項目中,甲乙雙方擁有一致的目標,都是為了產(chǎn)出優(yōu)質的、令甲方滿意的作品。但在具體的工作過程中,雙方人員有不同的分工和職責。 



設計項目中甲乙雙方有自己的分工和職責

在整個設計過程中,設計師實際上是在充當“翻譯”的角色,需要根據(jù)其設計領域的專業(yè)知識、經(jīng)驗、和設計技巧,將甲方的需求以視覺語言的形式翻譯過來,最終呈現(xiàn)出與甲方企業(yè)品牌高度契合,并且能夠強化和凸顯品牌特色的作品。這些就是設計項目中設計師的工作職責。 



好的設計需要甲乙雙方共同努力

而完成好的設計作品,是甲乙雙方共同努力的結果。并且,最終能否做出有價值的、令甲方滿意的設計作品,取決于設計師對甲方需求的理解。而讓設計師充分理解甲方需求的一個重要前提,就是甲方已經(jīng)將自己的需求清晰明確地傳達給了設計師。 

雖然專業(yè)的設計師在做設計之前也會做很多的研究和背景調查,但對甲方各方面情況最為了解的,還是甲方自己。 所以,梳理出清晰明確的需求是甲方在設計項目中的工作職責。我的朋友小張產(chǎn)生了那么多的抱怨,也正是因為沒有意識到這一點。 

二.提出清晰明確的需求對項目推進有重要作用和意義 

1. 可以極大保障最終作品的質量 

真實的設計項目工作中,常常能聽到大家的抱怨,「完成工作不是最困難的,最難的是溝通」。 

這種抱怨有時來自甲方,「你理解錯了」,「我不是這個意思」,「你這個跟我想的完全不一樣」…… 

有時來自設計師,「為什么要改」,「到底要怎么改」,「到底要改成什么樣」…… 



甲方與設計師的矛盾:都感覺自己在對牛彈琴

可想而知,如果設計方始終在抱怨甲方?jīng)]說清楚,甲方又始終認為設計方?jīng)]有理解到位,那或多或少都會影響雙方工作人員的情緒,造成工期拖延,最終的作品也很難讓甲方感到滿意。 

所以,為了甲乙雙方共同的目標,請甲方人員按照前文對「清晰明確的需求」的解釋,盡量將自己的需求梳理完備。 

也請乙方珍惜甲方的勞動成果,結合自身的專業(yè)知識,好好理解和消化。大家共同努力,去攻克這個千古難題。 



需求溝通的目的是達成雙方的共識

2.可以節(jié)省甲乙雙方的時間和精力 

這一點,幾乎是毋庸置疑的。如果甲方在項目工作中對自身需求進行了系統(tǒng)的梳理,并將需求完整無誤的列出,那在和設計師溝通時,只需將提前準備好的需求對乙方進行傳達,同時也能夠更準確和迅速的對設計師的反饋做出判斷,從而給到進一步的修改意見。 

可以肯定的是,甲方前期的需求準備得越清晰明確,和乙方對接工作時所面臨的其他問題就會越少。相應的就能大大提高工作的效率,也有助于更好的完成設計項目的目標,促使甲乙雙方達到「雙贏」的效果。 



先思考 再行動


總結 

今天這篇文章的重點在于,「工作中,方法固然重要,但具有工作意識,認清自身工作內(nèi)容,并明白自身工作的重要性,也同樣重要」。 

有了正確的工作意識,才能找到問題的關鍵,那么解決問題的辦法自然就有了。 甲方提出清晰明確的需求,設計師才不會越幫越忙!





作者:子博設計          



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

信息設計

博博

在日常生活中,說明書、指路牌、做ppt、設計網(wǎng)站、繪制海報中等都需要信息設計。可以說,信息設計已經(jīng)滲透到了人們生活的方方面面,信息設計存在于我們目前看到的每一個畫面。

對于B端產(chǎn)品來說,信息設計的好壞,一方面決定了用戶在使用產(chǎn)品中的難易程度;另一方面也影響著后續(xù)當產(chǎn)品功能添加時,產(chǎn)品的延展性如何。

一、什么是信息設計?

信息設計是我一直較為關注的設計領域,從早期設計感性的純粹視覺思考,到現(xiàn)在越來越趨向于邏輯理性化的設計思維,這是一種設計提升的思維模式。

二、信息設計來源

在二十世紀七十年代,英國倫敦的平面設計師特格拉姆第一次使用了“信息設計”這一術語。當時使用該術語的目的僅為區(qū)別于傳統(tǒng)的平面設計以及產(chǎn)品設計等平行設計專業(yè)。從那時起,信息設計就真正地從平面設計中脫離出來,廣泛應用在其他領域。

信息設計的主旨是什么?

通過對信息圖表設計的基礎認識,從信息的收集篩選、應用情景構思方式、視覺表現(xiàn)到信息圖表的設計模式、制作流程等方法,設計出符合閱讀順序,使觀眾清晰有效閱讀的設計方案。這種準確、形象、快捷的傳達方式已經(jīng)顯示出信息設計方法獨特的優(yōu)勢。

三、信息設計的意義

信息層級的排列不僅影響視覺上的美觀度,更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景,我們不僅需要考慮清晰的傳遞業(yè)務價值,合理的信息層級劃分也是提高產(chǎn)品體驗的重要部分,好的信息層級則意味著更好的使用體驗。

一、用戶如何獲取信息?

試想一下,如果我們想要買一個手機,那么我們會如何買到手機呢?首先,我們會收集相關手機的信息,例如,先上網(wǎng)搜索最新的手機信息(向朋友詢問或者平時就有想好的品牌機型),然后我們的大腦會把這些信組合起來,得出買什么品牌什么型號的判斷。最后,我們在一堆信息中,提取出有效信息,進而指導自己的下一步行動。由此可見,我們獲取信息的步驟:

因此,我們在信息設計時可以借鑒以下基本思路。

1、根據(jù)自己的經(jīng)驗與用戶需求收集盡可能全面的信息

2、分析信息池中哪部分信息是用戶最關注的。

但是,當產(chǎn)品的目標用戶不止一類時,我們就需要考慮多方案滿足不同的用戶對信息的需求。例如,在電商平臺搜索商品,我們既可以通過店鋪搜索或商品搜索,也可以通過天貓?zhí)峁┑纳唐纺夸洏渲苯硬檎摇?/span>

3、思考如何信息呈現(xiàn),設計師更是需要思考如何呈現(xiàn)信息才能讓用戶更容易接受和理解,只有會組織信息,才可能打造一款用戶喜愛的產(chǎn)品。

二、如何分析判斷用戶行為?

檢測頁面的設計是否有效,需要我們對用戶的行為做分析。我們可以將用戶瀏覽頁面的行為也分為三個層次:

1、核心行為層:是指用戶首先關注這個頁面核心重點,觸發(fā)到的用戶首要、核心行為,對應信息分層的重點核心層。

2、了解行為層:是指用戶產(chǎn)生了解的意愿,繼續(xù)了解內(nèi)容的行為,對應信息分層的次要輔助層。

3、查看更多行為層:是指用戶接收到信息后尋求更多信息的行為,如行動按鈕、文字鏈接等交互行為,對應信息分層的詳細信息層。

所以,如果頁面設計質量高、信息層級傳達得準確,那么用戶的行為層次應該會恰好和頁面的信息層次相對應,這也是我們進行頁面設計質量檢測的標準之一。

既然信息層級設計對于使用體驗比較關鍵,那么怎樣做好頁面的信息層級設計則顯得尤為重要。

我發(fā)現(xiàn)網(wǎng)上的資料也是參差不齊,查閱到的資料幾乎都在講排版設計的四個基本設計原則:親密、對齊、對比、重復。這四個方法雖然有用,但在面對復雜層級排版時仍會面對困惑。因此我對頁面排版進行了進一步的探索及思考,今天我們來說說除去上面四大設計原則以外的方法:

一、信息設計的前置處理

平時我們很容易被忽略的一點,就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難,來來回回多次修改設計總是不滿意,但卻忽略了這些信息是否真實地被需要。

信息前置處理本質就是判斷我們當前所要呈現(xiàn)的信息是不是必要的。這也是日常工作中經(jīng)常遇到的場景,比如有時候產(chǎn)品給到了我們很多信息,可能僅僅是信息全部展開,所以我們在設計的時候就不能直接開始,需要通過當前頁面的業(yè)務場景去進行判斷,確定每個信息的合理性,兩個步驟進行判斷:

上述兩個問題的確認,會直接影響后面的信息設計排版。因此我們需要在源頭,比如去和產(chǎn)品或者業(yè)務溝通,弄清楚該信息呈現(xiàn)的緣由以及必要性,這樣能夠幫助我們最后理清楚信息層級。

那么如何進行信息前置的處理呢?

我們在進行B端產(chǎn)品信息設計時,可以圍繞“簡約四策略”進行設計。

英國易用性專家協(xié)會主席賈爾斯 ?科爾伯恩 ( Giles Colbore )的《簡約至上》一書詳細講解了簡約的四策略:刪除、組織、隱藏和轉移。

1、刪除

刪除是指將界面上不重要的內(nèi)容及元素刪掉,只保留對用戶來說重要的內(nèi)容。這樣不僅可以讓設計師在設計界面時只專注于重要的問題,也有利于用戶專心完成目標。設計目的是聚焦可用信息,去掉分散用戶精力的信息,從而為用戶提供價值。

我們在刪除的過程中,切記不要隨意刪除。刪除信息非常考驗判斷信息重要程度的能力,畢竟刪除了不該刪除的信息會給用戶造成不好的體驗。

2、組織

組織是指對確定下來的信息進行有層次的整理。如果我們不對篩選出來的重要信息進行有序的整理,那么用戶在使用過程中就會覺得很復雜,抓不住重點。

信息組織的要求是以產(chǎn)品定位和用戶需求為線索,先考慮信息展示的主題,再考慮信息的分類方式(如時間、 顏色、大小、字母等),最后將松散的信息組織起來,并保證信息間界限明確。

右圖進行了信息組織,明顯會比左圖看上去體驗更好

信息的重要程度就決定了我們需要將哪些信息作為主體,哪些信息作為次要輔助信息,哪些信息甚至可以收起或者省略。

3、隱藏

隱藏是指將用戶不常用的信息隱藏起來,在用戶需要時才出現(xiàn)。但是,我們要注意隱藏策略的使用方式。

第一,隱藏與刪除不一樣,刪除的信息是用戶不需要的、多余的,但隱藏的信息是用戶需要的,只是比較不常用而已。

第二,在設計信息隱藏時,要考慮清楚使用隱藏是否給用戶帶來了不必要的麻煩。例如,信息隱藏時沒有給用戶應有的提示,用戶就很難發(fā)現(xiàn)該信息。

成功的隱藏是什么呢?

首先,徹底隱藏需要隱藏的信息,只在合適的時機出現(xiàn)相關內(nèi)容。

其次,能在界面中給出細微的提示,讓用戶順利地找到隱藏信息。

最后,提示要在用戶的視線范圍內(nèi),如果超出了用戶的視線范圍,即使提示再明顯,用戶也看不到。

在B端產(chǎn)品設計中,有一個永恒的爭論話題:表格操作欄需不需要隱藏。

關于這個話題,一部分人認為不應該隱藏,原因在于隱藏了操作欄,用戶就會以為表格數(shù)據(jù)是不能操作的。另一部分人認為應該隱藏,因為每條致?lián)及巡僮鳈谡故旧絹?,感覺太多余。

這需要仔細分析,不能一概而論:

1、需要隱藏的情況:當表格列數(shù)很多、已經(jīng)出現(xiàn)橫向滾動條且操作欄的功能不常用時,可隱藏操作欄。當用戶將鼠標移到數(shù)據(jù)行上時,就會顯示操作欄的功能。

2、不需要隱藏的情況:當表格操作欄的功能都比較重要,一旦用戶操作頻率較高,無須隱藏操作欄。這時隱藏會導致用戶在操作時不直接。

3、隱藏一部分操作功能當表格列數(shù)很多、已經(jīng)出現(xiàn)橫向滾動條,但操作欄的部分功能很常用時,這部分常用的功能就無須隱藏。當用戶將鼠標移到數(shù)據(jù)行上,就會顯示操作欄中不常用的功能。

4、轉移

轉移就是將合適的信息放到合適的地方。

例如,我們在設計一個 B端產(chǎn)品注冊界面時,期望用戶除了填寫賬號、密碼、驗證碼以外,還期望用戶填寫生日信息。因為產(chǎn)品經(jīng)理希望在用戶生日時給用戶發(fā)送生日祝福,讓他們感受到產(chǎn)品的溫暖。想要再做用戶分層的時候,用年齡分層。但是,生日信息放在注冊界面顯然不合適,這時可以將生日信息填寫步驟轉移至用戶注冊完成后進行。當用戶完成注冊時,系統(tǒng)可以給予溫馨提示,告訴用戶 “你已完成注冊,當你填寫了生日,你將在生日的時候收到神秘禮物”。

注意:B端產(chǎn)品經(jīng)理在設計界面信息轉移時,要清楚該信息被轉移的原因,如果盲目地轉移,反而會讓用戶無法在合適的位置找到合適的信息,降低了用戶獲取信息的效率。確定了信息設計的前置的信息處理以后,就到了設計師的主場,信息的排版設計。

二、如何信息分層設計

在信息量較大的頁面中,設計師需要充分了解產(chǎn)品功能和用戶所需,對頁面的內(nèi)容進行劃分,明確各部分內(nèi)容的優(yōu)先級,建立信息層級。通常我們可以從產(chǎn)品設計的角度,可以將頁面信息劃分為3個層次:

1、重點核心層(吸引用戶)是指用戶在短暫的 3-5 秒內(nèi)瀏覽頁面后,最能夠吸引他的核心內(nèi)容。這部分也是頁面的核心功能、是頁面最想展示給用戶的內(nèi)容,必須少而精,在設計中需要突出展示。

2、次要輔助層(幫助理解)是指用戶被重點核心信息吸引后,進一步在頁面中停留 3 – 5 分鐘,就會閱讀相關的、幫助了解核心內(nèi)容的輔助信息,如說明信息或其他相關功能,這部分信息比較重要,但不需要強化展示。

3、詳細信息層(詳細了解)是指更多的信息或補充信息,詳細信息層會以更多的交互方式展示信息。這部分信息并不十分重要,但也需要展示。

三、信息設計的排版處理

B端產(chǎn)品業(yè)務比較復雜,頁面內(nèi)容也會較多,信息的有效組織尤其重要。信息設計不是簡單的內(nèi)容堆砌,需要根據(jù)用戶場景和需求做出優(yōu)化處理,構建有效的信息的層級幫助用戶去理解業(yè)務內(nèi)容。

總結出以下五種方法來幫助我們更合理地進行信息設計:

1、信息分組

信息分組是最常用的設計形式,能夠將復雜的信息打散重組,聚合相似信息,分割差異化信息,有助于降低信息的復雜性,幫助用戶快速定位信息、瀏覽內(nèi)容,從而降低頁面整體的復雜度。

常用的分組方式有三種方式:間距、分割線、卡片。

我們可以根據(jù)信息復雜度更好地選擇分割方式,讓界面的表達清晰明確。

  1. 復雜程度低,優(yōu)先選用留白分隔,視覺清爽無干擾。
  2. 當留白效果不明顯時,建議采用分割線,讓信息層次更清晰且屏效高。
  3. 如果需要進一步強化條目本身的邊界感,可以采用卡片,這樣可以強化條目信息的視覺層次和可操作性。

2、組件拆分

面對復雜的信息內(nèi)容,用戶容易產(chǎn)生退縮情緒,組件是目前大部分設計師在進行信息排布時必備的部分,包含:

1、樹形結構:對于有關聯(lián)性的多層級非常適合,可以將復雜的層級結構進行收攏,從而能夠顯著降低信息的復雜度。

2、表格結構:對于信息多且關聯(lián)性不大的復雜信息,可以聚合到表格來進行呈現(xiàn),但表格的呈現(xiàn)方式不宜濫用,需要根據(jù)我們場景來進行選擇。

3、分步驟:將復雜內(nèi)容分步拆解,把用戶的關注點從頁面內(nèi)容轉移到步驟進度上,可以減少用戶的心理壓力。另外節(jié)點信息頁也可以幫助用戶更好地理解業(yè)務流程。

4、tab標簽:更適合同級的數(shù)據(jù),對于同類型的結構可以更好地將頁面進行拆分,從而讓當前頁面更簡潔。

3、頁面整體布局設計

通過改變布局的設計方式,我們可以將多層結構的樣式通過拆分布局來將其控制在三層內(nèi)。這里底層邏輯就是當遇到相對比較復雜邏輯時,我們可以考慮通過改變結構來減少其復雜度,如下圖:

4、信息融合

我們可以利用信息融合的形式來減弱其對層級的影響。信息融合從本質上講就是將某兩種層級信息通過不同的組合方式,讓其融入到同一個層級中。

在進行B端布局時,信息融入用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間,還能夠降低信息層級的復雜度。

但在進行信息融入的過程中,我們需要注意的是:如果放在同一層級會造成理解上的誤解時,這個時候不要采用該方案。比如搜索框的位置,放在哪個層級決定了對應的搜索范圍。

5、信息弱化

信息弱化的原則是,將某些超出層級的部分進行弱化。比如有5個層級,但其巧妙地將功能篩選融入到了當前的結構中,使得即使超過3層我們也不會覺得其特別復雜,如下圖:銷氪平臺就對數(shù)據(jù)和視圖切換行進行了弱化,雖然還是有4種層級,但從視覺感知的層面上不會覺得視覺凌亂。

通過上述5種方案:信息分組、組件拆分、更改布局、信息融入、信息弱化,我們可以將大部分層級過多的復雜信息簡化,從而讓我們最終的頁面呈現(xiàn)不會太過復雜,更容易被用戶理解。

一、減少頁面元素設計

不同于C端產(chǎn)品,B端產(chǎn)品更強調效率。正如奧卡姆剃刀原則所說“如無必要,勿增實體”。

頁面內(nèi)容需要以簡潔為主,避免無關要素形成信息干擾。而設計師更加感性,擔心設計過于平淡,會在界面中添加各種視覺元素,反而會增加用戶的認知成本。

體驗設計行業(yè)需要創(chuàng)新,但是B端產(chǎn)品設計需要更加謹慎,尊重用戶的習慣,完整表達業(yè)務邏輯性、保證內(nèi)容的可理解性,是設計師必須去關注的。


二、卡片是用線框還是背景

當你想用卡片來對信息分組時,你有沒有糾結過到底是用線框卡片還是背景色填充呢?經(jīng)過多次糾結和多次的設計對比,我發(fā)現(xiàn)分組方式其實也包含著一定的規(guī)則:

1、取決于卡片的數(shù)量

如果卡片少,用色塊;

如果卡片多,用線框,你會發(fā)現(xiàn)卡片過多時,線性設計會讓頁面顯得更整潔和清新,色塊設計就會讓頁面顯得更厚重。

2、取決于頁面的視覺重心

當你整個頁面都全是線框時,你可以利用色塊的卡片來達到突出頁面重心的效果,讓整體頁面沒有那么單調,可以看到下圖的例子,右側的頁面會相對更穩(wěn)重一點。

三、底色用灰色塊還是彩色塊

在進行色塊時,時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區(qū)分呢,我們應該何時使用這兩種色彩呢。

可以看出目前這兩種顏色的運用更多的是功能上的區(qū)分:

1.彩色背景更適用于「想要引起用戶注意的界面」,比如一些功能引導或者營銷性質的頁面。從表現(xiàn)性質上來講更重。

2.而灰色背景更適用于「利用灰色背景來區(qū)分層級關系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。

四、可視化設計

在某些特定的場景下,內(nèi)容頁面也可以通過可視化展示幫助用戶理解信息,例如常見的身份證圖片上傳等,很多用戶無法分清楚正面反面,借助圖片可視化提示,便于用戶更好地理解信息。




作者:789研習社      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

交互設計十大原則

博博

十大交互設計原則-尼爾森十大可用性原則

交互系統(tǒng)設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析,關注以人為本的用戶需求。

交互設計有許多的方法和理論,如格式塔心理學原理、尼爾森可用性原則、7±2法則、3次點擊法則、功能可見性原則、菲茨定律等。

詳解尼爾森十大可用性原則

一、預見性原則

系統(tǒng)應當在適當?shù)臅r間內(nèi)快速讓用戶知道當前所處的狀態(tài),即無論單擊、雙擊還是滾動都會給用戶一個反饋,讓用戶對過去發(fā)生、當前目標、以及對未來去向有所了解,防止用戶出現(xiàn)錯誤操作。

常見的反饋有刷新提示、加載提示、支付提示、下載提示、進度提示等(具體見#產(chǎn)品中的反饋機制#文章)

示例:進度條、已讀文章標題變灰



二、場景化原則

軟件的使用更符合現(xiàn)實的場景,通過直觀的視覺來貼近真實的世界,比如使用易懂和約定俗成的表達。

示例:圖標ICON等圖形化手法代替純語言文字(音樂播放轉盤)



三、可控性原則

產(chǎn)品需要支持用戶“反悔”,即在用戶出現(xiàn)誤操作時,需要給用戶提供“緊急出口”,做出“撤銷”“返回”“取消”“重做”等功能。

示例:微信聊天的撤回及重新編輯功能;備忘錄的恢復刪除功能



四、一致性原則

產(chǎn)品的信息架構、交互方式、視覺表現(xiàn)等應該具有一致性,主要包括結構一致性、色彩一致性、文字一致性、操作一致性、反饋一致性



五、防錯原則

給用戶錯誤的提示不如在用戶發(fā)生錯誤之前避免它,可以幫助用戶排除一些容易出錯的情況,或者進行二次確認。

示例:微信朋友圈編輯內(nèi)容后點選返回會出現(xiàn)是否保留此次編輯的彈窗以及在付款頁面等重要操作之前給出彈窗是否確認支付,銀行卡號輸入時自動以4位數(shù)字為一組便于用戶輸入防錯



六、協(xié)助記憶原則

將用戶的記憶負擔最小化,盡量減少用戶記憶信息,應該提供信息讓用戶辨認。

示例:淘寶的搜索功能,使用關鍵詞聯(lián)想要搜索的內(nèi)容,避免有些商品名稱記不全可以輕松搜索到;引導頁的新功能提示



七、靈活高效原則

既能保證第一次使用者能清晰明白功能,又能給老用戶提供更高效的使用方式,允許用戶可以定制常用功能。

示例:支付寶首頁可以自定義放置常用功能;餓了么訂單頁面支持用戶再次購買上次的菜單,不需要重復選擇



八、輕量簡約原則

去除冗余和不相關元素,適當留白,讓功能突出,不會分散用戶注意力,簡潔精致的圖形能留下深刻的印象。

示例:知乎、簡書等內(nèi)容為主的產(chǎn)品,減少元素使用,讓用戶聚焦內(nèi)容,提升用戶體驗



九、容錯原則

盡量幫助用戶從錯誤中恢復,讓損失降到最低。指出錯誤信息,并給解決建議。

示例:word的自動保存功能;登錄頁密碼輸入錯誤,給出錯誤提示并修改建議



十、人性化幫助原則

當用戶需要幫助時給予用戶適當?shù)膸椭肟?,幫助文檔要易于查找, 專注于用戶任務。

示例:微信 、淘寶等頁面的幫助與反饋




作者:Nanngua      來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

最簡單的設計就是最好的設計

博博

我們都會有一種習慣,越是對一件事情經(jīng)驗豐富,我們就越容易把事情想(做)得復雜,設計師也是如此,我們很容易過度思考,導致我們最終的解決方案很復雜。

這樣看來好像我們是為了用戶體驗而想盡辦法,但是最終會分散和混淆用戶的意志力,反而讓用戶體驗更糟糕。

怎樣讓我們在設計中做到“化繁為簡”呢?這時候我們可以用到一個定律“奧卡姆剃刀定律”。

首先要說明的是“奧卡姆剃刀定律”它來源于哲學,就像“菲茨定律”、“希克-海曼定律”和“米勒定律”一樣,它們出自心理學和物理學,它們都不是直接為了設計而出現(xiàn)的。



但是它們提出的原則是可以運用在設計中來提升我們的設計和用戶體驗?;蛟S有人已經(jīng)無形之中運用了這種方法,但是并不知道它的背后竟然還有這么一個理論。

在設計時,我們運用奧卡姆剃刀原則,剔除那些不必要的元素(視覺、交互、功能等),如果兩個產(chǎn)品有相同功能時,奧卡姆剃刀的原則是建議選擇更簡單的。



因此我們在做設計時務必分析每個元素是否必要,在不影響整體功能的情況下應該盡可能的減少不必要的元素。

在如今強大的互聯(lián)網(wǎng)時代和強大的設計工具下,設計師很容易忘乎所以,在設計時往往將簡單的需求設計得非常復雜。

它們可能是一個很多功能和信息的網(wǎng)站,但是卻很難使用和維護,有人認為我的網(wǎng)站設計就應該做得更多,它應該擁有更多的功能和信息,但實際上應該做得更少。

一旦出現(xiàn)這種想法時我們應該問自己,我們最開始的目標是什么?我們要解決的真正問題是什么?

01|奧卡姆剃刀講了什么

背景

十四世紀時期(文藝復興時期),歐洲的學者們忙于“辯論”(打嘴炮),把研究“似是而非”的東西當作智慧的象征。



例如:

黑色的白色是否存在

上帝的噴嚏是哈欠還是電閃雷鳴?

不是張三也不是李四的人本身是否存在?

在這些毫無意義的“口嗨”中,奧卡姆實在是看不下去了,奧卡姆覺得他們的爭論是毫無意義的,由此他提出了奧卡姆剃刀定律:如無必要,勿增實體。與我們中國哲學中的“大道至簡”有異曲同工之妙

觀點

奧卡姆剃刀的觀點是“不要浪費較多的東西去做用較少的東西同樣可以做好的事情”,簡單點就是“如無必要,勿增實體”

拉丁文形式有以下幾種:



我們可以從三個方面來解釋這個觀點:









相關觀點



02|設計與奧卡姆剃刀定律

從三個解釋奧卡姆剃刀的觀點我們可以引申出設計中的一些方法:

如果一件事情可以用已有的“A”來解釋,那么就不要再去發(fā)明“B”來解釋這件事,新的這個解釋可能存在漏洞。 



這一條與雅各布定律中表達的想法是一致的,雅各布定律講“用戶會將大量的時間花在其他的網(wǎng)站(產(chǎn)品)上,而不是你的網(wǎng)站(產(chǎn)品)”。那我們在設計前就應該多看,一名優(yōu)秀的設計師除了具備良好的理論知識和高超的技能外,還應該有開闊的眼界。

擁有開闊的眼界你才會知道原來已經(jīng)有了這么好的設計解決辦法,而不是固步自封的“創(chuàng)新”。

如果已經(jīng)有了一種很好的設計方案"A"或者是某一個功能的設計大家已經(jīng)有了一個統(tǒng)一的標準,那么我們在做同類設計的時候最好的方法是與之保持一致性,不要再去做設計“B”,因為新的設計“B”可能會比設計“A”更難用,然后最終導致這個設計是一個失敗的設計。當然。如果你有成本能接受創(chuàng)新后的失敗,那么也可以嘗試,但最好的還是先選擇設計“A”。

這一點其他詳細內(nèi)容可查看雅各布定律

如果同一件事情有N種理論來解釋,那最簡單的便是正確的。 



在設計一個功能的時候,如果我們設計了幾種方案,或者在計時有幾種交互方式方案,那么最簡單的交互方式肯定是最好的。

能夠N次做好的事情,就不要用N+1次來完成。 



這一點我們可以理解為“降低復雜性的最好辦法就是避免復雜”,如果一個交互或者是一個步驟,能用N次來解決,那么我們就一定不要讓他用N加一次來解決這個事情。

03|奧卡姆剃刀的運用

剔除設計中不必要的元素,直至沒有可以剔除的元素

第一刀,要斬在用戶的需求當中。



當我們接到用戶的需求時,用戶會根據(jù)自己想要的東西而提出很多的需求,有些是可以采納的,有些卻又是不可取的,用戶并不會意識自己的對錯,他們只會說我想要這些東西。

那匹馬的故事大家應該都聽過,但經(jīng)典的例子還是可以一直舉著:

一百多年前,福特公司的創(chuàng)始人亨利·福特到處跑去問客戶:“您需要一個什么樣的更好的工具交通工具?”

幾乎所有人的回答都是:“我要一匹更快的馬”。 

很多人聽到這個答案后就跑到馬場去選好的馬匹配種,以滿足客戶的需求。 

但是福特并沒有立馬去馬場,而是接著往下問。 

福特:你為什么需要一匹更快的馬? 

客戶:因為可以跑得更快! 

福特:你為什么需要跑得更快? 

客戶:因為這樣我就可以更早地到達目的地! 

然后福特發(fā)明了汽車,很地滿足了客戶的需求。 

我們可以說這是剔除現(xiàn)象看本質,看清用戶到底需要什么,我們做出的產(chǎn)品才會是好產(chǎn)品。

第二刀,要斬在產(chǎn)品經(jīng)理的原型中。



UI設計師最忌諱的就是拿到原型就直接開始設計,這樣做是很危險的。拿到原型的第一時間應該把刀直接架在原型上,反過來推動我們思考,什么東西是必須展示出來的,哪些直接去掉,哪些可以隱藏起來等等,又或者是哪些流程最好一步解決,哪些分開解決??偠灾?,這一刀是讓我們設計師在設計前對產(chǎn)品的原型有所思考。

第三刀,要斬在我們自己設計出的頁面中。



正如前面所說的,越是經(jīng)驗豐富越容易將事情做復雜,有時候為了追求設計上的美感,或是完美的用戶體驗反而將設計做得復雜了,而這一刀的作用就是在我們完成設計后用來自我檢查的,剔除我們設計中不必要的元素。

史蒂夫·喬布斯的極簡主義

提起簡單性最具代表性的就是“蘋果”,它的創(chuàng)始人斯史蒂夫·喬布斯就是一個極簡主義者,喬布斯在會議中會問大家“我們下一步應該做的十件事情是什么?”喬布斯會將大家的建議記下來,然后再刪掉一些他認為愚蠢的,最后剩下最終確定的前十大“最應該做的事”。喬布斯會把最后七件全部都劃掉,最后宣布只做前面三件事。



還有一個故事就是,在設計iPod時其中有一個設計方案是有可拆卸內(nèi)存卡的插槽,喬布斯覺得它太復雜了所以沒有選,第二個是轉盤的設計代替按鍵的設計,轉盤的轉動可以讓我們快速的下拉列表,而如果是按鍵找歌可能需要按幾百次。

自從項目開始,喬布斯每天都投入其中。他最主要的要求就是“簡化!”他會瀏覽用戶界面的每一個頁面,并且會做嚴格的測試:如果要找某一首歌或者使用某項功能,按鍵次數(shù)不能超過三次,而且按鍵的過程要自然。如果他覺得導航不夠清楚,或者需要按鍵三次以上,他就會非常生氣。

當然還有后續(xù)iPhone、iPad、MacBook的設計也同樣如此,喬布斯對于產(chǎn)品一生都在追求極簡設計。

喬布斯的故事有很多,畢竟他是一個極簡主義者,有興趣的可以去讀一讀《史蒂夫·喬布斯傳》

04|總結

簡單≠容易,復雜≠完美,就像《小王子》的作者安托萬·德·圣??颂K佩里說的”完美不是在沒有什么可以補充的時候實現(xiàn)的,而是在沒有什么可以帶走的時候實現(xiàn)的“

奧卡姆剃刀并不像“費茨法則”那樣有明確公式告訴你怎么做,例如將按鈕放置在用戶最快能點擊的地方,按鈕的大小應該減少用戶調整的過程,使用戶能快速的擊中目標。

奧卡姆剃刀在設計中的運用沒有直接針對某一項設計,它算是對設計師思想上的一種指導,就像它指導其他科學家在科學創(chuàng)造中那樣,它是一種方法,可以指導你在設計中思考問題時如何做出更好的選擇和設計。



作者:宇宙設計大本營      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

一起來了解“交互設計文檔”吧

博博

大部分的設計師應該都沒有見過所謂的“交互設計文檔”吧?在實際工作中,所謂的交互設計文檔是由交互設計師所輸出的,但是大部分的互聯(lián)網(wǎng)公司是沒有交互設計師的。交互設計師的工作內(nèi)容被UI設計師與產(chǎn)品經(jīng)理相互分攤。那公司為什么不招聘一個交互設計師崗位呢?(boss:呵呵~一個人能完成的任務為什么要兩個人?。?br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" /> 所以本篇文章為了讓我們設計師能夠很好的了解什么是交互說明文檔?它是干嘛的?有什么用?如果制作?有哪些內(nèi)容等多方面全面了解。(哪里有了解的不到位錯誤的地方,也希望各位大神多多指點相互學習。讓我卷~)

一、交互設計文檔

什么是交互文檔?

交互文檔,即交互設計說明文檔(英文名“Design Requirement Document”)。又稱“DRD文檔”。用來承載交互說明、交互原型、項目背景等內(nèi)容,存檔并交互項目相關伙伴的團隊協(xié)作文檔。

為什么需要交互文檔?

也許你想到:什么?交互文檔(DRD)我壓根沒見過,這難道不是口頭說說就行嘛?無需交互設計師。(大部分公司的交互文檔是由UI設計師/產(chǎn)品經(jīng)理來撰寫)但是有的公司產(chǎn)品也分擔著UI設計師的工作.......只要你如果優(yōu)秀干啥都行,不優(yōu)秀話語權都沒有。(比如我們這些“小美工”。職位只是對一個工作的劃分不代表對你能力的劃分,只是公司的一種小手段~

回歸正題,作為交互設計師,工作職責起到“對接上下游,承上啟下”的作用,不論是在方案評審的講解,還是日常的工作溝通,都應具備優(yōu)秀的溝通能力、語言表達和DRD表達能力。而DRD不僅能完美的詮釋出產(chǎn)品的內(nèi)容和需求,還能夠為產(chǎn)品出一套完整的設計規(guī)范,讓產(chǎn)品保持一致性,方便團隊協(xié)作減少溝通成本,也方便后期的修改。



DRD是利于團隊協(xié)作的媒介,也是產(chǎn)品規(guī)范與項目總結的重要輸出文檔。

交互文檔給誰看?

交互文檔撰寫并不是只有給自己看,最重要的是給:產(chǎn)品經(jīng)理、UI設計師、開發(fā)(最需要)等等。并且作為交互設計師的輸出物,交互文檔是聯(lián)系開發(fā)流程上下游的重要文件,它需要具備良好的可讀性、唯一性和時效性。

產(chǎn)品經(jīng)理

首先不同公司,不同團隊產(chǎn)品經(jīng)理與UI/UX設計師之間的配合輸出物是不固定的。

1. 大部分公司,產(chǎn)品經(jīng)理細心點會連交互說明和原型一起出了(包含在PRD文檔里),但是大部分會出現(xiàn)體驗層的漏洞。

2. 如果公司產(chǎn)品是負責傳一句話,有交互設計師的情況下,交互需要從功能規(guī)劃、信息架構、原型說明一起搞了。

3. 還有在小公司比較罕見的流程就是產(chǎn)品搞PRD,交互搞交互文檔,彼此之間的邏輯可以互相印證。

UI設計師

作為交互設計師的下游,我們也需要較早的介入需求溝通之中,提早避免后期可能存在的問題出現(xiàn)。

(但是很多時候交互設計師就是我們自己)


開發(fā)(前端設計師)

開發(fā)是最需要看交互文檔的重要成員之一,因為他決定著產(chǎn)品的邏輯以及頁面的跳轉流程、交互方式、動效方式等等。(不過大多數(shù)公司只有簡單的PRD文檔,開發(fā)也只是簡單看看~)

二、交互文檔(DRD)如何撰寫?需要有哪些內(nèi)容?

你習慣用什么工具撰寫交互文檔?PPT、Sketch、AI、Axure … ?
你習慣用什么格式輸出你的交互文檔呢?PPT、PDF、HTML …?
其實使用什么工具都無所謂,只要能夠正確的描述出交互文檔所需要表達的內(nèi)容和邏輯就行。(就是誰都看得懂)



我比較喜歡使用Axure軟件撰寫交互設計文檔,大家可以根據(jù)自身愛好或者公司規(guī)定進行選擇(例如sketch、figma、PS等等..都是可以的。

說了這么多,究竟交互文檔包含哪些內(nèi)容呢?
一般來說,一份最基本的DRD文檔需要包含:DRD封面、更新日志、文檔圖例、產(chǎn)品背景、頁面交互、業(yè)務流程圖、交互原型、回收站等模塊。



DRD封面

DRD封面:包括產(chǎn)品/項目名稱、版本編號、撰寫時間、撰寫人等基本信息。按需可增加參與該項目的各方負責人。(如:產(chǎn)品經(jīng)理,交互設計師,視覺設計師,開發(fā),測試,團隊名稱等)



更新日志

更新日志,包含具體新增或修改的內(nèi)容,修改人,修改日期等信息。在實際工作中,方案的修改和優(yōu)化是不可避免的。更新日志方便項目成員一目了然關注到重點更新的內(nèi)容,也方便開發(fā)找到對應的負責人進行溝通,提升工作效率。



文檔圖例

針對你在該文檔所用到的圖例進行說明,輔助閱讀(如:操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。)。特別適合剛入團隊,首次閱讀你DRD文檔的人來講,是非常有利于團隊成員對你文檔的理解。



產(chǎn)品背景 

可包括一些項目背景、需求分析、用戶調研、競品分析等。用于設計思路的整理和記錄,方便閱讀,方便參與評審會的人理解整個項目背景下的設計思路,也方便日后總結與溝通。但無需將所有的分析內(nèi)容都放入,結構化整理重點內(nèi)容放入即可。



業(yè)務流程圖

業(yè)務流程圖的目的就是梳理并分析優(yōu)化業(yè)務流程。我知道很多同學做UI設計師的時候可以完全不管業(yè)務,直接做設計,但是作為交互設計師了解產(chǎn)品業(yè)務是非常重要的,因為不了解業(yè)務你就無法完成交互設計,優(yōu)化業(yè)務場景。
舉個例子:在教育考試系統(tǒng)中一般流程是:教育局出通知→學生報名考試→老師審核→報名通過→老師編排學生考試名單→學生開始考試對號入座→教育局公布成績→學生查詢成績→考試結束,看這一些列的流程,因為關聯(lián)特別多,如果對業(yè)務不熟悉的話設計起來會非常的不便,如果前期因為業(yè)務流程不熟悉而設計出錯誤的交互稿的話,后面就會特別麻煩。

如何繪制業(yè)務流程圖?

一聽: 先聽客戶/產(chǎn)品介紹。以最簡單的方式了解產(chǎn)品重點,即基本要素中的角色、活動、協(xié)作關系梳理出即可。
二溝通: 完成上一步后,就可以進行提問了。主要是沿著流程進行發(fā)問,重點放在分支、產(chǎn)物關系上??纯词欠翊嬖诜种У那闆r,各協(xié)作之間是否有交付物。
三確認: 最后一步就是自己講一遍流程,和客戶代表或者業(yè)務產(chǎn)品進行確認是否有理解偏差的地方。



以醫(yī)院APP取號業(yè)務為例

頁面交互

頁面交互是交互文檔的主要內(nèi)容可以詳細說明界面中元素的來源,控件的交互方式,數(shù)據(jù)的樣式,字段的長度規(guī)定,頁面元素的狀態(tài)變化等。每個交互頁面的內(nèi)容應該包括:文檔頁面標題、界面標題、界面、設計說明。

文檔頁面標題:一般在每一頁文檔的頂部。寫明當頁內(nèi)容是屬于哪個模塊或流程的,讓看的人不容易迷失;
界面標題:注意命名,方便交互稿中的互相聯(lián)系,如“跳轉【XX頁面】”,“回到【XX界面】狀態(tài)”;
界面:界面尺寸建議按實際界面的比例縮小,避免你想當然的設計并不符合規(guī)范,也避免一個界面太大影響閱讀效果;
設計說明:邏輯關系、操作流程或反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài) 等等,都可以放在設計說明中;





作者:不知名小明      來源:站酷

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

萬字透析 [行為設計與觸發(fā)式引導] 賦能體驗

ui設計分享達人

循序漸進的內(nèi)容結構,不放目錄了,內(nèi)容框架如下:

1. 為何說應用程序是一種行為設計

————用戶行為視角進行設計和解決問題

2. 行為設計下的設計模型理念

————運用模型理解行為、設計行為

3. 行為設計不能沒有用戶引導

————挖掘行為設計重要的部分“引導”

4. 正在被濫用的用戶引導

————煩人的引導信息源源不斷

5. 善用觸發(fā)式引導賦能體驗

————讓觸發(fā)式引導更棒的5個建議
————新一輪的趨勢,克制與降噪

分割線-------------------------------------

應用設計為啥要行為設計視角?是因為酷還是更有挑戰(zhàn)性?可拉倒吧,我都癱工位上了還卷啥?只是在實際的設計過程中,通過觀察或共情用戶行為可以反映出很多問題,可以幫助洞察出更多價值或新的機遇。

此前我在試圖尋找一款具還不錯的機械美感鼠標,但是沒有一下子找到合適的,準備第二天摸魚的時候再看看,結果第二天上午十點左右,手機回復消息時,就收到了一條淘寶的通知。是關于鼠標的,你猜對了,之后我就順勢打開了淘寶,看看是否會有新的收獲,淘寶根據(jù)我的搜索行為記錄,果然在首頁零零散散穿插了不少鼠標,我在首頁看到了一張鼠標商品圖,我迫不及待的點開,結果發(fā)現(xiàn)是穿了身衣裳的羅技G502HREO,不禁感嘆道這些商人們的洞察力。 


那么回過神來,你是否已經(jīng)感受到了行為視角加一點點同理心一點點洞察力,就可以產(chǎn)生如此奇妙的價值?

1|應用程序就是行為設計

1.1|數(shù)字化應用下的用戶行為

應用程序本質就是數(shù)字化服務,只是將行為方式進行了轉變,以及采用了網(wǎng)絡進行信息交互。當我們有了需求后就會使用這些應用程序提供的功能完成需求。比如原本要在菜市場才能完成選菜、選量、付錢、帶回家,而通過數(shù)字化服務則可以足不出戶,在手機設備上完成購菜。當然了,這也意味著行為方式或成本的變化,但是本質不變。



數(shù)字化視角下,我們看見用戶實現(xiàn)需求僅僅是手機上敲敲打打就做到了,而其本質只是調整了實現(xiàn)的行為方式,基本就是內(nèi)容輸入輸出、查看選擇、傳遞交換,再深入點就是界定用戶輸入什么輸出什么,看見什么選擇什么等一系列設定,自下而上來看,就是圍繞產(chǎn)品服務或產(chǎn)品目標展開,然后界定功能服務的范圍與內(nèi)容范圍,通過交互與信息框架定義用戶行為的方式與范圍。 



1.2|功能背后是行為的精心編排

應用本身就像是一個行為框架,盡管不能嚴格控制,但它規(guī)定了用戶行為的方式、范圍、路徑以促導用戶實現(xiàn)需求,表象是各種功能的設計,而背后也可以看做是用戶行為的精心編排,而超出預期的用戶行為則可以看作違規(guī)或設計漏洞,而我們通過數(shù)據(jù)埋點或數(shù)據(jù)分析來密切關注用戶行為,也正是為了檢驗設計編排是否合理或滿足商業(yè)預期,如此看來我們?yōu)楹沃匾曈脩粜袨榕c數(shù)據(jù)收集也就很好解釋了。

1.3|行為視角的三級維度兩層映射

或許你在疑惑知道了行為設計視角又如何?實際在產(chǎn)品設計過程中,行為視角確實能帶來太多驚喜,以至于一些場景化交互問題,我會代入行為視角思考每一步行為過程,而不是單純的考慮流程與線框圖。我認為行為表現(xiàn)能夠清晰反映出一個用戶的特征,當我們說通過一個人的行為表現(xiàn)了解對方時,也就這個意思啦,愈發(fā)真實自然的行為表現(xiàn)越能反映出一個人的特征畫像,這應該也是為什么HR會用“行為面試法”來篩選應聘者的原因吧。



那么回到應用設計上,當我們通過技術手段收集到了用戶數(shù)據(jù),也只是一些數(shù)值罷了,唯有清楚數(shù)據(jù)涵義并結合用戶行為視角,才能夠分析還原出更有價值的信息,當獲取到足夠的用戶行為信息后,我們就可以還原出相對真實的用戶特征畫像,以用于行為設計分析改善,來驅動產(chǎn)品體驗或是商業(yè)目標。



2|行為設計下的設計模型應用

說到行為設計,不得不提到HOOK模型與福格行為模型吧,一個產(chǎn)品往往不僅需要行為設計也需要習慣培養(yǎng),唯有這樣才能使得用戶能夠熟練掌握應用并產(chǎn)生粘性,HOOK上癮模型,一個關于如何讓用戶對產(chǎn)品上癮或培養(yǎng)習慣的模型;福格行為模型,解釋用戶發(fā)生行為的條件與關系式的模型。

2.1|行為的開始:福格行為模型



簡單概括就是要產(chǎn)生行為,就需要一瞬間產(chǎn)生內(nèi)在的行為動力“動機”,并且有足夠的“能力”執(zhí)行,還需要適當信息提示來助推行為產(chǎn)生。我用人話解釋一下哈,在此前了我們玩一個動動手指就行的小游戲。

一、首先伸出左手,掌心面朝自己;
二、然后仔細盯著中指的末端;
三、為了更佳集中注意力,把其他四個指頭慢慢握攏;

好了,是的就好了,這個過程中,我說開始一個小游戲其實就是為了形成一個動機,而后續(xù)一系列步驟引導就是對應的觸發(fā)信息,當然了動動手這么簡單的事兒,我相信大家能力十足。其實這個模型就是告訴我們要想行動起來就要讓你“想做、能做、開始做”。

首先是一個開始:提示觸發(fā)
第一個是來自我自身或腦海里的提示觸發(fā),通常管這個叫做需求,洋氣點叫做“內(nèi)部觸發(fā)”,比如剛剛肚子叫了,感覺有點兒餓了,當然了這些“內(nèi)部觸發(fā)”隨機且不穩(wěn)定,來自我們的心理活動以及身體本能。
而生活場景下的各種應用程序則需要媒介對我們產(chǎn)生觸發(fā),與之前“內(nèi)部觸發(fā)”相反,這些誘因我們稱為“外部觸發(fā)”,你在生活中看見的廣告、好友安利的商品、手機通知消息、小紅點提示、鈴聲震動等一系列均是外部觸發(fā)。

具備一個行為動力:動機
凡事我們要做出行動前都會有一個動機,還記得剛剛我說肚子餓了嗎?是的,于是大晚上的我想搞點兒燒烤吃吃,想到肉香四溢,酒足飯飽的感覺真是快樂啊,也不用吃藥抑制胃酸過多的痛苦了。
而讓你打車的動機、點外賣的動機、網(wǎng)購鼠標的動機、打開網(wǎng)頁閱讀的動機,你是否已經(jīng)清晰看見,總歸是有一個的,甚至會有多個。



能夠進行執(zhí)行的條件:能力
當一切剛剛好,觸發(fā)有效,動機也有,可以做了嗎?不不不,能力才是執(zhí)行的硬核條件,如果我的能力相差懸殊我可能會直接放棄或降低預期調整目標,所以我想到燒烤店就在小區(qū),票子也足夠,腿腳也麻溜,這不,燒烤已經(jīng)擰在手里了。所以你看,現(xiàn)在的應用程序不斷在降低操作難度或消費門檻不就是這個理兒嗎?


*你白天忙沒時間娛樂?沒關系,直播午夜檔、24小時轟趴派對等候你。
*你工作完腦力體力有限?沒關系,這些短視頻幽默好玩不費腦,不喜歡輕輕一劃下一個,不想滑?沒事兒,短視頻已經(jīng)在流行自動播放下一個呢!
*最近手頭緊了?沒關系,咱們的商品統(tǒng)統(tǒng)優(yōu)惠哈,還能分期付款,再不行還能組團砍一刀來點兒優(yōu)惠。



產(chǎn)品設計中的可用性、易用性、統(tǒng)一性各種交互定律,以及各種營銷手段不就是在不斷的降低難度促成用戶行為的發(fā)生嗎?總之產(chǎn)品會想辦法讓你更輕松用起來,讓你慷慨消費起來。

大概是該動一動了:行為
就像前面動動手指的游戲一樣,當行為發(fā)生前的三個條件同時滿足時,我就該動起來了,我的行為向著動機目標有序的進行著。

2.2|行為的習慣:HOOK上癮模型



HOOK上癮模型的核心在于使用產(chǎn)品后,會獲取酬賞激勵,我們?yōu)榱俗非蟾嗟幕映曩p,以加大投入,并且持續(xù)的投入會提升對產(chǎn)品的價值積累,同時我們行為上就會不斷的反復,之后就會留下慣性的操作模式,即習慣。整個過程中觸發(fā)與行為部分即福格行為模型部分,而新的部分主要包括多變的酬賞與投入部分;


多變的酬賞:激勵上癮的根因
社交酬賞:產(chǎn)品社交互動中的反饋激勵,例如常見的分享點贊、評論互動、人際關系建立等,在社交類產(chǎn)品中是極具分量的部分,良好的社交酬賞能夠很好的激勵用戶參與互動與自發(fā)的創(chuàng)作內(nèi)容,屬于UGC重要的一環(huán)。

獵物酬賞:這就包括了金錢獎勵、知識、資訊、娛樂等一系列你主動在產(chǎn)品中搜尋的信息或資源滿足。當你還處于清醒活躍的狀態(tài)時,腦子不會突然的呆掉而是胡思亂想或想找點內(nèi)容填充無聊的時光,于是你打開手機一個又一個的短視頻、資訊文章或是圖文段子。

自我酬賞:以自我為中心的快感滿足,如產(chǎn)品體驗中的操作感、成就感、終結感。我們?yōu)槭裁匆嬗螒??因為游戲有各種操作感可以滿足自己,并且還有豐富的美術視覺,一旦我們獲取對戰(zhàn)中最優(yōu)數(shù)據(jù)或MVP時是不是很興奮!因為有成就感,這時你完成了最后一個敵人的擊殺!恭喜你完成最后一擊!是不是終結感也很不賴。



持續(xù)的投入:習慣的培養(yǎng)
上癮就是一次不夠還想要,習慣就是不知覺的在對應場景中重復某個行為,一旦當你在某個產(chǎn)品中不斷的注入你的投入,你也會獲取更多的激勵與成就,它可以是你存儲的照片、發(fā)布的動態(tài)、收集的歌單、你的粉絲團、你的名氣信譽或是技能收獲,慢慢的你會對該產(chǎn)品的價值評估提高,你會越來越難以割舍,甚至想要推薦伙伴在這里和你一起,而接下來就是另一個觸發(fā)再次把你拉回來。

因為什么而上癮:期待沒有止境的舒服
實現(xiàn)上癮就這么簡單嗎?想想好像不是,所以根因是什么?你有沒有同樣的感受,貌似大部分人對工作并不上癮,是因為沒有酬賞嗎?貌似對有酬賞的家務也不會上癮,甚至學習打卡也不叫人上癮,反而是刷短視頻、刷帖子、玩游戲、線上交友、語音派對這些娛樂更叫人上癮,這是為什么呢?
回到前面的行為部分再結合HOOK的酬賞部分來看,如圖,你是否會有什么啟示呢?



酬賞快樂
讓你痛苦不堪的產(chǎn)品必然是與上癮無緣的,對于自身有益且美好快樂的事物我們會追求,反之則避免或逃避,尋求短暫的刺激來麻痹痛苦,不過這只是讓用戶接受和樂意使用的初步條件,上癮?還不至于。

充滿期待
為什么模型中指出是多變的酬賞?因為不是一次性滿足,而且還是多元化的滿足刺激,想象一下你,打開短視頻,看完一個后接著下一個,但是相似度極高,于是你繼續(xù)滑動,一個又一個,但是內(nèi)容依舊極其相似,你開始反思,情緒低落,對后續(xù)的內(nèi)容不再充滿期待,你停止繼續(xù)并退出了應用。這是另一個重要因素,帶有期待,我們會本能的追求希望逃避恐懼,如果對后續(xù)不再抱有期待或希望時,那么這將是中斷心流與上癮絕緣的一個信號!

沒有止境
你是否有發(fā)現(xiàn)不論是追劇、短視頻、搞笑段子、游戲等一系列讓你短暫成癮時,都有一個相似點,似乎沒有受到干擾時,根本沒有終點,你可以忘卻時間持續(xù)性的沉浸其中,享受著一個接著一個的高潮或激勵。
如果要打造一款成癮的熱銷產(chǎn)品,我想這三個點也是值得深思熟慮的因素,HOOK模型是精簡的,但是內(nèi)涵不止于此。


而對于習慣養(yǎng)成型,則有一部分是因為逃避痛苦或麻煩,我之前離單位比較近,到公司不會太早,但是研發(fā)工作卻很積極,以至于我為了避免耽誤研發(fā)或形成負面的同事形象,我都會早上習慣性的打開工作群看一下有沒有紅色的“@”,如果有的話,則趕緊看一下什么情況回復一下。

2.3|更完整的行為設計模型思考

在以上的模型中,找到了用戶行為調動的方法,以及習慣養(yǎng)成甚至成癮的關鍵點,但是結合應用程序設計的特征,我注意到還有一些行為層設計的關鍵點散落在各個環(huán)節(jié),為更好滿足設計應用的目的,我在HOOK上癮模型的基礎上細化了一些值得注意的節(jié)點,并試圖在應用設計的過程中找到了節(jié)點的映射關系,驗證可行性,在此我會穿插一些案例進行各個節(jié)點介紹。



2.3.1|觸發(fā)

為什么在我們生活的場景中,處處充斥著廣告或品牌的概念,因為商業(yè)產(chǎn)品需要觸發(fā)!唯有當你了解一個產(chǎn)品的用途時,你有了內(nèi)在需求才能及時的想起對應的服務品牌,并使得這些產(chǎn)品有機會被你翻牌子,然后你打開這個應用,應用:多謝恩寵~


外部觸發(fā)的誘因,就是在適當時候提醒你是否需要,讓你產(chǎn)生動機,或是引導你完成某個事件的動作,例如電話鈴聲響起,你掏出你的手機查看并思考是否接聽。然后發(fā)現(xiàn)是騷擾電話你掛斷了,這時手機彈出通知,是否開啟騷擾電話攔截?然后你又開始點擊查看騷擾電話攔截服務。

精髓在于打造良好的品牌賣點與口碑,在適當?shù)那榫澳軌蚣て鹩脩舻氖褂糜蛳M動機,能夠激起或助推動機、引導輔助用戶行動、提示反饋牽引用戶。



2.3.2|動機

不論是出于自身需求還是外部誘因產(chǎn)生的動機,一個讓你做出行動前的心里動力,之所以被分為感知、情感、社會三個成層面,則是為了在適合的場景下給出更被需要的動機的觸發(fā)指引,例如在炎熱的大馬路上,出于感知動機口渴,我推出冰爽的飲品更容易被需要或產(chǎn)生購買動機。并且當一個動機無法直接滿足時,我們還會有更多間接的動機。



2.3.3|規(guī)劃

大多時候我們處于慣性思考的狀態(tài),習慣性做事兒,但面對復雜的目標,我們都會預先進行一個規(guī)劃,這不像屁股癢癢了就反射性伸手撓一撓這么簡單,這個過程中圍繞心理活動展開,給予已有目標與動機,我們會初步的思考以下多個問題,我該怎么去做?我能夠做什么?先做什么再做什么?并且這個過程中會結合能力與自我感知進行決策,觸發(fā)這一行動前可能還會補充很多間接的動機來完成初始目標,所以可能對一些間接動機先規(guī)劃行動起來。



特別是當用戶身處于產(chǎn)品應用中,所有活動事件我們應該給予一定的信息可視反饋,以便于用戶決策規(guī)劃和判斷實行難度,這需要設計者做好一下幾點;


可視化:有效的反饋軟件或設備當前狀態(tài),給出相關信息讓用戶決定哪些行動是合理可行的。


用途示意:簡單直接的體現(xiàn)出可以交互的形式或范圍,例如顯示一個帶有放大鏡的按鈕,就可以感知與搜索放大有關系,并且是一個按鈕可以點擊交互。


引導信息:進行輔助示意的提示,特別告知用戶應該操作哪里或如何操作的指引信息,減少溝通或理解的成本。

2.3.4|能力

能力會直接影響動機的強弱,能力不足就會消弱動機甚至放棄行動,如果動機高漲那么就可以做出更有難度的事情,這一關系在福格行為模型中有明確體現(xiàn)。在應用設計中,則更多以有效性、效率指標、交互原則及相關定律展開,目的則是減少門檻與使用阻力,幫助用戶建立操作信心和有效易用的開展任務。



2.3.5|行動

當以上多個條件就緒后,那么你就要開始行動了,即使是準備五分鐘開始,那么的你的等待都是具有目的性的行動,一旦時間到了便會觸發(fā)生效。而行動正是與一切產(chǎn)品開始交互的開始,行動過程可能會具備多個子目標或動機來達成你的最終目標,也就是你面對復雜目標的動機規(guī)劃,在進行中,你可能還需要一系列反饋來告訴你,是否符合預期,需不需要調整規(guī)劃來達成最終目標。

2.3.6|反饋

如果說你的行為沒有任何反饋或是延誤錯誤的反饋會這么樣?混亂。想象一下燒壺開水去,聽不見咕嚕咕嚕,看不見熱氣或翻滾的氣泡,直到你不小心碰到手上,該死的,燙出泡泡來了。難以想象沒有反饋是多么的混亂,以至于我們沒辦法獲取有效的結果來糾正下一步的行動或規(guī)劃。



這個階段里,反饋不僅僅是指用戶行為發(fā)生后的變化響應,也包括了用戶反思和比較的過程,在產(chǎn)品應用的過程或實現(xiàn)較為復雜的目標時,目標與動機都會面臨拆解和階段化實現(xiàn)的情況,那么每次我們對階段目標付出行動后,就需要比對結果反饋是否符合預期,是否需要對后續(xù)的規(guī)劃做出調整來達成最初的動機。



反饋階段是整個行為設計中重要的一環(huán),如果不能給予用戶即時有效的反饋,后面的一切設計階段都將是徒勞,并會給用戶造成糟糕的體驗。那么如何做好這一環(huán),這不僅要做好產(chǎn)品可視化內(nèi)容、用途示意、引導信息,還需要在用戶行動的過程中,做好產(chǎn)品交互的約束、映射與反饋。

約束:通過提供物理硬件、流程邏輯、文字描述、符號標注等一系列方式來約束引導用戶的行為,幫助用戶理解避免操作出錯。

映射:在用戶交互的過程中給予即時有效的映射反饋,使得用戶在持續(xù)的操作過程中能夠追逐到對應變化的結果,例如通過滑動屏幕的進度條來感知和控制屏幕亮度的調整就是一種映射的表現(xiàn)。



反饋:用戶進行任何操作后,應給出即時有效的狀態(tài)反饋或是撤銷操作,并且盡可能的與操作前的信息保持關聯(lián),以符合用戶的預期,若未能操作成功,則給出失敗的原因或解決方案,甚至主動進入修復中,避免用戶在界面前不知所措。

2.3.7|酬賞

多變的酬賞,也許是為了快樂,也許是為了逃避麻煩與痛苦,在完成目標的同時我們必然會獲取滿足,如果在滿足的同時給予了你額外的、意外的激勵,誰不愛呢?鼓勵用戶發(fā)布或互動,獲取社交酬賞;給予用戶首充獎勵,獲取獵物酬賞;豐富的資料編輯,讓用戶完成更個性的展示,獲取自我酬賞;面對復雜任務,完成后給予情感化的激勵或獎品反饋。

2.3.8|期待

杜絕一成不變,不然只會呆板無聊,人總是會對新事物保持興趣,想象一下每天刷著一成不變而乏味的短視頻你會滿足嗎?不論是推出新的活動、新的玩法、新的功能、新的挑戰(zhàn)、新的好友、新的八卦總是會讓用戶有所正向期待,愿意更多嘗試與投入,就像抖音的短視頻一樣,嘎然而止意猶未盡,期待下一個更精彩。

2.3.9|投入

所在產(chǎn)品上產(chǎn)生的數(shù)據(jù)、時間投入、金錢投入、關系來往都將是產(chǎn)生情感或上頭的重要原因,我不能想象時常來往老友,好好地說斷交就斷交,也沒辦法突然的將我在音樂應用中辛苦集成的歌單說刪就刪,因為這一切對我們都有特別的價值,未來的某一天我依舊需要。那些產(chǎn)品年度報告不就是在喚起應用時的回憶進行情感升溫嗎?

2.3.10|回到觸發(fā)

再一次的,可能是我突然想起來需要了,可能是一個手機Push通知、一個短信、一個廣告、一個回訪電話,總之又一次的吸引到我了,并且此情此景所見所聞,我有了興趣也有了動機,新的一輪又將開始。

3|行為設計與用戶引導

[行為設計用戶引導就像是西方不能失去耶路撒冷]


它是在任務能夠進行的基礎之上建立的指示信息。這是一對玻璃門,它約束了只能推開拉開,而用戶引導就是貼在玻璃門上的“推開”或“拉開”,它們告訴我們最好怎么做,以快速作出正確或符合預期的行為。用戶引導是幫助用戶快速成功的捷徑,在程序應用中不論是出于用戶體驗還是商業(yè)目的都具有極為重要的作用與影響力。



其實在行為設計模型中的諸多環(huán)節(jié)都是要運用引導設計的,不知道你是否也感知到了,這些引導可以從用戶動機喚起開始-到動機助推-行動指引,出于不同目的,這些引導信息甚至可以覆蓋在整個行為設計環(huán)節(jié)中,在適當?shù)臅r候產(chǎn)生各種意想不到的效果;



3.1|從體驗視角看用戶引導

國內(nèi)的應用五花八門包羅萬象,即使被廣告吸引完成下載,但打開后,甚至可能不知道從那里開始這個應用的探索,這個應用究竟能做什么,有什么服務亮點,于是乎就需要一系列的用戶引導幫助我們開始探索和了解這個復雜的玩意兒,如果不能讓用戶快速抓住亮點(也就是Aha時刻),那么就很難保證之后的時段里不被卸載。

而這個數(shù)字化的時代,為了給用戶提供更優(yōu)質的服務,企業(yè)則需要引導用戶在產(chǎn)品中產(chǎn)生數(shù)據(jù),以幫助企業(yè)獲取更多信息了解用戶,并提供更契合的服務或是推薦匹配來改善體驗。



3.2|從商業(yè)視角看用戶引導

產(chǎn)品出于商業(yè)目的,不論是業(yè)績指標、用戶留存、消費轉化,往往都需要用戶引導來促成目的。就商業(yè)轉化來看,這時候用戶引導就像是導購一樣,通過培養(yǎng)用戶消費心智從而達成消費行為的動機,而關心用戶在應用程序上的消費行為、復購行為、支付中斷行為等,也是為了做好導購獲取更多收益。 



3.3|常見的引導類別與形式

為了滿足不同的業(yè)務目標,用戶引導出現(xiàn)了各式各樣的類別與形式,從廣泛的視角來看其實就是各種信息提示,并且為了方便用戶進入下一階段,可能會直接附屬相關操作或路徑。通過促達的程度我們可以歸類到這三個類別中:



主動式:在你還沒有透出任何行為目的前,收到的引導性通知,用于吸引用戶啟動程序進行消費或互動。干擾較弱的形式有應用內(nèi)外的通知、應用內(nèi)彈窗等,中等干擾的有短信通知、郵件通知,再強一點的還有電話推銷。

陳列式:在應用場景中,將相關的引導信息直接陳列在界面中對用戶進行引導,可以在不操作的情況下直接看到,例如常見Banner形式、缺省圖形式、注釋信息、懸浮Tips等。

觸發(fā)式:用戶有意圖的進行操作后給出的引導信息,相對來說是一種用戶接受程度高、體驗親和、動機相對吻合的類型,展現(xiàn)形式豐富,有彈窗、Tips、Toast、注釋信息等,具體根據(jù)場景做搭配。

4|正在被濫用的用戶引導



4.1|被淹沒在引導信息中

手機似乎響了一下,嗯?屏幕沒亮,錯覺嗎?
手機剛剛是不是震動了一下?有短信嗎?
我剛剛看手機干嘛來著?嗯?供奉戰(zhàn)犯吳啊萍被刑拘?看看


你是否有過這般恍惚?明明什么聲音都沒有,卻好像清晰的聽見手機在呼喚你,每每打開手機時,除了個別還在艱苦奮斗的強迫癥們,總是會看見一個又一個的小紅點,點開手機通知欄,一長排的通知等候著你的光臨。點開一個應用A,閃屏說應用B有活動,逐點擊進入應用B,閃屏說去應用C點份午餐吧,然點開進入應用C,閃屏說來應用A專治無聊,對哦,我是無聊來應用A的啊,好一個圈圈圓圓圈圈開屏大法;

圈圈圓圓圈圈
天天年年天天的我
深紅色的引導
商業(yè)的陷阱
指標的陷阱等你
不懂工作規(guī)劃重要的我們
都以為摸魚也能讓工作完成
相信就一天 搞定工作
.......不好意思,給唱起來了

然而回到了應用A,別急,還有青少年模式引導、最新活動引導、會員續(xù)費引導、求你開個通知引導、底部消息99+引導等等。
這是一個眼花繚亂的世界,稍不注意就忘了我本來是做什么的,當時我只是準備買一個鼠標,但我在淘寶的短視頻中神游了許久,直到點開一則評論被問答?你來淘寶是干嘛來的?我終于回過神來,我只是來買個鼠標的,我這點兒注意力還真是廢物呢,以至于手頭的事兒擱置了這么久。
而你,又在如何應對的呢?


4.2|目的不純的引導信息

沒幾個應用是做慈善事業(yè)的,總歸會有一套自己的盈利模式,商業(yè)指標造就了這些目的不純的引導設計,例如用戶取消訂購時的種種阻擾、為推動新內(nèi)容不斷發(fā)出的騷擾引導、特定場景對用戶的消費心智干擾、帶有隱瞞信息的協(xié)議引導等,甚至還有一些令人不爽的強制性引導。
商業(yè)視角下,用戶掏錢,則俯首稱臣,不掏錢則軟磨硬泡引導消費,很多時候不是在引導用戶體驗,而是在引導用戶參與消費罷了,而設計師能做的,也許只能是想辦法讓用戶錢花的舒服點吧。



4.3|開始想要回歸平靜



很熟悉吧,如果不夠我還能列舉,碎片化的時間似乎都被刷手機的習慣占滿了,每次打開手機都會被各種引導所吸引,久而久之一得閑大腦就渴望來點兒數(shù)字化補品[刺激多巴胺],我們習慣打開這個,再看看那個,盡管眼睛是不樂意的。


不知道什么時候,高效便捷的服務能力不再是一個產(chǎn)品的核心指標,取而代之是讓用戶刷個不停,沉浸其中不得自拔,但我們也知道刷手機的若干不好,干擾視線、干擾學習工作、虛度光陰、還能砸到臉、睡不好、快速近視...


于是有那么一批人開始意識到,并減少手機上的引導帶來的干擾,忽略一早起來手機上的若干通知、逐步加強對小紅點的忍受、對各個群組逐一免打擾、關閉若干應用的通知授權、體驗先進的適老化設計、設置免打擾時段等,想想沒有了這些引導干擾,少看一看屏幕,也不會損失什么。

5|用戶引導的救贖之路

5.1|善用觸發(fā)式引導

為什么我們不反感快遞到貨的取件短信、不反感1008611查詢后的話費流量情況短信、不反感求職后的Offer郵件通知,因為這一切的通知或引導,都是在你動機觸發(fā)后給出的結果,它們可能正是你所需要的,甚至你正在期待的搓搓小手。



所以這也解釋了為什么那些“預判設計”可以快速出圈,被用戶所青睞,因為這些預判設計并不是憑空捏造的,而是基于用戶行為觸發(fā)預測了動機,為后續(xù)帶來了的行為方向的指引,就此我們?yōu)橛脩籼崆皽蕚浜昧讼嚓P操作或服務供給,例如常見的截圖后,打開微信輸入欄更多按鈕,會直接提供截圖選取服務。

那么如何做好觸發(fā)式引導呢?
除了擅用行為設計的方法與視角,這里再分享五個我自己的見解

5.1.1|借“機”行事

我們的精力是很有限的,不該濫用引導,應該結合用戶特征或行為觸發(fā)來洞察需求,再用友好且符合用戶意圖的內(nèi)容來引導用戶,提高轉化和品牌溫度,而不是一味的引導轟炸,不然有一天被打上垃圾信息的標簽了,發(fā)送再多的引導通知也不會有結果,所以找到一個合適的或是用戶自己觸發(fā)的“契機”很重要,商業(yè)與體驗平衡很重要。

5.1.2|借助社交

除了一些工具類或沒有社交屬性的產(chǎn)品,大多數(shù)產(chǎn)品可以通過社交來建立用戶之間的聯(lián)絡,并以社交消息來做功能引導或用戶召回引導等,例如:



當然了,控制好時機并保證內(nèi)容真實性也很重要。而借助社交是因為我們喜歡跟有共同點的人靠攏,彼此會有更多話題與樂趣,通過好友背書、社交擴列與社交酬賞做杠桿,讓引導事半功倍。

5.1.3|循序漸進

引導設計需要耐心,分成必要的步驟循序漸進,不要一股腦兒塞給用戶,也不要過于拖沓冗余,適當?shù)碾A段給予獎勵,調動積極性,就像游戲關卡設計一樣,采用階梯式用戶行為引導。并且從開始到結束不要信息斷層,減少跳失率,我就看見過很多用戶因為廣告是穿搭而下載了某個應用,結果安裝后玲瑯滿目,找不到興趣點,最終選擇了吐槽卸載。

大多數(shù)消費場景,講究的是循序漸進的心智引導,欲速則不達,目的是建立用戶信任、接受度、消費意向、好感度等促成消費結果,我們常見的電商好評、權威認證、專家推薦等就是在引導消費心智,這也體現(xiàn)了為什么一個好的銷售會先跟你拉近距離而不是“哥!人傻錢多不”。



5.1.4|行為視角

行為視角的作用不用多說了吧,結合用戶當前的行為我們可以洞察出下一步行為方向,提前做好準備,當然了,不要過分揣測,對應的引導要考慮服務范圍、服務時間、服務要求、服務場景等,可以是面向全局用戶、也可以是私人定制服務,重點是要契合用戶意圖,借“機”行事。

5.1.5|光明磊落

好的引導設計應該讓用戶覺得有價值、靠譜、不過分干擾,而不是為了指標做出一堆陰暗設計,老生常談的惡心案例應該就是網(wǎng)頁上的彈出廣告吧,明明顯示了關閉按鈕,點擊后卻發(fā)現(xiàn)還是假的,直接就給跳轉了,盡管我們說把用戶當作小白,但不是當傻子,用戶總歸會發(fā)現(xiàn)上當?shù)臅r候,到時候就該差評或控訴了,所以長久看來,為保證口碑與競爭力,還是建議光明磊落少些陰暗的引導設計。

5.2|開始克制與降噪

作為一個設計者,說來慚愧,安裝一個新的應用程序后,一下子根本搞不清楚怎么用?有什么用?不得不說引導設計還是很重要的,但引導并非是讓我迷茫的主要原因,龐大而臃腫的功能反而是主要原因,并且一旦功能倍增后,就很容易丟失服務焦點,以至于即使做用戶引導也不好下手,做完了迭代又還要反復改。
現(xiàn)在的應用底部菜單從4個趨于5個,頂部Tab也越劃越多,首頁也是玲瑯滿目的,這對于用戶體驗是一個挑戰(zhàn),即使是專家級用戶,也難以用到大部分的功能,這是一個信號!新一輪的趨勢可能是克制與降噪了。

5.2.1|克制什么

克制業(yè)務范圍,下鉆業(yè)務優(yōu)勢,好的產(chǎn)品不是什么都做什么都有,而是應該定位清晰,業(yè)務更清晰,盡管很多產(chǎn)品有著類似的服務,但是每個用戶都有自己產(chǎn)品上的小圈或價值積累,產(chǎn)品優(yōu)勢也有差異,不會因為有類似功能就輕易轉移陣地,例如直播。一個產(chǎn)品想通過擴展業(yè)務豐富跨界優(yōu)勢是很難實現(xiàn)的,還記得支付寶做社交的嗎?


幸運的是嗅覺敏銳的企業(yè)已經(jīng)注意到了,如你所見,應用市場有了更多的極速版APP,微信支付寶等APP也允許用戶配置核心服務之外的功能模塊搭配,似乎軟件們又開始輕盈好用了。



5.2.2|降噪什么

減少干擾,注重效率。一個好的產(chǎn)品應該注重效率,快速幫助用戶找到要的、快速幫助用戶完成任務、快速完成信息匹配等,看見隨申辦APP獲得了GXA好體驗獎了,不過想想新一代的數(shù)字化服務不就該如此嗎?讓流程簡單易懂,辦事少走兩趟,結果反饋更及時,惠民政策早知道。



不知道什么時候開始適應和喜歡清晰簡潔的產(chǎn)品設計,就像我喜歡逛逛無印良品,找一點精致自然的物件,有時候設計也是,多一點克制少一些喧囂,當滿屏都是重點都是標簽引導、文字說明時,哪里還有什么重點,就像小紅點誕生時,醒目的提示能幫我們找到重點,但現(xiàn)實處處是紅點,哪里還弄得清什么是重要的。


就像一個簡單模塊入口設計,又是封面/標題/描述,又是用戶信息/互動數(shù)據(jù)/品類標簽啥的,這么多信息,我擱這兒讀書呢?為什么不循序漸進呢?找到用戶正真會看的焦點信息很難嗎?


終于,在工信部的要求下,廣告與算法推送也得以控制,這意味著干擾又少了,但是這也側面反映了產(chǎn)品對用戶數(shù)據(jù)的過分收集甚至有所交易,如何讓用戶放心用,隱私或權限的最小可行獲取又何嘗不是“降噪”的重點。


6|回顧

洋洋灑灑的寫了一大片,也非本意,怕詞不達意,只好多分一分內(nèi)容節(jié)點,至于這么多字究竟在說些什么,我們簡單回顧一下;

6.1|行為設計部分

數(shù)字化應用即經(jīng)過精心編排的行為設計,本質是通過不一樣的行為方式完成我們的需求,通過行為設計視角我們可以共情以洞察出更多的用戶需求,并且在進行數(shù)據(jù)分析時,也需要善于使用行為視角洞察分析用戶特征或痛點,這種方式我們可以記作三級維度兩層映射。而上癮模型與福格行為模型則可以為設計提供更多的指引,同時可以在模型的基礎上完善更多環(huán)節(jié)來作用于實際的設計過程,幫助我們打造受歡迎的產(chǎn)品。

6.2|引導設計部分

用戶引導是非常具有價值的設計,好的行為設計不能缺失引導設計,而現(xiàn)在引導設計正在被濫用,它的優(yōu)勢正被埋沒,被用作一些不友好的地方,產(chǎn)品體驗也因此大打折扣,而掌握觸發(fā)式引導設計,通過借機行事、借助社交、循序漸進、行為視角、光明磊落五個方法也許能幫你改善。對于現(xiàn)在的數(shù)字化產(chǎn)品現(xiàn)狀,或許克制業(yè)務范圍,下鉆業(yè)務優(yōu)勢,減少干擾,注重效率會帶來更多驚喜。

原文地址:站酷

作者:泡泡_PAO


藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


可用性錯誤: 來自用戶體驗設計師的6個真誠而有價值的建議

ui設計分享達人

我經(jīng)常想,如何花費極少的精力避免可用性錯誤。在做了這么多項目之后,我意識到在我準備設計一件東西之前,我犯了很多常見的錯誤。當我專注于設計時,可用性問題已經(jīng)悄無聲息地形成了。它們在我的工作流程中扎根,現(xiàn)在我正試圖改變我的工作方式。

在這篇文章中,你可以了解以下內(nèi)容:

  • 在不斷變化的項目中用戶體驗設計師的經(jīng)驗
  • 鮮為人知的關于可用性錯誤的觀點
  • 改進工作流程的6個提示,以避免可用性錯誤和網(wǎng)站轉換率低的問題

幾個月前,我設計在線商店的時候,閱讀了如何避免可用性錯誤的相關文章。幾天后,我一遍又一遍地發(fā)現(xiàn)同樣內(nèi)容的舊文章。顯然,它們都故意收集了同樣的錯誤:經(jīng)常出現(xiàn)并容易避免的錯誤值得反復提及。

問題是,它們似乎是臨時性的解決方案,因為我項目的基本屬性每周都在不斷變化——信息架構、導航機制等所有東西。我每周都在尋找新的技巧,所以我決定尋找可用性錯誤的本質,而不是一種避免它們的方法。

可用性錯誤排序的低效性

識別可用性錯誤需要花費很多時間。它以消極的、妥協(xié)的方式影響有效性、效率性和便利性。一個小問題可能會讓用戶在完成任務時感到不愉快。巨大的問題甚至會讓你無法完成任務。 在本文中,我將把它們稱為不正確的設計選擇。

可用性錯誤會影響用戶便捷、高效或有效地完成任務

問題在于可用性問題有許多不同的形式和嚴重程度。那么為什么不對它們進行分類和優(yōu)先級排序呢? 它不能那么混亂,對嗎?不久前我就是這么想的。在混亂中創(chuàng)建秩序會非常有意義,但是當涉及可用性錯誤時,這個概念就失敗了。

制作群組或列出最常用的群組并不能提供有效的解決方案。為什么? 用戶體驗設計不斷變化,并且有多個變量。想想在過去二十年中我們與界面交互的方式是如何變化的。

我們已經(jīng)從顯示器轉移到小型移動屏幕,而平板電腦和帶有圓形屏幕的智能手表則拓寬了這一領域。而這只是以一種更復雜的方式去看待一個變量。

也就是說,在不斷變化的設計領域,任何規(guī)則或原則都不會永遠存在。這意味著查找和排序最常見的錯誤只是一個臨時解決方案。這可能行得通,但不會持續(xù)太久。為了給用戶體驗設計遙不可知的未來做好準備,請查看您的工作流程以獲得最終答案。


如何在考慮
可用性錯誤的情況下
改善工作流程

幾年前,沒有人會對設計一個可以從屏幕底部向上滑動即可訪問的購物車功能感到驚訝。2017年,iPhone X 誕生了。從那時起,大多數(shù)用戶都使用此手勢(指滑動手勢)進入主屏幕。

資料來源:support.apple.com

1.將意識集成到您的工作流程中

我以前不會瀏覽設計趨勢,以免影響自己。我僅僅檢查情緒板和配色組合,完全忽略導航結構和其他用戶體驗解決方案。我相信在看過流行趨勢中的解決方案之后,我們會下意識地放棄我們的創(chuàng)新想法。

經(jīng)過這么多年,整個概念在我腦海中浮現(xiàn)。忽略當前的用戶行為模式和技術變化,您雖然不會讓自己暴露在犯關鍵設計錯誤的可能性中,但你也會錯過所有其他的機會,使你的設計真正有用。

2.獲取背景信息

好的,所以你要規(guī)劃未來用戶的行為,你就必須堅持到底。進行探索性訪談作為一種良好的開端,提出問題并發(fā)現(xiàn)痛點和欲望背后的動機為您提供了完美的素材:背景信息。

在設計界面時,這將成為寶貴資源。 它產(chǎn)生的數(shù)據(jù)量可能看起來很可怕。您可能會發(fā)現(xiàn)很難駕馭或使用,但里面總是隱藏著無限的可能性。

找到一個可行的方法獲取一些有趣的背景信息。如果您沒有時間進行面試,請查找類似產(chǎn)品的案例研究,從中找出結果。 看看現(xiàn)有的基準研究或類似產(chǎn)品的成功特征。 雖然不完全相同,但它們可以為您提供一些幫助。在考慮設計線框圖之前進行此項研究,可以讓您為用戶設計。

3.消除你的偏見

我正在設計一個食品配送應用程序,想要試驗一下按鈕的位置,這個按鈕可以把你帶到餐館的完整列表中。 我通過幾次測試嘗試了很多變化,但沒有引起太多關注,因為用戶還有其他幾種方法可以做到這一點。盡管接下來的測試進行得很順利(這樣受試者就能完成任務),但這種體驗仍然不能讓人滿意。找出問題的癥結所在是個難題,因為他們無法確定問題(反正不是他們的工作)。

幾天后,我正在看著我的女朋友在一個完全不相關的網(wǎng)站上訂餐。我注意到她是如何避免定制的套餐和推薦的餐館。她說它們看起來像廣告。她認為主頁是一個受控制的環(huán)境,所以她進入了餐館列表,在那里她可以在不受控制的情況下對它們進行排序和過濾。這是我項目的關鍵:控制。我在測試期間錯過了這點,因為我對用戶應該如何使用應用程序有一種偏見。

做出風險設計決策的最簡單方法是什么?清醒的意識到您的桌面和移動設備用戶想要如何使用您的產(chǎn)品。為用戶構建而不是告訴他們應該如何思考,總是變得更容易。宏觀看待目標群體期望如何與產(chǎn)品交互,將幫助您創(chuàng)建直觀的界面,同時簡單地避免關鍵錯誤。這是一筆很好的交易。

4.接受你的錯誤

設計師證明自己和他們設計的用戶一樣人性化。雖然很難,但我們必須接受這個事實。這個微小的錯誤至今仍困擾著我。接受你的錯誤,尤其你是完美主義者。我們不可能一直十全十美。

此外,我們無法避免較小的可用性問題,沒有人可以在設計時不考慮這些問題。它們只是過程的一部分。當然,使用各種經(jīng)過驗證的實踐或(在這種情況下)改進工作流程有助于避免關鍵問題。但我們很可能無法解決與滿意度相關的不便。因為我們以獨特的方式感知世界,所以我們期望結果和行為不同。

5.理解你的錯誤并加以改進

分析出了什么問題和錯誤的原因。了解糟糕的設計選擇背后的原因比錯誤本身更重要。這讓我們回到簡單地排序可用性錯誤“低效性”的問題。如果你能說出你為什么一開始就犯了錯誤,那么無論平臺或觀眾如何,你都可以避免在未來犯同一個錯誤。

追溯你的錯誤可能會讓在工作流程中養(yǎng)成習慣(或相反,缺乏習慣,從而導致很多麻煩)。就我而言,使用假設進行設計會導致許多小的可用性問題。反過來,它們以明顯妥協(xié)的方式影響了整體用戶體驗。所以我寫這篇文章。把你的錯誤視為你工作方式的副產(chǎn)品,這可以幫助改進方法,擺脫并根治問題。


6.驗證您的更改

然而,單獨根除錯誤并不能減少錯誤。就像設計和測試一樣,重建工作流也需要驗證。我們只需通過各種后續(xù)技術來做到這一點。您可以選擇是向客戶發(fā)送簡單的電子郵件,創(chuàng)建完整的問卷,或是進行另一輪測試。確定獲得有關工作的相關信息的最有效方式取決于您的項目和客戶。

獲得關于工作的反饋,以了解改進的程度。通過這種方式,您可以衡量更改的有效性并對其進行微調,以便在第一輪不滿意時獲得更好的結果。此外,它也為你的簡歷錦上添花,但這只是獎勵。

結論和回顧

以下沒有特別的順序,我通過改進您的設計工作流程來提高可用性。相反,它們提供了一個指南,告訴我們應該在哪些地方派上用場。 讓我們快速回顧一下:

  • 將意識集成到您的工作流程中:了解當前的用戶行為模式和技術變化。
  • 獲取背景信息:找到一種可行的方法來了解有關選擇和偏好背后的動機。
  • 消除你的偏見:隨時準備學習新的東西,并密切關注新的觀點。
  • 接受你的錯誤:設計師對用戶的評價和用戶對設計師的評價是一樣的,犯錯并不會讓你遜色。
  • 理解你的錯誤并加以改進:理解糟糕的設計選擇背后的原因,比錯誤本身更重要。
  • 驗證您的更改:重建工作流程需要驗證以確定有效性。

我仍然試圖將這些技巧正確地整合到改進您的工作流程中,并且需要花費很多時間去精確的設計。但我的產(chǎn)出已經(jīng)感覺更具戰(zhàn)略性和準備性。 我希望它對你也有幫助。


原文標題:Usability Mistakes: 6 Honest and Valuable Tips From a UX Designer

原創(chuàng)作者:Sándor Zelenka

原文鏈接:https://uxstudioteam.com/ux-blog/usability-mistakes/

翻譯作者:shmilyJ

授權獲取:張聿彤

文章審核:王翎旭

文章編輯:王鴻飛

該譯文并非完整原文,內(nèi)容已做部分調整。如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處,歡迎不吝指出。如需轉載,請注明來自 三分設

作者:三分設  來源:站酷


藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯(lián)系。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔