首頁

UX可發(fā)現(xiàn)性咋提升?這12條技巧

純純

用戶找不到=不存在 


在數(shù)字界面中,可發(fā)現(xiàn)性定義了用戶在產(chǎn)品中查找新內(nèi)容或功能的難易程度。在許多情況下,良好的可發(fā)現(xiàn)性至關(guān)重要,因?yàn)橛脩粽业剿鑳?nèi)容的能力將直接影響其完成特定任務(wù)的能力。


在本文中,我們將討論可發(fā)現(xiàn)性的概念和其重要性所在,以及設(shè)計可發(fā)現(xiàn)性的詳細(xì)技巧。


為什么為設(shè)計可發(fā)現(xiàn)性這么困難?

UX中的Findability和Discoverability這兩個術(shù)語經(jīng)常互換使用。雖然二者相關(guān),但它們不是一回事,關(guān)鍵區(qū)別在于用戶對內(nèi)容的看法。Findability是指用戶已經(jīng)知道或認(rèn)為存在于產(chǎn)品中的內(nèi)容或功能的能力。而Discoverability是用戶遇到新內(nèi)容或以前不知道的內(nèi)容或功能的能力。


這種差別使我們更容易理解——為什么設(shè)計高度可發(fā)現(xiàn)的界面如此困難。在許多情況下,用戶并不是有意識地尋找新內(nèi)容。人們只想簡答地使用產(chǎn)品,如果沒有遇到新功能或新內(nèi)容,用戶壓根兒不會想到去尋找它們,因?yàn)橐婚_始就不知道它們是作為產(chǎn)品的一部分存在的。注重可發(fā)現(xiàn)性是UX設(shè)計師解決此問題的途徑,好讓用戶更容易發(fā)現(xiàn)這些新功能。


12個提升UX可發(fā)現(xiàn)性的技巧

許多因素都會影響用戶界面的可發(fā)現(xiàn)性。以下是12個技巧,幾乎適用于所有想要提升可發(fā)現(xiàn)性的產(chǎn)品。


技巧1:設(shè)計熟悉的界面

許多設(shè)計師喜歡試驗(yàn)和嘗試新方法,但在嘗試創(chuàng)建新內(nèi)容時,往往適得其反,使用戶更難以理解頁面。


依據(jù)設(shè)計常識創(chuàng)建界面,這是設(shè)計師的責(zé)任。使用現(xiàn)有的設(shè)計規(guī)范(例如,操作系統(tǒng)的設(shè)計范例),結(jié)合用戶需求建立可發(fā)現(xiàn)性,更容易獲得用戶的認(rèn)可。因?yàn)槿藗兺ㄟ^自身經(jīng)驗(yàn)去感受一個新事物時,是非常容易理解其內(nèi)在邏輯的。例如,許多網(wǎng)站將導(dǎo)航菜單放置在頁面頂部,緊鄰網(wǎng)站的Logo,也是大多數(shù)用戶不假思索就能找到的位置。


技巧2:優(yōu)先安排有價值的內(nèi)容和功能

當(dāng)我們在UI中隱藏某些內(nèi)容時,會加大用戶找不到它的風(fēng)險。移動應(yīng)用和網(wǎng)站之所以放棄漢堡菜單,轉(zhuǎn)而使用標(biāo)簽欄的原因就是UX的可發(fā)現(xiàn)性。雖然漢堡菜單通過隱藏導(dǎo)航選項(xiàng)來節(jié)省屏幕空間,有句說話說的好“眼不見,心不煩”,隱藏的選項(xiàng)也更容易被忘記。


良好的可見性可以帶來更多的曝光率——元素越明顯可見,用戶就越有可能記住它??梢妼?dǎo)航就如一個標(biāo)簽欄,告訴用戶他們有哪些選項(xiàng),并使其成為首要考慮因素。


技巧3:按邏輯順序?qū)?nèi)容和功能元素分組

具有密切關(guān)系的項(xiàng)目應(yīng)被組織在一起,該規(guī)則適用于內(nèi)容(例如,電子商務(wù)網(wǎng)站上定義產(chǎn)品類別的信息架構(gòu))和功能(例如,Instagram上的濾鏡)。通過在結(jié)構(gòu)中引入邏輯順序,可以使用戶更輕松快捷地找到他們想要的東西(在開始UI工作之前,進(jìn)行Tree testing以了解用戶的心理模型至關(guān)重要,它能幫助你根據(jù)用戶需求搭建內(nèi)容)。


技巧4:減少視覺上的混亂

UI設(shè)計里的一個常見誤區(qū),為了使對象更容易被發(fā)現(xiàn),它應(yīng)該一直可見。假設(shè)按剛剛說的去設(shè)計,把所有可用對象都堆在頁面里,反而更混亂。


視覺混亂通常是出現(xiàn)了不必要的功能和裝飾元素,它們阻止用戶與產(chǎn)品交互。這種混亂不僅放慢了使用速度,還讓基本功變得難易被發(fā)現(xiàn)。

Microsoft Word中,太多可見選項(xiàng)造成視覺混亂 by Amansinghblog


即使頁面/屏幕有非常良好的視覺層次結(jié)構(gòu),但人們的注意力跨度有限,人腦通過眼睛感知事物的能力也有限。因此,確定對象的優(yōu)先級非常重要。刪除所有不必要的元素,為剩余元素增加視覺權(quán)重,才能讓真正重要的內(nèi)容和功能脫穎而出。


技巧5:減少選項(xiàng)總數(shù)

??硕芍赋?,用戶做出的決定越多,決策過程所需的時間就越長,限制 or 提供大量選擇?設(shè)計師要掌握平衡??礈?zhǔn)時機(jī)提供選項(xiàng),不僅簡化決策過程,還能為用戶提供發(fā)現(xiàn)、探索和嘗試所有可用選項(xiàng)的空間(和信心)。


技巧6:提供視覺反饋

視覺反饋是指用戶在執(zhí)行任何交互時獲得的可見響應(yīng)。例如,當(dāng)我們將鼠標(biāo)懸停在網(wǎng)站鏈接上時,我們會看到一個視覺響應(yīng)——鏈接改變了顏色。這種微小的視覺變化非常重要,因?yàn)樗梢栽鰪?qiáng)用戶體驗(yàn),消除不確定性。用戶知道某些元素是可以交互的,以及下一步該怎么做,從而采取行動。


技巧7:使用常見熟悉的圖標(biāo)

交互元素使用不常見的圖標(biāo)是導(dǎo)致問題的“罪魁禍?zhǔn)住薄.?dāng)用戶看到未知圖標(biāo)時,他們無法預(yù)測點(diǎn)擊該圖標(biāo)會發(fā)生什么。這種猜測對產(chǎn)品團(tuán)隊(duì)來說成本很高,因?yàn)樵谠S多情況下,用戶會跳過該選項(xiàng)。


怎么才能知道圖標(biāo)是否令人困惑?測試一下,向?qū)嶋H或潛在用戶詢問涉及元素的作用,如果他們給不出明確答案,那就用一個更常見的圖標(biāo)替換。


技巧8:使用動畫吸引用戶的注意力

人眼會自然地聚焦在移動的物體上,微妙的動畫可以引導(dǎo)用戶轉(zhuǎn)向某些特定的內(nèi)容或功能,動畫還可以解釋如何與對象交互。


技巧9:注意手勢交互

手勢是隱藏的交互控件,它們可能導(dǎo)致很多可發(fā)現(xiàn)性問題。除非用戶知道某些手勢,否則他們不會嘗試。產(chǎn)品中使用普遍接受的手勢交互,別試圖加入太新奇的交互形式??紤]到手勢對于許多用戶來說仍然是一個相對較新的概念,因此在新設(shè)備上很有必要進(jìn)行入門介紹。

非常規(guī)手勢(例如雙擊點(diǎn)贊)可能會對可發(fā)現(xiàn)性產(chǎn)生負(fù)面影響,用戶可能注意不到這些手勢在應(yīng)用程序里是被支持的 by Dribbble


技巧10:適當(dāng)調(diào)整UI元素的大小

設(shè)計師為什么要對標(biāo)題和常規(guī)文本使用不同的視覺樣式,這是有原因的——想讓用戶更容易注意到文本內(nèi)容。同樣的策略也適用于UI設(shè)計,通過對比不同大小的元素,將用戶注意力吸引到關(guān)鍵信息上。例如,著陸頁上的一個超大的號召性按鈕,清楚地告訴用戶當(dāng)他們點(diǎn)擊該按鈕時,下一個動作應(yīng)該是什么,以及會發(fā)生的是什么(大型UI元素在可用性方面也很有益,因?yàn)樗鼈兏菀自谝苿釉O(shè)備上使用)。

號召性按鈕越大且越突出,你期望用戶執(zhí)行的操作也越明顯 by Firefox


技巧11:提供視覺可供性

有時候即便用戶發(fā)現(xiàn)了一個對象,他們也可能不知道如何使用??晒┬杂脕碇笇?dǎo)元素如何應(yīng)用,沒有可供性的話,用戶只能靠猜測使用產(chǎn)品/對象(很可能不會使用)。在數(shù)字界面中,設(shè)計師應(yīng)把形狀和產(chǎn)生的交互進(jìn)行具象聯(lián)系,例如,當(dāng)我們看到帶有“提交”標(biāo)簽的矩形對象時,我們就知道這是一個按鈕。


技巧12:提供視覺線索

視覺線索是引導(dǎo)用戶轉(zhuǎn)向特定的內(nèi)容或功能的UI元素,一個典型示例是滾動網(wǎng)站上的動畫箭頭,該箭頭會引導(dǎo)用戶朝特定的方向前進(jìn)。

注意到圖像系列最右端的箭頭嗎?該視覺線索提示訪問者,水平畫廊是可滾動的 by Netflix


文章來源:UX辭典(站酷)

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI組件要點(diǎn)「狙擊」:按鈕設(shè)計的這些坑別再踩啦!

純純

按鈕設(shè)計


為了設(shè)計正確的交互,我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是UI組件的前身,當(dāng)今的數(shù)字產(chǎn)品都還在大量使用它們。按鈕很棒,即使用戶不了解基本的機(jī)制或算法,只用手指觸摸就可以讓電器、汽車或系統(tǒng)運(yùn)行/關(guān)閉。在《Power Button》中,作者Rachel Plotnick描述了當(dāng)今按鈕文化的起源,并解釋了按鈕是如何成為數(shù)字命令方式的。


“你按下按鈕,剩下的我們來做?!?——柯達(dá)相機(jī)的醒目標(biāo)語吸引了潛在消費(fèi)者。


即使在今天,這也是吸引用戶的地方——通過簡單觸摸就能讓事情發(fā)生的即時滿足感。盡管有大量新的家用電器和設(shè)備都變成了觸摸屏,但物理按鈕并不會消失,因?yàn)樗鼈冏屓诵纬傻男袨榱?xí)慣,會影響按鈕設(shè)計的直觀性和易用性,是一種永遠(yuǎn)存在的實(shí)物參考。


01 按鈕 vs 鏈接

按鈕向用戶傳遞了操作的可執(zhí)行性,在整個UI里很常見,例如:對話框、表單和工具欄等。按鈕和鏈接之間的區(qū)別,請注意:

-鏈接是導(dǎo)航到另一個地方時應(yīng)用的,例如:“查看全部”頁面、“ Roger Wright”個人簡介等;

-按鈕是在執(zhí)行動作時應(yīng)用的,例如:“提交”、“合并”、“創(chuàng)建”、“上傳”等。



02 讓用戶直觀感受按鈕狀態(tài)

為按鈕創(chuàng)建正確的交互和樣式,是按鈕設(shè)計過程中重要的組成部分之一。在不改變組件或產(chǎn)生視覺干擾的前提下,每個按鈕的狀態(tài)都必須有明確定義,以使其與周圍布局區(qū)別開來。



正常—表示該組件已啟用交互;

突出提示—用戶使用鍵盤,進(jìn)入編輯狀態(tài);

鼠標(biāo)懸停—當(dāng)用戶將鼠標(biāo)置于交互式元素上方時;

點(diǎn)擊—按下狀態(tài)表示用戶已輕點(diǎn)按鈕;

進(jìn)度/加載—用戶操作行為沒有立即執(zhí)行,表示正在完成操作中;

禁用—表示該組件當(dāng)前處于非交互狀態(tài),但將來可以啟用。


03 按鈕的顏色、形狀和大小

常見的是圓角矩形按鈕,這些按鈕即使在輸入框旁,用戶也能快速識別。按鈕樣式的選擇取決于用途、平臺和應(yīng)用準(zhǔn)則。以下是一些最受歡迎的樣式變化:



04 建立按鈕樣式等級

樣式主要用于區(qū)分重要和不重要的動作。創(chuàng)建動作層次結(jié)構(gòu),該層次結(jié)構(gòu)將指導(dǎo)用戶進(jìn)行多種選擇。通常,可以有一個突出的按鈕(該樣式通常稱為“首要”按鈕),剩下的按鈕則依據(jù)重要程度建立不同的樣式等級。



05 《Don’t Make Me Think》

這是可用性工程師Steve Krug撰寫的書籍標(biāo)題,其中講到了一點(diǎn):對用戶而言,界面清晰明了非常重要,不要給用戶制造難題。人們周圍其實(shí)已經(jīng)被電子產(chǎn)品包圍了,多年使用各種設(shè)備、軟件的經(jīng)驗(yàn),一定程度上固化了人們對按鈕外觀和功能的認(rèn)知。如果與常見的“標(biāo)準(zhǔn)”存在較大偏差,也會給用戶造成困惑。



避免對交互式和非交互式元素使用相同的顏色,否則用戶不知道該點(diǎn)擊哪里。


06 一致性的重要性

“一致性是最強(qiáng)大的可用性原則之一:當(dāng)事物始終表現(xiàn)相同時,用戶不必?fù)?dān)心會發(fā)生什么。” —雅各布·尼爾森(Jakob Nielsen)


一致性提升了速度性和準(zhǔn)確性,有助于避免錯誤。創(chuàng)建可預(yù)測性,幫助用戶控制和實(shí)現(xiàn)產(chǎn)品中的目標(biāo)。當(dāng)創(chuàng)建主要、次要和第三種樣式時,試著找找一致元素,如顏色、形狀等。按鈕設(shè)計不僅要在設(shè)計系統(tǒng)內(nèi)部保持一致,在整體平臺也要進(jìn)行統(tǒng)一。



07 使按鈕足夠大以實(shí)現(xiàn)可靠交互

按下按鈕應(yīng)該是一個簡單的操作任務(wù),如果用戶無法正常進(jìn)行,或在過程中錯誤地按到了相鄰元素,不但給用戶造成了負(fù)面體驗(yàn)又浪費(fèi)了時間。


對于大多數(shù)平臺,請考慮被觸摸的目標(biāo)至少為48x48dp。無論屏幕大小,這種尺寸的觸摸目標(biāo)的物理尺寸應(yīng)為9mm,觸摸屏元件的目標(biāo)尺寸至少是7-10mm。



對于圖標(biāo)按鈕來說,請確保觸摸目標(biāo)超出元素的可視范圍。這不僅適用于移動設(shè)備、平板電腦,同時也適用于網(wǎng)絡(luò)上的指示設(shè)備,比如鼠標(biāo)。


08 無障礙設(shè)計

所有組件都應(yīng)推行無障礙設(shè)計。目標(biāo)區(qū)域的大小是影響可訪問性的因素之一,其他的則是字體大小、顏色和對比度,也有很多工具能檢查組件的設(shè)計性能。



設(shè)計師應(yīng)與開發(fā)團(tuán)隊(duì)緊密合作,確保按鈕與屏幕閱讀器協(xié)同工作。添加role =“ button”將使一個元素作為按鈕控件出現(xiàn)在屏幕閱讀器上。


09 手勢應(yīng)用

手勢應(yīng)用,讓用戶可以通過觸摸與應(yīng)用程序進(jìn)行交互。使用觸摸來完成任務(wù),不僅提供了觸覺控制還非常節(jié)約時間。某些手勢(比如滑動以觸發(fā)上下文動作、雙擊或長按來標(biāo)記喜歡等)每天都被人們廣泛使用,但對于普通用戶而言,它們?nèi)匀徊惶黠@,建議把它們替換給高級用戶執(zhí)行操作。



10 按鈕標(biāo)簽信息易于理解

按鈕傳達(dá)的信息與其外觀一樣重要,錯誤的信息會讓用戶感到困惑,甚至是誤導(dǎo)用戶操作。正確的按鈕標(biāo)簽會引導(dǎo)用戶完成操作,最好使用動詞,并在按鈕上標(biāo)記其實(shí)際功能。


就像按鈕在問用戶——“您要(添加到購物籃中)嗎?” 或“您要(確認(rèn)訂單)嗎?”,避免使用Yes/No或過于通用的標(biāo)簽,比如Submit。



11 確定/取消,還是取消/確定?

兩者都是正確選擇,但設(shè)計師可能會花幾個小時來討論哪個更合適。

-確定按鈕在前,是自然流暢的閱讀順序。Windows把確定按鈕放在了前面;

-確定按鈕在后,可以幫助改善流程。這種順序形式,幫助用戶再采取行動前,對所有選項(xiàng)評估,有效地幫助人們避免錯誤。蘋果則是把確定按鈕放在最后的;

任何一種選擇其實(shí)都沒有錯,也不會造成什么可用性災(zāi)難。



12 避免使用禁用按鈕

每個人都遇到過這種情況:在屏幕上停留了幾秒或幾分鐘,怎么操作都沒反應(yīng),這才發(fā)現(xiàn)原來是禁用按鈕使我們無法進(jìn)行下一步。禁用控件讓組件短暫處于非交互狀態(tài),但如果使用不當(dāng),則非常容易讓用戶產(chǎn)生負(fù)面情緒。



我建議盡量避免禁用按鈕,最好始終啟用它,如果用戶未提供某些必需信息,則只需突出顯示空白字段或顯示通知可。


文章來源:UX辭典(站酷)

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



交互設(shè)計知識總結(jié)

博博

不懂交互的UI,不是好美工。
本文約一萬字,考驗(yàn)?zāi)托牡臅r候到了。

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

先來看一下百度百科的定義

交互設(shè)計(英文Interaction Design, 縮寫IXD),是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域,它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達(dá)成某種目的。交互設(shè)計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系,以“在充滿社會復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計的目標(biāo)可以從“可用性”和”用戶體驗(yàn)“兩個層面上進(jìn)行分析,關(guān)注以人為本的用戶需求。簡而言之,交互設(shè)計是解決特定場景下的人群如何高效使用機(jī)器或軟件的目標(biāo)行為。


為什么要做交互設(shè)計

在使用網(wǎng)站,軟件,消費(fèi)產(chǎn)品或各種服務(wù)的時候(實(shí)際上是在同它們交互),使用過程中的感覺就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展,各種新產(chǎn)品和交互方式越來越多,人們也越來越重視對交互的體驗(yàn)。當(dāng)大型計算機(jī)剛剛研制出來的時候,可能為當(dāng)初的使用者本身就是該行業(yè)的專家,沒有人去關(guān)注使用者的感覺;相反,一切都圍繞機(jī)器的需要來組織,程序員通過打孔卡片來輸入機(jī)器語言,輸出結(jié)果也是機(jī)器語言,那個時候同計算機(jī)交互的重心是機(jī)器本身。當(dāng)計算機(jī)系統(tǒng)的用戶越來越由普通大眾組成的時候,對交互體驗(yàn)的關(guān)注也越來越迫切了。因此交互設(shè)計作為一門關(guān)注交互體驗(yàn)的新學(xué)科在二十世紀(jì)八十年代產(chǎn)生了。


從用戶角度來說,交互設(shè)計是一種如何讓產(chǎn)品易用,有效而讓人愉悅的技術(shù),它致力于了解目標(biāo)用戶和他們的期望,了解用戶在同產(chǎn)品交互時彼此的行為,了解“人”本身的心理和行為特點(diǎn),同時,還包括了解各種有效的交互方式,并對它們進(jìn)行增強(qiáng)和擴(kuò)充。

通過對產(chǎn)品的界面和行為進(jìn)行交互設(shè)計,讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系,從而可以有效達(dá)到使用者的目標(biāo),這就是交互設(shè)計的目的。


二、交互設(shè)計常用原則和定律有哪些?


尼爾森十大可用性原則


1、狀態(tài)可見原則

系統(tǒng)應(yīng)該讓用戶時刻清楚當(dāng)前發(fā)生了什么事情,也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當(dāng)前目標(biāo)、以及對未來去向有所了解,一般的方法是在合適的時間給用戶適當(dāng)?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯誤。

即在用戶操作界面功能時給予實(shí)時反饋,例如:頁面加載狀態(tài)提示、按鈕點(diǎn)擊后的狀態(tài)變化、進(jìn)度條提示等。

2、環(huán)境貼切原則

設(shè)計的一切表現(xiàn)和表述,盡可能貼近用戶所在的環(huán)境,將現(xiàn)實(shí)環(huán)境的操作功能巧妙的轉(zhuǎn)化為線上功能,使其貼近用戶。使用用戶能聽懂的專業(yè)術(shù)語,涉及到專業(yè)化語言時要轉(zhuǎn)化成用戶熟悉的語言。

即模擬真實(shí)的事物,使用戶更容易理解。例如:天氣應(yīng)用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品,降低理解成本。

3、操作可控原則

對于用戶的誤操作,提供二次確認(rèn)或者撤銷的功能,這樣可提高用戶的操作可控性。

例如:刪除聯(lián)系人二次確認(rèn)提示、消息可撤回操作。

4、一致性原則

遵循統(tǒng)一的產(chǎn)品設(shè)計規(guī)范/邏輯。這里的一致性包含產(chǎn)品和跨平臺產(chǎn)品之間的一致性。

一致性包含視覺交互、文案描述、組建樣式等,例如:微信小程序設(shè)計規(guī)范。

5、防錯原則

設(shè)置防錯的機(jī)制,減少用戶犯錯。在用戶選擇動作發(fā)生之前,就要防止用戶容易混淆或者錯誤的選擇。

例如:用戶名稱校驗(yàn)提示、手機(jī)號碼位數(shù)限制等。

6、易取原則

減少用戶記憶負(fù)荷,在適合的時機(jī)給用戶需要獲取的信息。

例如:驗(yàn)證碼讀取、找人轉(zhuǎn)賬提示等。

7、靈活高效原則

提供靈活的操作和高效的獲取信息能力。

例如:手機(jī)號碼一鍵登錄、消息關(guān)鍵字識別等。

8、優(yōu)美簡約原則

保留產(chǎn)品最主要的信息,如果不是優(yōu)先級最高,要盡一切可能避免去影響產(chǎn)品的簡潔和美觀。

9、容錯原則

用戶在使用產(chǎn)品過程中出現(xiàn)了問題,及時準(zhǔn)確的告知用戶出現(xiàn)問題的原因。

例如:信息輸入提示、搜索無結(jié)果等。

10、提供人性化幫助

在用戶需要的時候提供必要的幫助說明。

例如:新功能引導(dǎo)、解釋說明文案等。



七個交互設(shè)計定律


1、菲茲定律

點(diǎn)擊一個目標(biāo)的時間同以下兩個因素有關(guān):

(1)設(shè)備當(dāng)前位置和目標(biāo)位置的距離(D)。距離越長,所用時間越長;

(2)目標(biāo)的大?。⊿)。目標(biāo)越大,所用時間越短。

該定律經(jīng)常運(yùn)用于鼠標(biāo)從點(diǎn)A到點(diǎn)B的運(yùn)動。

例如常用按鈕的尺寸設(shè)計等。

2、希克定律

一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。

交互設(shè)計中要合理設(shè)置選項(xiàng),以免用戶使用中決策時間過長,降低使用效率。

3、米勒7±2定律

喬治米勒對短時記憶能力進(jìn)行了定量研究,他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊,在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯。

例如:手機(jī)號碼的分位顯示、應(yīng)用中標(biāo)簽欄數(shù)量等

4、鄰近性法則

人們通常將距離近的事物劃分為一組。

界面設(shè)計中可以用對象間的相對距離來區(qū)分信息層級。

5、復(fù)雜性守恒定律

每個應(yīng)用程序都具有其內(nèi)在的、無法簡化的復(fù)雜度。無論在產(chǎn)品開發(fā)環(huán)節(jié)還是在用戶與產(chǎn)品的交互環(huán)節(jié),這一固有的復(fù)雜度都無法依照我們的意愿去除,只能設(shè)法調(diào)整、平衡。

例如:在智能手機(jī)出現(xiàn)之前,手機(jī)上的操作按鈕都是實(shí)體按鈕。在智能手機(jī)出現(xiàn)手,手機(jī)被整個屏幕占據(jù)后,所有的操作都集合在了手機(jī)系統(tǒng)之中,等于把物理操作轉(zhuǎn)移到了系統(tǒng)操作中,其本身的功能復(fù)雜程度并沒有發(fā)生改變,只是轉(zhuǎn)移了而已。


6、防錯原則

大部分的意外都是由設(shè)計的疏忽,而不是人為操作疏忽。因此,在設(shè)計中要有必要的防錯機(jī)制;在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。

例如:登錄時用戶名校驗(yàn),手機(jī)號碼位數(shù)限制等。

7、奧卡姆剃刀原則

“切勿浪費(fèi)較多東西去做,用較少的東西,同樣可以做好的事情。

”這個原理稱為“如無必要,勿增實(shí)體”,即“簡單有效原理”。

在設(shè)計中可以使用戶關(guān)注最主要的信息而非其它無關(guān)緊要的事物,從而提升使用效率。




三、交互設(shè)計如何開展工作


首先在交互設(shè)計師拿到需求后不要急著打開軟件開始繪制線框圖,而是要先分析需求,了解產(chǎn)品的戰(zhàn)略層和范圍層的業(yè)務(wù)目標(biāo)。把握產(chǎn)品設(shè)計大方向,只有方向?qū)α撕竺娴墓ぷ鞑攀怯袃r值的。

把握了產(chǎn)品方向,下面就該進(jìn)行需求的分析,

首先針對需求考慮5個問題:

1、為什么要做這個功能?(業(yè)務(wù)需求)

2、產(chǎn)品期望得到怎樣的成果?(業(yè)務(wù)目標(biāo))

3、誰來使用?(目標(biāo)用戶)

4、他們要怎樣使用?(用戶需求)

5、如何讓他們都來使用?(將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為用戶行為)

清楚這5個問題后,再根據(jù)交互設(shè)計流程進(jìn)行一步一步的進(jìn)行

這實(shí)際上就是對需求的戰(zhàn)略層分析。

我們進(jìn)一步分析業(yè)務(wù)需求(業(yè)務(wù)目的、業(yè)務(wù)目標(biāo))和用戶需求(目標(biāo)用戶、用戶體驗(yàn)?zāi)繕?biāo)),把握關(guān)鍵因素(用戶的動機(jī)、擔(dān)憂和影響目標(biāo)達(dá)成的障礙)。

歸納這些需求,明確設(shè)計策略。


將“業(yè)務(wù)目標(biāo)”轉(zhuǎn)化為“用戶行為”,通過引導(dǎo)用戶的使用來幫助產(chǎn)品實(shí)現(xiàn)目標(biāo)。

從設(shè)計“用戶行為”到設(shè)計“用戶界面”,用戶行為決定了用戶界面,用戶界面也導(dǎo)致了用戶會出現(xiàn)什么樣的行為。

設(shè)計需求分析方法就是要幫助用戶創(chuàng)造動機(jī)、排除擔(dān)憂、解決障礙。



四、如何進(jìn)行用戶研究,方法有哪些


評估的形式及方法


常見的評估形式分為三類:

1、評估主體:根據(jù)評估的主體不同來進(jìn)行區(qū)分,即誰來做評估。

按照評估主體來區(qū)分主要有兩個主體:用戶和專家

用戶評估主要靠收集用戶使用數(shù)據(jù),也就是用戶測試,它的數(shù)據(jù)相對客觀,但時間和費(fèi)用較多,評估范圍較窄。

專家評估是讓工程師及設(shè)計師等專家基于自身的專業(yè)知識和經(jīng)驗(yàn)進(jìn)行評估的一種方式。專家評估相對主觀,但費(fèi)時少、費(fèi)用少、評估范圍窄。

兩種評估方法可以相互補(bǔ)充,并結(jié)合使用。


2、評估性質(zhì):例如定性評估、定量評估或著其它方式。

按照評估的性質(zhì)來區(qū)分可以分為定量評估和定性評估。

定量評估是指對可以計量的部分進(jìn)行評價,如點(diǎn)擊量、使用率等,可以用數(shù)據(jù)來說明。

定性評估是指對非計量性的部分進(jìn)行評價,如流暢度、舒適性、創(chuàng)造性等進(jìn)行評價。它只能表示一個度,無法準(zhǔn)確用數(shù)據(jù)來說明問題。


3、評估過程:按照評估的過程來進(jìn)行區(qū)分。

從評估的過程來區(qū)分可以分為理性評估和感性評估。

理性評估相對客觀,從客觀的角度出發(fā)判斷客觀事物。

感性評估更為主觀,評估結(jié)果并沒有客觀規(guī)律。

在實(shí)際應(yīng)用中也需要將理性評估和感性評估結(jié)合使用,才能完整的完成我們的任務(wù),達(dá)到我們的目標(biāo)。


常見的評估方法有四種:

1、原型評估方法:在產(chǎn)品研發(fā)過程中,對于界面設(shè)計以及程序的測試來獲得用戶的反饋是至關(guān)重要的。以用戶為中心和交互式設(shè)計的重要因素之一就是原型方法,原型方法的目的是將界面設(shè)計與用戶的需求進(jìn)行匹配。

一般來說原型評估方法分為三大類型:

(1)快速原型:原型迅速成型并分配實(shí)施,在原型實(shí)驗(yàn)收集的信息基礎(chǔ)上,系統(tǒng)從草案中得以完善。

(2)增量原型:應(yīng)用與大型系統(tǒng),從系統(tǒng)的基本骨架開始,需要階段性的安裝,及系統(tǒng)的本質(zhì)特征是在初次安裝完成后允許階段性測試,以減少遺漏的重要特征。

(3)演化原型:對前期的設(shè)計原型不斷進(jìn)行補(bǔ)充和優(yōu)化,直到成為最后的系統(tǒng)。


2、簡易測試評估方法

在條件不允許的情況下,可以采取簡易的方法來對用戶體驗(yàn)進(jìn)行評價。步驟是:

(1)實(shí)驗(yàn)室環(huán)境準(zhǔn)備:準(zhǔn)備好測試用的電腦或其他媒介。兩個房間,房間1用來對被測試者進(jìn)行測試,房間2用于設(shè)計師和工程師的觀察。

(2)被試選擇:分為用戶組和專家組。

(3)進(jìn)行測試:房間1中被試者根據(jù)自己的選擇進(jìn)行操作和測試,同時說出自己的內(nèi)心想法,觀察員在調(diào)查表上記錄被試者的每一次的操作情況,包括出錯情況和被試者的口語描述,當(dāng)被試者在測試過程中遇到困難或操作無法進(jìn)行時,觀察員要給予一定的客觀提示。房間2中通過相關(guān)設(shè)備將房間1的情況傳輸?shù)椒块g2,設(shè)計師和工程師實(shí)時觀察和記錄被試者的情況,以便今后對產(chǎn)品做進(jìn)一步的修改和完善。

(4)結(jié)果分析:通過多次測試后,將測試結(jié)果匯總,提取出交互設(shè)計中存在的問題,以及對交互設(shè)計有益的建議形成測試報告。


3、眼動評估方法

眼動追蹤可以用來評價對產(chǎn)品(包括硬件產(chǎn)品和軟件產(chǎn)品)設(shè)計的感性意象,評測產(chǎn)品設(shè)計特征。眼動評估的主要指標(biāo)有注視熱點(diǎn)圖、搜索過程測量指標(biāo)、興趣區(qū)域即用戶視覺注意的焦點(diǎn)區(qū)??梢越Y(jié)合口語分析法了解用戶的所想 和所做。


4、腦電評估方法

通過對腦電信號的分析,研究者可以探索大腦的認(rèn)知加工過程和受試者的心理狀況。近年來腦電評估方法在人機(jī)交互心理學(xué)等領(lǐng)域應(yīng)用廣泛,被用來評估交互設(shè)計、人機(jī)界面、產(chǎn)品設(shè)計等方面的內(nèi)容。但是腦電評估也有一定的缺陷,例如空間分辨率上的局限性,因而對某些認(rèn)知過程和腦區(qū)的定位并不是很準(zhǔn)確。第二,在許多相似的實(shí)驗(yàn)研究中,由于研究者采用了不同的實(shí)驗(yàn)材料和方法等,實(shí)驗(yàn)結(jié)果也存在差異性。第三 ,由于采集記錄時間的滯后性,腦電所記錄的并不一定是當(dāng)下被試者所想到的內(nèi)容。


采取哪種方法來開展用戶測試和評估,要根據(jù)不同的任務(wù)結(jié)合不同的環(huán)境來開展,比如:時間、成本、資源等。



啟發(fā)式評估法

是專家評估法的一種,也被稱為經(jīng)驗(yàn)性評估,最初由Nielsen博士提出。簡單來說,啟發(fā)式評估是一種簡易的可用性評估方法,使用一套相對簡單、通用、有啟發(fā)性的可用性原則,讓幾個評審根據(jù)專業(yè)知識和經(jīng)驗(yàn)來進(jìn)行評估,發(fā)現(xiàn)產(chǎn)品潛在的可用性問題。


啟發(fā)式評估的兩大要素:評估者和評估參照的原則。   


對評估者的要求主要有四個方面:

(1)人數(shù):推薦3-5人,有時會更少

(2)知識:最好同時具有可用性知識及設(shè)計知識

(3)身份:最好是非設(shè)計者本人,否者不具有客觀性

(4)崗位:設(shè)計師或用戶研究員


評估參照的原則有:尼爾森十大可用性原則、八項(xiàng)黃金法則、首頁可用性指南、ios設(shè)計指南、拓展原則、HHS網(wǎng)頁設(shè)計與可用性指南等。具體需要根據(jù)實(shí)際項(xiàng)目來選擇,常用的是尼爾森十大交互原則。


什么時候適合使用啟發(fā)式評估法?

交互設(shè)計和UI設(shè)計階段、測試優(yōu)化和產(chǎn)品發(fā)布后的階段。


啟發(fā)式評估的優(yōu)缺點(diǎn)有哪些?

優(yōu)點(diǎn):成本低、效率高、發(fā)現(xiàn)大多數(shù)可用性問題,甚至是用戶測試時不會出現(xiàn)的問題。

缺點(diǎn):不能代表真實(shí)用戶,相對主觀、有時候發(fā)現(xiàn)問題過多、對評估人員知識背景要求較高。


什么時候適用?

(1)適合時間、資源有限的情況下快速發(fā)現(xiàn)可用性問題,降低風(fēng)險及成本。

(2)版本變動不大的情況下,小成本檢驗(yàn)。

(3)作為可用性測試的之前準(zhǔn)備。


啟發(fā)式評估流程是什么?

(1)準(zhǔn)備階段:確定范圍、背景調(diào)查、參考評估原則、評委邀約、材料準(zhǔn)備

(2)執(zhí)行階段:任務(wù)走查、整體走查、結(jié)果記錄

(3)分析階段:匯總討論、報告總結(jié)、優(yōu)化方案



可用性測試


先來看一下我們在平時工作中常常會聽到這樣的問題

產(chǎn)品經(jīng)理:我們的用戶覺得產(chǎn)品好不好用?使用過程中會不會遇到問題?他們是否滿意?

設(shè)計師:設(shè)計的過程有一些糾結(jié)的地方,不知道實(shí)際用戶是怎么理解和操作的怎么辦?

產(chǎn)品開發(fā)后:想在大推前檢驗(yàn)一下產(chǎn)品是否靠譜,適不適合大推?


當(dāng)我們遇到這樣的一些問題時,如何找到方法快速得到答案呢?

那就是接下來要介紹的可用性測試方法。


可用性測試是一種常用的、高效的方法。

它的定義是:通過觀察具有代表性的用戶,完成產(chǎn)品的典型任務(wù),從而找出產(chǎn)品可用性問題并解決,目的是為了改善產(chǎn)品,讓產(chǎn)品更容易使用。


什么時候適合做可用性測試呢?

一般是在:交互設(shè)計或UI設(shè)計、測試優(yōu)化、正式發(fā)布三個階段來做。當(dāng)然是越早做越好,可以盡早發(fā)現(xiàn)問題并及時調(diào)整。


類型分為兩種:形成式和總結(jié)式

形成式特點(diǎn):小樣本、發(fā)現(xiàn)問題為主、不能做定量對比。

總結(jié)式特點(diǎn):大樣本(30人以上)、定量的評估、可以做對比評估


可用性測試可以解決什么樣的問題?

1、發(fā)現(xiàn)問題,產(chǎn)品在體驗(yàn)上是否存在問題

2、檢驗(yàn)實(shí)現(xiàn),期望的設(shè)計目的有沒有達(dá)成,是否滿足了用戶的期望

3、產(chǎn)品評估,用戶是否會滿意

4、理解用戶,了解用戶行為習(xí)慣,了解用戶認(rèn)知,找到某些問題的原因


測試流程是什么?

整體上分為4個階段:1、準(zhǔn)備  2、測試  3、分析  4、優(yōu)化


1、準(zhǔn)備階段要做的有哪些?


確定目標(biāo):確定測試目標(biāo)決定了后面測試過程要怎樣去設(shè)計

常見的測試目標(biāo)有:

·對整個產(chǎn)品做可用性評估

·對新增的功能模塊進(jìn)行評估

·提前觀察新方案對新老用戶有怎樣的影響

·提前檢測改版是否達(dá)到預(yù)計目標(biāo)

·設(shè)計時存在爭議,如何選擇解決方案

·某個環(huán)節(jié)流失率較高,檢測是否為設(shè)計原因?qū)е?

·需要拓展某一類特殊用戶,測試針對這類用戶在設(shè)計上是否需要作出調(diào)整


準(zhǔn)備測試方案

方案中應(yīng)當(dāng)包含以下內(nèi)容:

·測試目的:明確測試的目的及范圍,測試目的決定了測試方案

·測試關(guān)注點(diǎn):與負(fù)責(zé)的設(shè)計師一起梳理測試中要關(guān)注的問題

·用戶招募:招募要求,樣本配比,招募渠道

·經(jīng)費(fèi)預(yù)算:獎勵的形式和額度

·時間計劃:用于把控時間計劃


撰寫測試腳本:設(shè)計測試任務(wù),通過用戶行為去觀察提問來獲得我們想要的內(nèi)容

基本的流程有:

·暖場:3min,簡單聊天,消除用戶的緊張情緒

·測試說明:2min,對測試內(nèi)容規(guī)則做說明

·測試前訪談:10min,了解用戶基本信息

·簡單試用:3min,讓用戶熟悉產(chǎn)品

·測試執(zhí)行:30-45min,提示任務(wù)并觀察

·事后訪談:15min,針對疑點(diǎn)問點(diǎn)追問,填寫評價表

·道別:5min,支付禮金,送用戶離開


招募用戶

招募什么樣的用戶呢?

·根據(jù)測試目的來定,找出與測試目標(biāo)有關(guān)的篩選緯度

·特別考慮用戶使用行為相關(guān)的特征,例如競品使用經(jīng)驗(yàn),使用產(chǎn)品的目的,用戶的活躍度等

·挑選最核心的緯度,轉(zhuǎn)化成用戶招募的條件,并盡量客觀化,具體化,可衡量

·避免設(shè)置交叉條件過多,導(dǎo)致樣本代表性降低

·學(xué)會辨別真假的用戶信息


招募多少用戶合適?

·以發(fā)現(xiàn)問題為目的快速可用性測試,6-8名即可

·考慮產(chǎn)品的復(fù)雜性,覆蓋人群差異性,適當(dāng)做調(diào)整,拓展到10-15名


招募渠道有哪些?

·公司內(nèi)部

·現(xiàn)有產(chǎn)品用戶庫

·公司其他產(chǎn)品用戶庫

·熟人,朋友等

·推廣渠道:官微、公眾號、門戶網(wǎng)等

·社區(qū),論壇,qq群等

·第三方調(diào)研公司


準(zhǔn)備測試素材:低保真或高保真原型,或線上已經(jīng)可以使用的產(chǎn)品,也可以準(zhǔn)備一些量表工具來輔助測試。在測試

過程中需要用到的電腦或手機(jī)設(shè)備,攝像頭,紙,筆,桌椅等。


測試場地選擇:

·專業(yè)可用性測試實(shí)驗(yàn)室:一般對測試質(zhì)量要求較高,旁聽人數(shù)較多且需要采集豐富的數(shù)據(jù)的時候采用此方法。實(shí)驗(yàn)室有兩個房間,一個測試間,一個觀察間,中間有單向玻璃分隔。測試間中有多角度的攝像頭,用來記錄測試過程,觀察間可以同步看到測試間里的情況,

·普通測試環(huán)境:在觀察人數(shù)較少(小于3人),條件有限時使用。


預(yù)測試階段:正式測試前進(jìn)行預(yù)測試,保證測試流程通暢

·走查:記錄可能出現(xiàn)的問題

·預(yù)測試:找人先測試一下

·調(diào)整:調(diào)整測試流程


正式測試階段

測試參與人員有

·主持人:引導(dǎo)整個測試流程

·記錄員:記錄操作行為,訪談內(nèi)容,發(fā)現(xiàn)問題等

·產(chǎn)品團(tuán)隊(duì):參與旁聽,觀察,結(jié)束后交流

·用戶:完成測試及訪談任務(wù)


測試過程中需要觀察的要點(diǎn):

·用戶是否獨(dú)立完成了任務(wù)

·是否存在無效操作或不知所措的情況

·用戶是否滿意


結(jié)果分析

邊測試邊總結(jié),越及時越好

·測試完一個用戶,做一次小結(jié)

·測試結(jié)束當(dāng)天寫小結(jié),與設(shè)計師當(dāng)場討論

·重要問題反饋后再總結(jié)分析報告

·邊測邊改,邊改邊測

結(jié)果分析4個步驟:1、對發(fā)現(xiàn)分類  2、整理不確定項(xiàng)  3、評定優(yōu)先級  4、結(jié)果記錄


撰寫報告

從4個方面來寫:

·總體如何

·有哪些問題

·嚴(yán)重程度如何

·建議是什么

·除此之外,還可以圍繞關(guān)注的問題,未滿足需求補(bǔ)充分析


優(yōu)化跟蹤

在測試之后需要出優(yōu)化的方案,測試優(yōu)化的過程是循環(huán)的。

測試之后如果還有其他問題沒有得到解決,可以結(jié)合其他的一些測試方法來得到。



問卷調(diào)研

問卷調(diào)查法是以書面提出問題的方式搜集數(shù)據(jù)的一種研究方法,研究者將所要研究的問題編制成問題表格,讓受訪對象以郵寄、當(dāng)面作答、在線作答或追蹤訪問的方式填寫,從而了解被試者對某一現(xiàn)象或問題的看法和意見。問卷調(diào)研可以用于需求挖掘階段,也可以用于產(chǎn)品上線后的評估階段。

如果是想了解用戶對產(chǎn)品上線后的滿意度,可以使用問卷調(diào)研的方法。它比較適合去了解用戶的認(rèn)知態(tài)度,也可以附帶了解用戶的行為習(xí)慣,


問卷調(diào)研的優(yōu)缺點(diǎn)

優(yōu)點(diǎn):統(tǒng)一性、靈活性、量化性、匿名性

缺點(diǎn):(1)只能獲得書面的信息,而不能了解到生動、具體的情況。(2)缺乏彈性,很難做深入的定性調(diào)研。(3)調(diào)查者難以了解被調(diào)查者是否認(rèn)真作答,是不是自己填寫的。(4)填寫問卷比較容易,有些別調(diào)查者會隨意選擇,或者按照社會主流觀點(diǎn)選擇,這樣會使調(diào)查失去真實(shí)性。(5)回復(fù)效率低,對無回答者的研究比較困難。


問卷調(diào)查的使用場景

適用于:(1)需要進(jìn)行定量分析的調(diào)研。(2)需要匿名進(jìn)行調(diào)研的問題。(3)對已有假設(shè)進(jìn)行檢驗(yàn)。(4)尋找問題隱藏的關(guān)聯(lián)。(5)對產(chǎn)品設(shè)計用戶認(rèn)知及態(tài)度的評估。

不適用于:(1)發(fā)現(xiàn)和描述具體問題。(2)探索受訪對象的模糊態(tài)度。(3)獲取創(chuàng)新想法。(4)獲取精確的行為數(shù)據(jù)。


問卷調(diào)研流程

1、確定目標(biāo):確定調(diào)研目的、對象、分析目的和應(yīng)用對象。

2、調(diào)研方案:通過訪談、經(jīng)驗(yàn)、理論等,確定調(diào)研框架,題目選項(xiàng),分析思路,投放渠道,相本配比等。

3、問卷設(shè)計:問卷設(shè)計,問題美化,投放渠道。

4、問卷測試:多人測試,確保問卷的可讀性,邏輯通暢

5、問卷投放:按照計劃好的投放渠道進(jìn)行投放,回收數(shù)據(jù),數(shù)據(jù)清洗

6、問卷分析及填寫報告:分析及報告填寫,調(diào)研結(jié)果落地



數(shù)據(jù)分析

概述:通過在網(wǎng)站或應(yīng)用中進(jìn)行數(shù)據(jù)埋點(diǎn),獲取用戶對產(chǎn)品的使用和行為數(shù)據(jù),并進(jìn)行基于產(chǎn)品體驗(yàn)優(yōu)化的數(shù)據(jù)進(jìn)行分析。


數(shù)據(jù)分析可以做什么?

1、可以做到用戶從哪里來,來了多少

2、獲取用戶屬性,用戶地域,用戶設(shè)備

3、訪問了哪些頁面,使用了哪些功能,消費(fèi)了多少錢,消耗了多少時間

4、哪些流量可能存在問題,忠誠度如何,活躍度如何,有沒有達(dá)到目標(biāo),和行業(yè)相比如何

5、流失情況如何,離開之后是否還回來

可以作為產(chǎn)品的眼鏡和大腦,提供客觀衡量的依據(jù),可以持續(xù)優(yōu)化改進(jìn)。


數(shù)據(jù)獲取方式的對比

日志文件:優(yōu)勢,完整的服務(wù)端請求記錄。

                  缺點(diǎn),日志的獲取和清洗有過濾成本,許多頁面操作無法記錄。

JS頁面標(biāo)記:優(yōu)勢,數(shù)據(jù)獲取可控、靈活,可以對頁面操作記錄進(jìn)行記錄,獲取數(shù)據(jù)比較完整豐富。

                      缺點(diǎn),需要在頁面植入JS標(biāo)記代碼,某些情況下無法獲取,如當(dāng)用戶禁用JS功能時。


常用的數(shù)據(jù)監(jiān)控平臺

1、第三方監(jiān)控平臺:如Google Analytics、百度統(tǒng)計、騰訊云分析等

2、自研平臺


數(shù)據(jù)分析流程

1、監(jiān)控  2、定義  3、埋點(diǎn)  4、測量  5、分析  6、優(yōu)化


Web分析常用的指標(biāo)

PV:是指頁面瀏覽量,網(wǎng)頁瀏覽數(shù)實(shí)施評價網(wǎng)站流量最常用的指標(biāo)之一,用戶每一次訪問網(wǎng)站中的頁面均被記錄,對統(tǒng)一頁面多次訪問,訪問量累計

UV:是指獨(dú)立訪客,是通過互聯(lián)網(wǎng)訪問、瀏覽這個頁面的自然人

UPV:是指唯一身份綜合瀏覽量

訪問:是指在一定時間范圍內(nèi),網(wǎng)站所有訪問者對網(wǎng)站發(fā)起訪問的總次數(shù),從訪客來到網(wǎng)站到最終關(guān)閉網(wǎng)站所有頁面,記為一次訪問

識別用戶的方式:IP、IP+User Agent、cookie、User ID、設(shè)備ID、其他


復(fù)合指標(biāo)

跳出率:指用戶來到網(wǎng)站,只瀏覽了一個頁面就離開的訪問次數(shù),占全部訪問次數(shù)的百分比,簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質(zhì)量,高跳出率表示訪問者對著陸頁面不感興趣,沒有繼續(xù)訪問更深入的頁面。也可能頁面設(shè)計存在問題,也可能是導(dǎo)入的用戶不匹配。跳出率可以通過調(diào)整廣告渠道,優(yōu)化頁面內(nèi)容來降低。

退出率:訪問者離開網(wǎng)站一次被記錄為一次退出,某一范圍內(nèi)退出的數(shù)量/該范圍的綜合訪問量就是退出率。如果關(guān)鍵流程中的某一頁面退出率高,代表某一頁面可能出現(xiàn)了問題。

訪問時長:網(wǎng)站停留時長,頁面停留時長,應(yīng)用使用時長。訪問量是訪問質(zhì)量的一個衡量指標(biāo),較長的訪問時間說明用戶與產(chǎn)品進(jìn)行了較多的互動。

訪問深度:可以理解為單個用戶平均訪問的頁面數(shù),是PV/UV的比值。訪問深度也是訪問質(zhì)量的一個衡量指標(biāo),可以考察用戶是否和網(wǎng)站進(jìn)行了較多互動。這個比值越大,代表網(wǎng)站的粘性越高。

轉(zhuǎn)化率:指在一個統(tǒng)計周期內(nèi),完成轉(zhuǎn)化目標(biāo)行為的次數(shù)占總訪問次數(shù)的比率。根據(jù)設(shè)置不同目的進(jìn)行計算,例如注冊轉(zhuǎn)化率、付款轉(zhuǎn)化率等,是一個重要的分析指標(biāo)。


移動端基礎(chǔ)指標(biāo)

移動端的基礎(chǔ)指標(biāo)監(jiān)測與web端略有不同,但分析思路大致相同。指標(biāo)分為:新增設(shè)備、累計設(shè)備、啟動次數(shù)、單詞使用時長。


常見分析內(nèi)容

流量分析(哪里來?)、用戶分析(什么樣的用戶?)、行為分析(如何使用的?)、路徑轉(zhuǎn)化(表現(xiàn)如何?)、流失分析(粘性如何?)



A/B test

A/B測試是一種幫助網(wǎng)頁優(yōu)化實(shí)驗(yàn)的方法。A/B測試的目的在于通過科學(xué)的實(shí)驗(yàn)設(shè)計和采集數(shù)據(jù)的方式,來獲得具有代表性的實(shí)驗(yàn)結(jié)論,從而尋找到更好的產(chǎn)品策略。

簡單來說,就是為同一目標(biāo)制定兩個方案,讓一部分用戶使用A方案,另一部分使用B方案,記錄用戶的使用情況,對比兩個方案的結(jié)果,選擇更符合的方案。

A/B test一般會在產(chǎn)品改版正式上線之前使用,來驗(yàn)證新的設(shè)計是否可以提高產(chǎn)品的表現(xiàn)。


A/B test可以測試的元素有:標(biāo)題、圖片、顏色、社交元素、段落文本、按鈕、導(dǎo)航、任務(wù)流程、頁面布局、價格、視頻等。可一次只改變一個元素或一次改變多個元素的方式來測試,這就是兩個測試類型單變量測試和多變量測試。


A/B test工具

Google Website Optimizer:搜索巨頭提供的免費(fèi)A/B test工具,一個很好的入門級工具,但是沒有一些先進(jìn)的功能。

Visual Website Optimizer:一個易于使用的A/Btest測試工具,包含功能有所見即所得的編輯器,單機(jī)地圖,訪問者分割和標(biāo)簽等。

Unbounce and Performable:集成著陸設(shè)計的A/B測試工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企業(yè)級測試工具

App Adhoc Optimizer:國內(nèi)A/B Test工具,同時支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB測試服務(wù)的專業(yè)Saas平臺

Optimizely:是網(wǎng)上現(xiàn)有的最專業(yè)的AB測試工具之一,它的價格要比其他的工具高很多(也可以免費(fèi)使用一個月),它提供了一些非常好的功能。

Unbounce:對于登錄頁面的測試來講非常不錯,而且它不僅僅是個測試工具,還可以在無需自己編寫任何代碼的情況下來創(chuàng)建登錄頁面。


如何做A/Btest

1、確定目標(biāo),例如提高網(wǎng)站的付費(fèi)轉(zhuǎn)化率,降低跳出率等

2、測試方案,建立假設(shè):購買按鈕的顏色會影響點(diǎn)擊率?縮短流程可以提高復(fù)費(fèi)率?改變導(dǎo)航可以降低跳出率等?

3、創(chuàng)建相比較的兩個版本,改變其中的變量

4、發(fā)布測試,將部分流量導(dǎo)向B方案,但不一定是5:5

5、數(shù)據(jù)分析,收集數(shù)據(jù),對比AB版本的轉(zhuǎn)化率、跳出率、留存率等



感謝閱讀!



文章來源:站酷   作者:_微光

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

從3個方面,總結(jié) Figma 值得借鑒的交互細(xì)節(jié)!

周周

近一年來,F(xiàn)igma 可謂是體驗(yàn)設(shè)計領(lǐng)域中最熱門的工具。剛好最近開始頻繁的在 Axure 9.0 和 Figma 中切換使用,深刻的感受到了設(shè)計細(xì)節(jié)帶來的體驗(yàn)差異化。今天就通過一些細(xì)節(jié)亮點(diǎn),總結(jié)下工具軟件的體驗(yàn)設(shè)計的幾個原則。

交互設(shè)計的輸出文檔撰寫方法

純純

交互輸出文檔的作用

文檔這個東西,我們又愛又恨,愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調(diào)合作,恨的就是很多人對文檔嗤之以鼻非常敷衍,以至于文檔不但沒有起到它應(yīng)有的作用,反而成為了一個不負(fù)責(zé)任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對于一個項(xiàng)目的流轉(zhuǎn)以及團(tuán)隊(duì)的配合來說是至關(guān)重要的。交互文檔的主要利益相關(guān)者通常是以下幾個角色:交互、產(chǎn)品、開發(fā)、UI


交互

首先優(yōu)秀的交互文檔必須在交互組內(nèi)部進(jìn)行過審核,包括一致的撰寫標(biāo)準(zhǔn)和模式的使用,一個比較規(guī)范的交互設(shè)計組對于交互的撰寫標(biāo)準(zhǔn)也是有嚴(yán)格的規(guī)范的,以及在什么情況使用什么交互模式還有組件庫的調(diào)用都會有詳細(xì)的說明,那么你的交互輸出文檔就必須滿足團(tuán)隊(duì)設(shè)定的規(guī)范。


其次對于其他交互設(shè)計師來說,你的設(shè)計方案中是否會出現(xiàn)其他人負(fù)責(zé)的模塊,那么在評審的時候需要同步,雖然交互輸出文檔對于其他交互來說不是直接受益人,但是在團(tuán)隊(duì)同步過程中也是非常重要的。


產(chǎn)品

每個公司對于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設(shè)計這個崗位,那么可能產(chǎn)品連prd文檔也沒有,僅僅只是一個簡易的需求說明文檔,就更不用說針對交互規(guī)則的說明文檔了。


很多有完善規(guī)模和流程的團(tuán)隊(duì)不僅會有詳細(xì)的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點(diǎn)是那么多文檔最后是給誰看的,一共在項(xiàng)目中會有多少文檔產(chǎn)生。


通常產(chǎn)品經(jīng)理會在項(xiàng)目初期做一份prd文檔(Product-RequirementDocument,需求說明文檔),這個prd文檔主要是給業(yè)務(wù)方、交互和開發(fā)看的,在這個文檔中需要包含一些業(yè)務(wù)規(guī)則以及交互規(guī)則,所以交互的輸出文檔是需要和產(chǎn)品的prd文檔合并的。


當(dāng)然如果你是一位很有自驅(qū)力的人,那么你可以自己推進(jìn)需求并落地,一個人就可以完成prd文檔的撰寫和需求的落地了。


開發(fā)

特別想給各位提個醒,在開發(fā)需求評審的過程中,請一定記住你們評審的目的,開發(fā)同學(xué)也要注意,請把重點(diǎn)放在需求是否能實(shí)現(xiàn)以及開發(fā)相關(guān)的地方即可,請不要考慮為什么要這樣做,或者你覺得應(yīng)該怎么設(shè)計,一旦進(jìn)入了開發(fā)對需求和設(shè)計的評頭論足那么這個會議效率就相當(dāng)?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧,可以私下討論但不要在評審會上各抒己見。


交互輸出文檔對于開發(fā)的作用就是,開發(fā)可以更好的還原該功能中交互的跳轉(zhuǎn)以及邏輯,所以我們盡量把交互規(guī)則寫明白寫詳細(xì),比如按鈕在press和default時候是否樣式會有變化,或者頁面轉(zhuǎn)場的方向,這都是一些細(xì)節(jié),減少不必要的低效溝通。你會發(fā)現(xiàn)有些時候?yàn)槭裁撮_發(fā)總是來問一些規(guī)則,就是因?yàn)槲臋n中沒有描述準(zhǔn)確,所以開發(fā)和交互都需要花時間去同步這個細(xì)節(jié)。



所以這個也非??简?yàn)交互設(shè)計師對需求文檔撰寫的功底,并不是圖片文字隨意擺放就可以的。和開發(fā)合作時也是一項(xiàng)內(nèi)部的體驗(yàn)設(shè)計,你把文檔寫好了,開發(fā)看起來也舒服,滿意度也高。如果是一堆文案,連基本的對齊都沒做到的話,誰來看都會看不下去。


UI

交互輸出文檔對于UI來說,作用就非常簡單了,但是這里也會碰到問題,那就是交互同學(xué)只需要把信息的層次表示出來即可,千萬不要畫到連視覺同學(xué)都沒有發(fā)揮余地的程度。所以為什么現(xiàn)在UXD體驗(yàn)設(shè)計那么火,就是因?yàn)榻换ズ蚒I其實(shí)重合度是很高的,只要有智能化組件庫和工具做支撐,那么在交互和UI的設(shè)計流程中,時間就會大大降低。


交互輸出文檔的內(nèi)容

在這里,我們就將整個prd文檔的內(nèi)容給大家分享一下,不僅僅是交互需要輸出的部分。因?yàn)橐粋€高階的交互是需要能夠獨(dú)自產(chǎn)出prd文檔的。然后不同的公司對與文檔的要求也是不同,大家做參考即可。


一份基礎(chǔ)的prd文檔主要由這幾部分組成(其實(shí)就是這個需求的來源以及推導(dǎo)過程和如何落地的說明):



1.項(xiàng)目概要

a.需求背景

這個是一個項(xiàng)目最重要的部分,可以說背景沒有搞清楚,后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業(yè)務(wù)方(運(yùn)營)需要做一個掃一掃功能,那么這個功能首先我們就從業(yè)務(wù)價值和用戶價值兩個方面去評估,根據(jù)對業(yè)務(wù)方的溝通之后我們發(fā)現(xiàn)掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼,讓用戶進(jìn)行掃碼參與活動這樣的玩法。



所以這個需求對于業(yè)務(wù)方來說是一個轉(zhuǎn)化手段,通過掃碼參與活動-領(lǐng)券-消費(fèi),確實(shí)是一個不錯的玩法,但是大家如果只盯著眼前的問題或許就不夠了,比如當(dāng)周年慶結(jié)束之后這個功能還有什么用,他在以后的規(guī)劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。


其次,對于用戶來說,掃一掃并不是幫助他們解決了某個問題,而是我做了一個東西,同時搭配著這個功能讓你們?nèi)ナ褂?,對用戶來說是一個很可有可無的功能,如果線下包裹上的二維碼破損了也是非常影響體驗(yàn)并且是不可控的。那么綜上所述,既然要做一個臨時的活動用其他的方式會不會更好?


所以在這個文檔中的第一步,首先就是要確定需求的背景、價值,也就是說,你這個需求是怎么來的,比如再來講我們一個店鋪的優(yōu)化項(xiàng)目,在這個項(xiàng)目中,首先我們必須在評審的時候說清楚我們?yōu)槭裁匆獙ζ溥M(jìn)行優(yōu)化和改版,一定是出現(xiàn)了或者我們定義到了某個比較嚴(yán)重的問題,這邊大家對我們app業(yè)務(wù)可能不是很了解我就簡單說了,就是個人中心和店鋪營銷場景重合過多,并且賣家的同時可以買和賣兩個場景存在,所以店鋪頁通過我們的數(shù)據(jù)分析和用戶的訪談我們發(fā)現(xiàn)了一些機(jī)會點(diǎn),以及我們必須突出一個核心場景讓用戶有明確的分辨。


另外就是背景的描述也可以帶上你的調(diào)研結(jié)果和分析,比如之前我們做首頁優(yōu)化,我們觀察了近5個月的數(shù)據(jù),都呈現(xiàn)下降的趨勢,所以之后有進(jìn)行了一系列的訪談和用戶體驗(yàn)地圖分析才有了這個需求的背景產(chǎn)生。



b.需求目標(biāo)

目標(biāo)很好理解,就是我們希望通過這次需求迭代達(dá)到一個什么成果,比如我們之前做過一次整體的體驗(yàn)優(yōu)化改版,那么我們的目標(biāo)就是減少用戶的流程跳失、提升整體體驗(yàn)滿意度、提高用戶的任務(wù)轉(zhuǎn)化率,其中我們做了一個商品關(guān)注的功能,由于是限時特價商品所以是限量的,在規(guī)定時間進(jìn)行搶購,為了讓用戶的使用場景統(tǒng)一我們打算在應(yīng)用內(nèi)做一個商品關(guān)注功能,所以在這個需求的初期,我們對這個功能的目標(biāo)和預(yù)期是提升xx百分比的轉(zhuǎn)化,提高x%比的gmv,提高用戶對關(guān)注商品下單的效率和滿意度,之前很多用戶想要購買商品需要自己在手機(jī)端設(shè)置鬧鐘,不方便。所以這個功能的一個目標(biāo)就是解決用戶場景遷移的問題。設(shè)定目標(biāo)之后,就是為了在上線后對其進(jìn)行復(fù)盤和數(shù)據(jù)跟蹤還有用戶跟蹤。

可以用一句話來描述:針對什么用戶在什么場景下解決用戶的什么問題,達(dá)到什么目的?



c.需求范圍

需求范圍也相當(dāng)于范圍層,指的就是在該需求中我們需要做哪些相關(guān)功能以及功能涉及面。舉個例子,之前說的掃一掃功能,不同的產(chǎn)品定位對于掃一掃功能的要求也是不同的,比如說微信在掃一掃功能中承載了:掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能,再比如淘寶,有掃一掃(ar、拍立淘)、相冊、歷史、幫助、手電,這說明了不同產(chǎn)品對掃一掃功能有不一樣的要求,所以在需求范圍內(nèi)我們需要把本次需要做的功能進(jìn)行描述,并且該功能是否影響其他功能的使用和對整個產(chǎn)品的影響范圍。并且我們也會講所需要的功能進(jìn)行拆解和優(yōu)先級拆分,在表格中編輯。



d.調(diào)研分析

調(diào)研分析其實(shí)就是為我們第一步背景和價值做準(zhǔn)備,由于匯報方案和評審,或者在項(xiàng)目推進(jìn)時,我們需要有相應(yīng)的論據(jù)來支撐我們方案的客觀性,所以在這一板塊中輸出的結(jié)論就非常重要,比如之前的首頁改版,經(jīng)過用戶研究小組的訪談和數(shù)據(jù)分析得出相關(guān)的結(jié)論,通過埋點(diǎn)找到相應(yīng)板塊的點(diǎn)擊數(shù)據(jù)和異常點(diǎn),然后再進(jìn)行一系列的問卷和訪談研究,找到結(jié)果,都是為了輔助項(xiàng)目的背景以及在評審中大家對需求價值的靈魂拷問。由于數(shù)據(jù)和調(diào)研結(jié)果比較敏感就不過多放了。


e.版本日志

日志是一個非常重要的組成部分,做過開發(fā)的同學(xué)都知道log 的重要性,當(dāng)我們跑不通的時候我們都會去檢查log,然后多測試幾遍可能就找到問題所在了,其實(shí)我們的版本日志的作用也是這樣,但是一個是對自己來說可以記錄自己的工作過程,還有思路的變化,第二就是對外,包括和需求方的討論,會議的紀(jì)要等。


要注意的是會議紀(jì)要在備注中需要詳細(xì)說明,以做證據(jù)。同時也要郵件通知相關(guān)人員和負(fù)責(zé)人。可能有些公司還會放一些評審記錄,比如各部門負(fù)責(zé)人對方案和需求的建議,業(yè)務(wù)方和技術(shù)負(fù)責(zé)人的一些建議也會放在項(xiàng)目概要中,而這個prd文檔也可通過內(nèi)部服務(wù)器進(jìn)行實(shí)時更新和保存,如svn。方便大家對需求的進(jìn)度和迭代有一個直觀的追蹤。

f.項(xiàng)目成員

這個就不用多說了,產(chǎn)品、運(yùn)營、交互、視覺、開發(fā)各司其職,照相館人員即可,就不至于當(dāng)項(xiàng)目開始進(jìn)行了人員分配還沒到位就尷尬了。


2.需求方案設(shè)計

a.業(yè)務(wù)、任務(wù)、界面流程圖

有些同學(xué)不是特別明白業(yè)務(wù)流程圖和任務(wù)流程圖的區(qū)別,這邊給大家簡單介紹一下


業(yè)務(wù)流程圖:

意思就是在這個需求系統(tǒng)中,相關(guān)利益者的業(yè)務(wù)關(guān)系,任務(wù)信息的流向的一個圖標(biāo)。比如這個簡單的例子,用戶在點(diǎn)外賣這個場景中,相關(guān)的利益者有用戶、店家、外賣員三者,那么當(dāng)用戶開始觸發(fā)流程后,這3者在這個流程中就會各司其職,而業(yè)務(wù)流程圖也很明顯的告訴大家所有聯(lián)動者的指責(zé)和流程走向。


任務(wù)流程圖:

用戶在具體執(zhí)行某一個任務(wù)時候的工作流程,以及其核心任務(wù)的操作步驟,比如在登錄注冊這個任務(wù)中,用戶需要進(jìn)行一系列的操作,在這個流程中用戶的操作引發(fā)的系統(tǒng)判斷需要詳細(xì)說明。



界面流程圖:

界面之間的跳轉(zhuǎn)關(guān)系和路徑,在這個流程圖中,我們不需要吧詳細(xì)的說明寫上,只需要將需求中涉及到的頁面跳轉(zhuǎn)進(jìn)行敘述即可。

b.相關(guān)說明和規(guī)則

接下來就要開始我們交互文檔最為關(guān)鍵的部分了,如何書寫交互說明,以及交互說明應(yīng)該包含的內(nèi)容。


1.全局思考

在做交互方案也就是我們畫原型的時候會思考一些問題:

a.整體思考

1.信息架構(gòu)是否容易理解,信息分類是否合理,比如我們的信息架構(gòu)是否采用了用戶容易理解的,市面上常用的信息架構(gòu)。


2.信息層級和路徑是否合理,不一定要最簡,但是要高效,信息的優(yōu)先級是否放置準(zhǔn)確,信息組織是否具有相關(guān)性、邏輯性。


3.主題是否清晰,3秒內(nèi)告訴“我”在哪里,并且可以做什么


4.方案的延展和后續(xù)功能規(guī)劃的可擴(kuò)展性


b.用戶權(quán)限

根據(jù)不同用戶的權(quán)限對該需求進(jìn)行檢查,比如普通用戶、vip用戶、內(nèi)外網(wǎng)用戶、游客用戶,在登錄未登錄時候?qū)π枨髢?nèi)功能的使用是否有影響


c.登錄方式

用戶登錄和注冊、終端的兼容,不同方式注冊的用戶是否需要補(bǔ)填相關(guān)信息等等


d.流程

1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性;

2.逆向流程和非正常流程的思考有沒有完全;

3.流程的閉環(huán)有沒有做好;頁面跳轉(zhuǎn)的方式是否合理;

4.中斷后的恢復(fù)狀態(tài)如何呈現(xiàn);

5是否保留原信息等等


2.內(nèi)容、狀態(tài)和顯示

a.內(nèi)容的獲取來源

例如下方的圖片為例,banner的圖片來源和發(fā)現(xiàn)feed流的圖片來源肯定是不同的,那么就要寫清楚,圖片或者數(shù)據(jù)的來源是來自于用戶的上傳還是系統(tǒng)后臺的配置獲?。徊⑶耀@取的方式是如何的,是需要手動下啦刷新還是切換頁面自動刷新,還是設(shè)定時間自動刷新。


字段、圖標(biāo)是從接口獲取還是前端寫死,以及氣泡展示的規(guī)則等等。另外一張圖片可能用在多個地方,而可能呈現(xiàn)的尺寸不同,所以在涉及到相關(guān)圖片使用時要注意剪裁規(guī)則和圖片的來源。

b.緩存機(jī)制

圖片以及一些資源通常我們需要對其進(jìn)行緩存,有些同學(xué)不清楚什么是緩存,緩存是在計算機(jī)上的一個原始數(shù)據(jù)的復(fù)制集,一般來說需要緩存的內(nèi)容是通過瀏覽產(chǎn)生的,包括圖片以及cookie等,瀏覽過的視頻和廣告也會被緩存。同時在不同的網(wǎng)絡(luò)環(huán)境下緩存的時間標(biāo)準(zhǔn)也不同,無網(wǎng)絡(luò)那肯定只能讀取緩存文件,wifi環(huán)境下緩存時間可設(shè)置的短一些,而流量環(huán)境下時間就可以設(shè)置的偏長。


c.狀態(tài)

狀態(tài)大家都應(yīng)該都會寫,主要包含的就是初始狀態(tài)(冷啟動無緩存第一次進(jìn)入)、空狀態(tài)(無任何內(nèi)容比如空的購物車)、常規(guī)狀態(tài)、異常狀態(tài)(網(wǎng)絡(luò)中斷、接口報錯)還有過期狀態(tài)等


d.顯示

數(shù)據(jù)和內(nèi)容的極限值,最大和最小,比如粉絲和關(guān)注的數(shù)量,小于1萬人則顯示完整的數(shù)量,大于等于1萬小于11000則顯示1萬,大于11000小于12000則顯示1.1萬,這樣的方式。另外包括標(biāo)題極限為一行顯示,超過部分的顯示規(guī)則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用¥xxx還是xxx元,小數(shù)點(diǎn)保留的規(guī)則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等



3.反饋、提示、手勢

反饋和提示的樣式有很多種,一般反饋指的是用戶對某一個控件進(jìn)行觸發(fā)后獲得的反饋,比如按鈕按下的反饋,以及之后收到的反饋,是進(jìn)行跳轉(zhuǎn)還是給用戶提示,采用的是模態(tài)還是非模態(tài)的提示。比如點(diǎn)擊關(guān)注某個人的按鈕后會提示關(guān)注成功,比如退出某個圖文編輯會二次確認(rèn)是否退出,再比如抖音長按后出現(xiàn)的3個操作反饋,還有支付成功后的動效提示、惡意多次操作后的提示等等


如果有手勢交互也需要說明,比如滑動后內(nèi)容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等



4.加載

使用模態(tài)還是非模態(tài),如果是模態(tài)加載請盡量使用情感化設(shè)計來減少用戶焦慮。如果是非模態(tài),根據(jù)信息呈現(xiàn)和體驗(yàn)采用分步加載還是預(yù)加載還是智能加載。如果是分布加載就選擇先加載資源較小的內(nèi)容,再加載圖片,可以先將圖片模糊化粗渲染給用戶呈現(xiàn),包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預(yù)判用戶的行為進(jìn)行內(nèi)容加載,例如當(dāng)用戶在某個圖文前停留時間達(dá)到某個值后就預(yù)先給用戶加載里面的內(nèi)容。


加載的全局方式在方案中需要考慮,頁面加載、下啦刷新等等,需要統(tǒng)一。



5.環(huán)境、設(shè)備與場景

a.不同設(shè)備、廠商的不同版本


都會影響到方案的落地和用戶體驗(yàn)這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好,但是小屏幕的時候這個交互控件顯得就很難受,所以需要仔細(xì)斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進(jìn)行兼容。


b.白天和晚上是否需要做不同的風(fēng)格設(shè)計,以及在是否需要給用戶遮擋隱私的功能。



6.文案

文案這點(diǎn)很多設(shè)計師都忽略了,你們有沒有聽說過一個叫文案設(shè)計師的崗位。其實(shí)文案在我們產(chǎn)品設(shè)計中是非常重要的。首先一個產(chǎn)品的文案對應(yīng)的語氣和產(chǎn)品調(diào)性也是相關(guān)的,就好比我們說產(chǎn)品有它自己的性格一樣,另外文案的使用直接就影響用戶對該信息的理解,比如一個對話框的文案是:確定退出嗎?下面會有兩種不同的選擇,一個確定,一個是退出,大家覺得哪個比較好?還有就是不加“嗎”,就變成了:確定退出?這樣描述出來的語言給人感覺很冰冷,甚至有一些威脅。


所以首先我們的文案是否有溫度,和產(chǎn)品的個性是否相匹配。其次文案的表述是否準(zhǔn)確和通俗易懂,比如你告訴程序員一句話,幫我去菜市場買西瓜,如果有西紅柿,幫我買兩個,你會帶什么東西回家?程序員版:if(看到西紅柿)西瓜等于2;else 西瓜=1。buy 西瓜。條件:看見西紅柿 執(zhí)行命令:買兩個西瓜一語道破版:其實(shí)吧,看到西紅柿呢是賣兩個西瓜的觸發(fā)條件…沒看到就買一個西瓜,看到就買兩個西瓜。所以這里出現(xiàn)的不僅僅是程序員的思維和我們的差異化,也說明了一句話沒有表述清楚所帶來的問題是很大的。


另外就是文案用語的一致性,在整個產(chǎn)品同樣的場景中,我們需要統(tǒng)一文案用語。


7.常見控件

具體見下方列表



8.撰寫方式

作為一個設(shè)計師,不管是否在做視覺,我們都需要對文檔有一個美化意識,如果你的文檔非常凌亂,那么在別人眼里就會覺得你是一個比較粗心大意,不夠負(fù)責(zé)任的人,所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。


目錄

首先在目錄的撰寫時候要進(jìn)行分類,通常我做的時候會對該需求以頁面父子集關(guān)系進(jìn)行創(chuàng)建,父集為核心頁面,子集為其下的相關(guān)子頁面,這樣頁面的流轉(zhuǎn)和歸屬關(guān)系就不會搞錯。


說明

在撰寫規(guī)則與說明時可以通過標(biāo)簽法進(jìn)行標(biāo)簽說明的撰寫方式,同樣在視覺上保持美觀,對比與對齊的運(yùn)用,具體該寫什么東西上面已經(jīng)說明就不贅述了。除了交互規(guī)則以外,高階的交互設(shè)計或者產(chǎn)品經(jīng)理還需要補(bǔ)充業(yè)務(wù)規(guī)則,比如排序、商品抓去規(guī)則、權(quán)重、算法、活動規(guī)則等等這里就不展開說了。


總結(jié)

文檔的形式有非常多種,針對不同的公司和產(chǎn)品也需要作出相應(yīng)的調(diào)整,能夠滿足需求和方便協(xié)作,目的就達(dá)到了,我們并不希望過多的時間花在文檔的撰寫上,而是希望大家在做設(shè)計時多思考業(yè)務(wù),本次分享就到這里啦~

文章來源:站酷   作者:應(yīng)駿

分享此文一切功德,皆悉回向給文章原作者及眾讀者.



免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。



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


談?wù)勀切┍徽`用的交互設(shè)計模式

純純

習(xí)慣性的去應(yīng)用一些所謂的最好的設(shè)計模式,可能會讓你覺得Google,F(xiàn)acebook,Instagram或者說其他的一些你最喜歡的APP總是做的非常棒,你會覺得,他們的設(shè)計目標(biāo)和你自己的設(shè)計目標(biāo)并沒啥差別,但是,人家成功了,而你的作品卻失敗了。所以,這里推薦一些被公認(rèn)為是(至少曾經(jīng)被公認(rèn)為)最好的設(shè)計模式,可能在你第一次看來,這些設(shè)計模式也就那樣。


1、隱藏導(dǎo)航


關(guān)于漢堡圖標(biāo),已經(jīng)有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過,試著去讀一兩篇吧。其實(shí),簡單說來,這些文章討論的主題更主要的是這個圖標(biāo)里所隱含的那些導(dǎo)航,而不是這個圖標(biāo)自身。



上面圖片這樣的設(shè)計對于設(shè)計師來說其實(shí)是很有吸引力的,而且簡直太方便了。根本不用擔(dān)心屏幕大小的限制,只需要這樣一個圖標(biāo),然后,把所有的導(dǎo)航全部塞進(jìn)這個可以上下滾動的東西里,然后,讓他默認(rèn)隱藏。就這樣,就這么簡單。


但是,實(shí)驗(yàn)證明,與完全隱藏導(dǎo)航相比,適當(dāng)?shù)恼故境鲆恍?dǎo)航能夠更多的增加用戶的依賴度和滿意程度,甚至為你帶來更多的收入。所以說,現(xiàn)在的好多大公司的播放器都拋棄了以前的漢堡圖標(biāo),將最常用的一些導(dǎo)航一直顯示給了用戶。




如果說你的導(dǎo)航比較復(fù)雜,那么,請?jiān)诳紤]優(yōu)先級的基礎(chǔ)上適當(dāng)?shù)仉[藏導(dǎo)航。


2、圖標(biāo),隨處可見的圖標(biāo)


由于移動端的屏幕大小限制,許多無腦的設(shè)計師為了節(jié)省空間,在任何只要能夠使用圖標(biāo)替換的文本域,都使用了圖標(biāo)。大家都這樣想,象形文字或者圖標(biāo)占的空間又少,不需要額外的轉(zhuǎn)換,而且,人們都很熟悉這些圖標(biāo),難道不是這樣嗎?所以,每一個APP都這樣做了。


設(shè)計師們將上面的那種假設(shè)放在腦海里,于是,有的時候,他們將實(shí)用性的功能蘊(yùn)含在了圖標(biāo)里面,但事實(shí)上,那個圖標(biāo)是難以識別的。比如,你能猜到在下圖的Instagram里的這個圖標(biāo)點(diǎn)擊之后能夠發(fā)送什么信息嗎?



或者說,假如你從來沒用過谷歌翻譯,那么,你會期待下圖的這個圖標(biāo)實(shí)現(xiàn)什么樣的功能呢?



你總是假設(shè)你的用戶們非常熟悉那些抽象的圖標(biāo),或者說,你總以為用戶們會花大量的時間去研究和學(xué)習(xí)你的這個圖標(biāo)的含義。這是一個很普遍性的錯誤,很多設(shè)計師都會犯這個錯誤。


Bloom.fm上讓人覺得迷糊的標(biāo)簽欄


如果說你曾經(jīng)設(shè)計過一個需要一個彈出框來解釋從而提高可用性的圖標(biāo),那么,即使你的用戶們會不管怎么樣都能了解它,你的這個做法也是錯誤的。




當(dāng)然,并不是說你在設(shè)計中就一點(diǎn)都不使用圖標(biāo)。你的用戶們熟悉大量的圖標(biāo),這些圖標(biāo)中,有很大一部分都是能夠代表普通的功能的,比如搜索,播放視頻,郵件,設(shè)置等等。(但是,用戶們可能不會很確定當(dāng)他們點(diǎn)擊一個心形圖標(biāo)的時候,會發(fā)生什么。)


一些能夠被大多數(shù)用戶所識別的圖標(biāo)并且被認(rèn)為是通用的


對于復(fù)雜的和抽象的圖標(biāo),在顯示的時候,應(yīng)該總是在旁邊加上一個文本來進(jìn)行說明。這樣,你的圖標(biāo)才是真正有用的。同時,還能夠提高菜單的可發(fā)現(xiàn)性,也能夠?yàn)槟愕腁PP添加漂亮的觸感和個性。


Pixelmator的導(dǎo)航


對于基本的功能,可以使用圖標(biāo)來展現(xiàn);但是,對于復(fù)雜的功能,就需要使用文本來說明了。(如果你要使用圖標(biāo)的話,要時常性的做可用性測試)


3、基于手勢的導(dǎo)航操作


當(dāng)蘋果公司在2007年發(fā)布了iPhone的時候,多指觸控技術(shù)就成為了人們關(guān)注的主流技術(shù),用戶們發(fā)現(xiàn)他們不僅可以在屏幕上進(jìn)行點(diǎn)擊,還可以進(jìn)行放大,縮小和左右輕掃。


手勢在設(shè)計們的圈子中流行了起來,許多的APP都圍繞著手勢操作來進(jìn)行設(shè)計。


Clear里的手勢操作


就像隱藏的導(dǎo)航欄和使用圖標(biāo)代替文本一樣,手勢看起來似乎能夠?yàn)樵O(shè)計師節(jié)約一些屏幕空間。(“屏幕上不應(yīng)該有刪除按鈕的存在,人們只需要向左或者向右輕掃就可以進(jìn)行刪除了。我們會決定怎么操作的?!?


關(guān)于手勢,你首先需要知道的是,手勢是不可見的。人們需要記住它們,就像漢堡菜單的例子一樣。如果你隱藏了一個選項(xiàng),那么,用到那個選項(xiàng)的人就會越少。


另外,手勢存在著與圖標(biāo)相同的問題:眾所周知的手勢有點(diǎn)擊,放大,上下滾動,同時,每個APP也有那些需要慢慢發(fā)現(xiàn)和學(xué)習(xí)的手勢。


不幸的是,觸屏界面的設(shè)計仍然是一個新的領(lǐng)域,在各個APP中,大多數(shù)手勢還不標(biāo)準(zhǔn)和統(tǒng)一。一個很簡單的手勢,比如左右輕掃,在各種各樣的郵件APP中可能都會大相徑庭。


在Apple的Mail APP中,向右輕掃,顯示出了“標(biāo)記為未讀”的選項(xiàng)


同樣的手勢,在Mail Box中,就表示將郵件存檔


或者說,想一想,搖晃你的手機(jī),在兩個APP中,也會有兩種不同的含義。在iOS中表示撤銷,在Google Maps中表示發(fā)送反饋信息。


永遠(yuǎn)都要記住,手勢是隱藏的操作,人們不得不去記住它們。對于你的用戶,這需要大量的努力。如果你是一個發(fā)起人,也許你可以讓全世界的向右輕掃的含義都一樣——但是,只有當(dāng)它是你APP的概念設(shè)計里必不可少的一個部分的時候。


4、新手引導(dǎo)


新手引導(dǎo),最近很火的一個話題,適用于用戶第一次與APP打交道的時候。在很多情況下,這個簡單的方式能夠在一個透明的覆蓋層上為用戶展示一些標(biāo)記來解釋界面元素。


dcovery APP里的新手引導(dǎo)


為什么說這是一個很爛的解決方案呢?因?yàn)樵S多用戶都會跳過你的介紹,他們想做的就是趕緊使用這個APP。即使他們注意到了你的這些標(biāo)記,當(dāng)他們把這個關(guān)掉的時候,這些所謂的教程也被他們忘得一干二凈了(尤其是當(dāng)屏幕上擠滿了信息的時候)。最后說一句重要的,在你的屏幕上添加這些引導(dǎo)的標(biāo)記,并不會提高APP的易用性,記住下面這句話:


原圖翻譯:用戶界面就和講笑話一樣,如果這個笑話還需要解釋才能明白的話,那么,這也不是一個好笑話。


對于你的用戶來說,新手引導(dǎo)也許可以使用其他的方式來設(shè)計的更加有用。比如Slack這個APP,使用第一屏來創(chuàng)建一個用戶場景。簡單的介紹一下他們自己,著重于利益而不是屏幕上的功能。


留住你的第一批用戶的一個更有效的方法就是逐步的引導(dǎo)。比如Duolingo,他沒有向用戶們解釋這個APP是如何工作的,而是促使人們做一個指定語言的快速測試(甚至不需要登錄),因?yàn)橛脩魝兛梢栽谧鰷y試的過程中了解到這個APP是如何使用的。同時,這也是展示這個APP的價值的一個更有影響力的方法。



記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎?看看他們的逐步引導(dǎo)是如何做的:用戶們在開始使用APP之前,必須在APP所提供的一個練習(xí)場景里嘗試使用這個APP里的每一個手勢。



在你準(zhǔn)備在一個半透明的覆蓋層上設(shè)計你的引導(dǎo)標(biāo)記的時候,停下來好好想想第一次使用你的APP的用戶會有寫什么樣的經(jīng)歷。關(guān)注一下使用環(huán)境,通常情況下,有更好的方法來歡迎你的用戶們。


5、充滿了創(chuàng)造力,但是并不直觀的空白狀態(tài)


很多沒有經(jīng)驗(yàn)的設(shè)計師很容易忽略APP的空白狀態(tài)。但是,從一個APP的整體用戶體驗(yàn)上來說,這是一個很重要的方面。


有的時候,設(shè)計師們把錯誤信息和空白狀態(tài)的界面當(dāng)作一塊展示他們創(chuàng)造力的畫布。


比如下面這張Google Photo的空白狀態(tài)界面:



第一眼看去,簡直太棒了不是嗎?一個漂亮的矢量圖加上完全符合設(shè)計規(guī)范的布局。


但是,再看一下,就會覺得有寫奇怪的東西了:


?這塊屏幕里什么收藏也沒有,但為什么這里會有一個那么顯眼的搜索按鈕呢?難道是想讓用戶在什么都沒有的界面里搜索什么?


?第二個很顯眼的元素就是這個矢量圖,很明顯不可以點(diǎn)擊(雖說會有很多人去嘗試點(diǎn)擊)。


?屏幕上的提示說,我應(yīng)該找到在頂部的那個超級不起眼的“+”標(biāo)志。為什么這個提示自己不包含一個添加按鈕呢?就像是在說“點(diǎn)擊繼續(xù)按鈕來繼續(xù)”


總而言之,上面這個空白屏幕沒有能夠幫助用戶理解用戶所在的這個環(huán)境:


?什么是收藏?他們?yōu)槭裁从杏媚兀?


?為什么我什么都沒有呢?


?我可以做些什么嗎?(我應(yīng)該做什么?)


當(dāng)需要創(chuàng)造力時,越少有時會越有用。下面這個空白狀態(tài)屏在可用性上就做的十分完美。(先讓我們忽略那個“現(xiàn)在就點(diǎn)擊下面這歌按鈕吧”的引導(dǎo)提示)


在Lootsy里的空白狀態(tài)屏


記住,空白狀態(tài)(類似于網(wǎng)頁里的404頁面)并不只是美感和品牌特色。在可用性上,他們更為重要。要讓空白狀態(tài)更為直觀。


多問多想


不要說我是錯的:設(shè)計模式和最佳的實(shí)踐仍然是你的好伙伴。但是要知道,APP和用戶是不一樣的:在一個APP里能夠適用的方案,在你自己的APP里,也許就一點(diǎn)不適用。這不是一個通用方案就能解決的事情。另外,你永遠(yuǎn)不可能知道為什么一個APP會以某種方式來設(shè)計。


自己要多想想,多設(shè)計,多研究。

文章來源:站酷   作者:鄭小小壯

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

【化書錄】1《交互設(shè)計是什么&交互簡史》

博博

從今起,讀書便記錄,記錄便整理。希讀書能夠帶來知識,強(qiáng)壯你我。那,先從《交互設(shè)計指南》開始。


文章來源:站酷   作者:墨泉慎齋

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

交互深耕-B端設(shè)計師要懂的信息架構(gòu)

純純

網(wǎng)上關(guān)于信息架構(gòu)的知識內(nèi)容參差不齊,在學(xué)習(xí)與探究的過程中查閱了很多資料,反復(fù)修改多次,盡量用直白的語言結(jié)合實(shí)例來闡述信息架構(gòu)。目錄如下:





1.1 前言

這篇文章的起源,來源于最近看到的話題“B端設(shè)計師會被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時代,很多頁面設(shè)計依靠組件庫就能夠快速搭建。


那么在這種情況下,B端設(shè)計師存在的意義和價值到底體現(xiàn)在哪里呢?其實(shí)B端設(shè)計的重點(diǎn)并不在頁面的視覺上,視覺只是作為設(shè)計師最終輸出成果的一小部分。個人認(rèn)為B端設(shè)計師工作重心體現(xiàn)在做「正確的設(shè)計」,比如以下幾個方面:

1.這個設(shè)計能否完成對應(yīng)的商業(yè)目標(biāo)和產(chǎn)品目標(biāo);

2.我們的信息呈現(xiàn)是否合理以及能否解決當(dāng)前需求;

3.用戶能否在頁面上快速找到想要的信息;

而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發(fā)現(xiàn)其論述本質(zhì)上都逃離不了「信息架構(gòu)」這個概念。因此我認(rèn)為設(shè)計師都需要對這個概念有充分的認(rèn)知,這能夠幫助我們做出正確且出色的設(shè)計。


1.2信息架構(gòu)概念

關(guān)于信息架構(gòu)的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構(gòu)拆分為信息與架構(gòu)去理解。

信息指的是內(nèi)容的載體,常見的文字、圖像等都是信息;架構(gòu)的含義則形容對應(yīng)的組織和結(jié)構(gòu)。那么信息架構(gòu)就是將信息通過一定的形式組織起來,然后呈現(xiàn)出來。其本質(zhì)就是研究信息的表達(dá)與傳遞。

通俗點(diǎn)講,信息架構(gòu)就是讓用戶可以更容易的理解我們的產(chǎn)品,讓用戶在使用我們的產(chǎn)品時可以更順利、更自然。因此信息架構(gòu)沒有一個具體的呈現(xiàn)形式,它更多的是體現(xiàn)在產(chǎn)品設(shè)計的各方面。具體主要表現(xiàn)為組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)和搜索系統(tǒng)。





為什么需要信息架構(gòu)?我們都知道B端產(chǎn)品設(shè)計的核心是「降本提效」,在設(shè)計這一側(cè)的可以將其理解為降低認(rèn)知成本,提升使用效率。

降低認(rèn)知成本需要我們更好的表達(dá)信息,讓用戶能看明白我們的產(chǎn)品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


而信息架構(gòu)從本質(zhì)上來講也正是研究信息的表達(dá)和傳遞。因此我們需要通過它來幫助我們更好的完成B端產(chǎn)品設(shè)計。如果沒有信息架構(gòu)來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產(chǎn)品陷入難以上手或者不知道怎么用的尷尬境地。

一個強(qiáng)大信息架構(gòu)是產(chǎn)品質(zhì)量的保證,是作為設(shè)計支撐點(diǎn)的骨架,它會減少可用性問題,提升整體導(dǎo)航行,創(chuàng)造對用戶友好的體驗(yàn)。比如舉一個工具層面的例子:

PS的工具欄堆疊在界面各個部分,而Figma的工具欄則集中在右側(cè)且只出現(xiàn)當(dāng)前需要的功能。很明顯Figma在信息架構(gòu)中的信息組織部分做得更為友好,PS則會顯得遜色一些。這也是我們在學(xué)習(xí)PS的時候會顯得比較吃力的原因之一。


可以說良好的信息架構(gòu)是高效用戶體驗(yàn)的基礎(chǔ)。視覺元素,功能,交互和導(dǎo)航都是在信息架構(gòu)的基礎(chǔ)上構(gòu)建的。因此想要做出體驗(yàn)好且合理的頁面設(shè)計,我們就需要參與到信息架構(gòu)這個過程中來,和產(chǎn)品一起完成對應(yīng)架構(gòu)的梳理。而不是只完成從原型到頁面這個部分。


如果想要搭建一個好的建筑,我們需要知道其建造的目的,是按照什么樣的結(jié)構(gòu)搭建,內(nèi)部有哪些系統(tǒng),以及最后呈現(xiàn)的模樣。


那么信息架構(gòu)也同理,我們首先需要知道信息是為了什么目標(biāo)服務(wù),然后我們通過怎樣的結(jié)構(gòu)來組織這些信息,以及過程中會用到的信息元素,最后如何呈現(xiàn)它們。這都是我們在搭建信息架構(gòu)中需要進(jìn)行的必要步驟。如果某些環(huán)節(jié)沒有做好或者沒有了解透徹,那么在輸出信息架構(gòu)時往往會出現(xiàn)方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現(xiàn)的。


3.1 信息獲?。合壤斫鈽I(yè)務(wù),再談架構(gòu)

B端行業(yè)對于業(yè)務(wù)理解的要求是比較高的,只有在理解業(yè)務(wù)的基礎(chǔ)上,將業(yè)務(wù)需求轉(zhuǎn)化為對應(yīng)的設(shè)計目標(biāo),我們才能夠輸出合理的信息架構(gòu)方案。

個人認(rèn)為理解業(yè)務(wù)的基礎(chǔ),就是能夠用一句話講清楚當(dāng)前設(shè)計的產(chǎn)品。這句話可以描述為:誰在什么地方想要完成什么目標(biāo)。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產(chǎn)品服務(wù)。


雖然看上去這句話很簡單,但其中包括了三個要素:用戶、場景和目標(biāo)。因此我們在分析和梳理業(yè)務(wù)的過程中首先要弄清楚的就是這三個要素。


3.1.1用戶:分清購買者與使用者

用戶永遠(yuǎn)是排在第一位的,也是我們首先需要弄清楚的。在B端設(shè)計中,本質(zhì)上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業(yè)微信,購買客戶是企業(yè),實(shí)際用戶是員工。

對于企業(yè):「我想要有一款軟件可以更好的管理員工」

對于員工:「我想要這款軟件能夠更好地提高工作效率」

客戶決定了我們產(chǎn)品的購買(部分情況下也兼顧使用),而用戶則決定了后續(xù)產(chǎn)品的復(fù)購率。因此在業(yè)務(wù)理解中,我們需要弄清楚當(dāng)前產(chǎn)品所處的服務(wù)階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產(chǎn)品的使用體驗(yàn)又會偏向于用戶。


因此我們首先需要弄清楚的就是當(dāng)前產(chǎn)品是為哪些「目標(biāo)用戶」服務(wù),這也就決定了我們在設(shè)計信息架構(gòu)時對應(yīng)的不同側(cè)重點(diǎn)。


3.1.2場景:需求源于場景

場景是指需求產(chǎn)生的某種條件,這個條件包括但不限于環(huán)境、時間、地點(diǎn)、空間等,只有上述條件滿足,這個需求才能成立。這里可以把場景理解為產(chǎn)生該問題的原因。

比如當(dāng)用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因?yàn)橥饨绛h(huán)境冷。這兩種場景涉及到的解決方案是完全不一樣的。


在平日的工作中我們可以通過以下兩種方式來更好的了解業(yè)務(wù)場景:

1.通過業(yè)務(wù)方文檔進(jìn)行業(yè)務(wù)背景的初步理解。業(yè)務(wù)文檔中一般都會包括需求背景,我們可以通過文檔進(jìn)行初步了解。

2.通過業(yè)務(wù)溝通進(jìn)一步加深業(yè)務(wù)背景的理解。由于很多B端業(yè)務(wù)離設(shè)計師本身的生活比較遠(yuǎn)。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業(yè)務(wù)方或產(chǎn)品多次溝通來挖掘最底層的背景。

畢竟需求背景是理解業(yè)務(wù)的重要步驟,我們只有知道需求產(chǎn)生的原因,才能夠針對性的給出解決方案。


3.1.3目標(biāo):業(yè)務(wù)目標(biāo)和設(shè)計目標(biāo)

目標(biāo)決定了我們的產(chǎn)品最終的方向。我們首先接觸到的一般都是業(yè)務(wù)目標(biāo),而我們要做的就是將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為我們此次的設(shè)計目標(biāo)。


A.業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)就是此次業(yè)務(wù)想要解決的實(shí)際問題,它通常是一個宏觀上的描述。比如打車軟件的業(yè)務(wù)目標(biāo)簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標(biāo)。


B.設(shè)計目標(biāo)

設(shè)計目標(biāo)是我們基于業(yè)務(wù)目標(biāo)而給出的設(shè)計策略,是一種更具體的實(shí)現(xiàn)方式。比如我們要讓用戶快速的打到車,那么這個時候我們的設(shè)計目標(biāo)就是通過將用戶位置和司機(jī)位置進(jìn)行快速匹配,并通過超時補(bǔ)貼紅包的方案來降低用戶焦慮。從而實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。而這一過程涉及到的信息點(diǎn)就有:司機(jī)位置、乘客位置、等車時間、補(bǔ)貼金額等元素,并需要思考它們之間的關(guān)系和呈現(xiàn)方式。


可以發(fā)現(xiàn)從業(yè)務(wù)目標(biāo)轉(zhuǎn)化到設(shè)計目標(biāo)這個過程,實(shí)際上就是在確定功能和信息點(diǎn)的過程。這樣才能讓我們更好地設(shè)計信息架構(gòu)。


3.2信息架構(gòu)核心:信息組織

從前文可以看出我們會在整體設(shè)計過程中出現(xiàn)很多的信息元素。如果不經(jīng)過對應(yīng)的組織和處理,直接堆疊在一起,那么信息含義會比較亂且難以調(diào)用。比如下方:

而右側(cè)圖片信息的組織過程可以理解為通過將零散的數(shù)據(jù)信息進(jìn)行分類,再以某種結(jié)構(gòu)化的形式將它們重新組合排布的過程,直白一點(diǎn)就是先分類,再結(jié)構(gòu)化呈現(xiàn)。我用一張圖來表明這個過程:

那么這個過程中「信息組織」和「結(jié)構(gòu)呈現(xiàn)」到底應(yīng)該怎么做,也就是接下來要講的組織方式和結(jié)構(gòu)類型。


3.2.1組織方式:模糊分類和精確分類

組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進(jìn)行分類,比如位置、字母表、時間、類別、層級等方式進(jìn)行組織。一些工具類應(yīng)用例如滴答清單內(nèi)容信息都是按照時間來進(jìn)行組織的:

而模糊分類則是按照更為主觀的邏輯對信息進(jìn)行分類, 如主題、任務(wù)、用戶、隱喻等來進(jìn)行歸類,比如我們常用的APP商城是按照不同的主題類別來進(jìn)行區(qū)分的。

但在很多時候,產(chǎn)品傾向于將兩種組織方式結(jié)合起來形成復(fù)合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習(xí)慣。比如藍(lán)湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時間等)。

其實(shí)在大部分B端產(chǎn)品中,大都按照模糊分類來進(jìn)行處理,比如按照任務(wù)、流程等方式。而精確分類更多用于在頁面內(nèi)的局部信息模塊,比如創(chuàng)建時間和文件大小等。


歸根結(jié)底,我們分類方式的選擇需要結(jié)合我們前面提到的用戶、場景和目標(biāo),這樣才能讓我們的分類更具說服力。


3.2.2組織結(jié)構(gòu):選擇合適的結(jié)構(gòu)類型

當(dāng)信息按照分類維度組織后,我們接下來就是把整體信息進(jìn)行結(jié)構(gòu)化,這樣才可以將信息整體連接起來并呈現(xiàn)出來。一般分為以下四種組織方式:


A.層級結(jié)構(gòu)(最重要的結(jié)構(gòu))

這是信息架構(gòu)中最為常見的結(jié)構(gòu),也是比較符合用戶認(rèn)知的結(jié)構(gòu)。有時也稱為「樹狀結(jié)構(gòu)」。以子父節(jié)點(diǎn)的形式一層一層延展。

層級結(jié)構(gòu)的優(yōu)勢就在于可以承載復(fù)雜的多層級內(nèi)容,通過層級遞進(jìn)的方式將復(fù)雜的多層級拆解得更簡潔。


但我們需要把控好內(nèi)容的廣度和深度,廣度指的是在層級結(jié)構(gòu)中每一層的數(shù)目,最好控制在7個以內(nèi)。如果廣度太寬意味著每個頁面會給用戶展示太多的信息,增加尋找內(nèi)容的負(fù)擔(dān)。深度為縱向結(jié)構(gòu),建議一般3層,最多不超過5層。過深的層級會讓用戶點(diǎn)擊很多次,且不容易被用戶發(fā)現(xiàn)。比如飛書的基本信息架構(gòu)也是主要以層級結(jié)構(gòu)來進(jìn)行的。


B.矩陣結(jié)構(gòu)(多維度結(jié)構(gòu))

矩陣結(jié)構(gòu)是各個節(jié)點(diǎn)都相互連接的一種信息架構(gòu)方式,通俗來講就是用戶既可以通過多個維度去觸達(dá)同一信息,也可以從單個維度連接多種信息。

這種結(jié)構(gòu)其實(shí)就更類似于我們在做相關(guān)功能時:比如當(dāng)你進(jìn)入電影全屏?xí)r想要退出時,既可以通過點(diǎn)擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點(diǎn)觸達(dá)同一操作。


又比如我們的聯(lián)系人功能,我們既可以通過輸入數(shù)字撥打電話,也可以查找聯(lián)系人進(jìn)行撥打,還可以查詢電話記錄進(jìn)行回?fù)堋?

矩陣結(jié)構(gòu)最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


C.自然結(jié)構(gòu)(隨機(jī)性)

自然結(jié)構(gòu)不遵循任何一致的模式,節(jié)點(diǎn)都是被逐一連接起來的。

自然結(jié)構(gòu)一般都具有隨機(jī)性和不確定性。這種更傾向于泛娛樂化的C端應(yīng)用。比如我們常見視頻網(wǎng)站的在推薦流都是應(yīng)用的自然結(jié)構(gòu)。比如打開B站等視頻平臺,你很難猜到剛進(jìn)入看到的是什么。

但一般自然結(jié)構(gòu)不會單獨(dú)存在,比如B站在自然結(jié)構(gòu)中也綁定了層級結(jié)構(gòu)來進(jìn)行層級上的劃分。


D.線性結(jié)構(gòu)(單一性)

線性結(jié)構(gòu)是非常單一的一個結(jié)構(gòu),整體是一層一層向下遞進(jìn)。比較強(qiáng)調(diào)先后順序的一種結(jié)構(gòu)。


這種結(jié)構(gòu)通常用于我們常見的軟件安裝程序等,也可以用于部分功能結(jié)構(gòu),比如網(wǎng)站的視頻發(fā)布,一般都是經(jīng)過上傳-編輯-發(fā)布這三個步驟來依次進(jìn)行。

大家可以發(fā)現(xiàn)在進(jìn)行信息架構(gòu)時,我們在很多情況下可能會運(yùn)用多種組織結(jié)構(gòu)方式,我們需要根據(jù)對應(yīng)的用戶決策場景來考慮讓最適合的幾種方式相結(jié)合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


3.2.3注意事項(xiàng):關(guān)注用戶心智模型

在信息的組織過程中,我們需要注意用戶的心智模型。比如當(dāng)我們看到紅點(diǎn)就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯(lián)網(wǎng)產(chǎn)品在無形中給用戶建立的底層習(xí)慣認(rèn)知。用戶目前對于普遍產(chǎn)品的一些基礎(chǔ)布局、功能名稱和交互邏輯都形成了一定的習(xí)慣,這都屬于用戶的心智模型的內(nèi)容。


因此我們在組織信息時盡可能不要去打破用戶常見的心智模型,否則必然會導(dǎo)致用戶的不習(xí)慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

這樣會導(dǎo)致用戶難以發(fā)現(xiàn)該功能。因?yàn)橛脩艚佑|新的信息時,會以最初接觸的局部信息為依據(jù)展開并形成初步認(rèn)知,用戶認(rèn)知中的信息組織邏輯和實(shí)際信息的吻合度越高, 他在進(jìn)一步查看或?qū)ふ倚畔⒌倪^程中體驗(yàn)會更順暢, 反之, 若一開始形成的認(rèn)知與實(shí)際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實(shí)就是用戶心智模型。


雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業(yè)術(shù)語,我們需要通過靈活有效的提示(比如標(biāo)記注釋等)來引導(dǎo)用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應(yīng)用場景其實(shí)是用于抖音官網(wǎng)后臺登錄,且在后臺登錄時已經(jīng)給出了對應(yīng)提示,那么這樣的設(shè)計也是合理的。


3.3信息架構(gòu)支撐:標(biāo)簽、導(dǎo)航和搜索

當(dāng)經(jīng)過上面的信息組織,其實(shí)我們已經(jīng)能夠歸納出一個大體的信息架構(gòu)框架。但在信息組織之外,我們還需要關(guān)注以下三點(diǎn):標(biāo)簽、導(dǎo)航和搜索。這對于信息架構(gòu)的完整性也有非常重要的意義。


3.3.1 標(biāo)簽系統(tǒng):讓信息識別更通用

標(biāo)簽系統(tǒng),通俗來講就是要我們對當(dāng)前整個系統(tǒng)信息節(jié)點(diǎn)的命名,從而讓信息的呈現(xiàn)更容易識別。拿個最簡單的例子來進(jìn)行說明:

可以看到左側(cè)和右側(cè)關(guān)于衛(wèi)生間的信息標(biāo)示,可能左邊你能一眼區(qū)分,右邊可能就需要反應(yīng)半天才能猜出到底代表什么含義了。


這其實(shí)就是關(guān)于我們的信息命名是否能夠被大多數(shù)用戶所接受的場景,也就是我們標(biāo)簽作用所起的作用。標(biāo)簽可以分為圖片和文字標(biāo)簽,都需要考慮用戶對該信息命名的認(rèn)知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標(biāo)簽名稱呢,這里需要注意2個方面:


A.優(yōu)先選用被行業(yè)廣泛接受的詞或圖標(biāo)

在進(jìn)行標(biāo)簽定義的時候,盡量選擇已經(jīng)被用戶所熟知的詞語,比如「工作臺」「通訊錄」等已經(jīng)被運(yùn)用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設(shè)計軟件中,很多圖標(biāo)和功能名稱都是通用的:

這樣做能夠很大程度減少用戶的學(xué)習(xí)成本。因此在B端設(shè)計中我們也需要注意到我們所在的行業(yè),哪些名詞已經(jīng)達(dá)成了共識,就無需再造新名詞。


B.不確定的詞語可以參考競品或調(diào)研來決策

當(dāng)某類功能或場景的標(biāo)簽難以確定時,我們就可以嘗試去找一下競品是否有類似功能,或者找該行業(yè)的領(lǐng)頭羊(比如聊天工具的巨頭微信),那么在進(jìn)行標(biāo)簽定義的時候,可以參考它的命名體系。因?yàn)樗呀?jīng)替我們教育了一部分用戶,會間接降低學(xué)習(xí)成本。


如果某些標(biāo)簽在上述過程中還是無法確定,那么我們結(jié)合自己經(jīng)驗(yàn)或者與咨詢業(yè)務(wù)相關(guān)人員來進(jìn)行討論,在必要時候可以在標(biāo)簽旁邊添加注釋來進(jìn)一步說明。


3.3.2 導(dǎo)航系統(tǒng):讓用戶不迷路

導(dǎo)航系統(tǒng)其實(shí)應(yīng)該是大家比較熟知的一個系統(tǒng)了。就像使用導(dǎo)航系統(tǒng)來規(guī)劃行程一樣,導(dǎo)航系統(tǒng)都會存在于每個網(wǎng)站中。比如我們常見的側(cè)邊導(dǎo)航、頂部導(dǎo)航等。

因?yàn)榫W(wǎng)上關(guān)于導(dǎo)航系統(tǒng)已經(jīng)有很多資料的講解了,在這里闡述下四類導(dǎo)航的含義:

1.全局導(dǎo)航:位于頁面最上層的導(dǎo)航,用戶幾乎在頁面的每個地方都可以看見,是最高層級的導(dǎo)航系統(tǒng);

2.局部導(dǎo)航:位于最高導(dǎo)航的下級子類導(dǎo)航,子類導(dǎo)航并不是必須的導(dǎo)航,根據(jù)場景進(jìn)行取舍;

3.情景式導(dǎo)航:通過點(diǎn)擊文字鏈接進(jìn)行跳轉(zhuǎn)的導(dǎo)航,比如在個人資料里面植入其它網(wǎng)站的鏈接地址;

4.輔助導(dǎo)航:這里包括網(wǎng)站地圖,網(wǎng)站索引,網(wǎng)站指南等輔助類型的導(dǎo)航。


輔助導(dǎo)航的網(wǎng)站指南包括新手引導(dǎo)和演示教程等?,F(xiàn)階段更巧妙的功能引導(dǎo),是當(dāng)用戶在進(jìn)行某些功能的操作時及時進(jìn)行提示,這樣不僅達(dá)到了為用戶引導(dǎo)的效果,還減少了一連串的新手引導(dǎo)對于用戶的打擾。比如figma在進(jìn)行組件更新后,只有當(dāng)你調(diào)用組件功能時,才會及時進(jìn)行提醒。


3.3.3 搜索系統(tǒng):讓用戶輕松找信息

搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進(jìn)行信息的檢索。雖然搜索功能非常重要,但并不是每個系統(tǒng)每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點(diǎn):

1:內(nèi)容復(fù)雜度:當(dāng)前頁面承載的內(nèi)容復(fù)雜度如果較少,對于簡單內(nèi)容頁面往往不需要搜索;

2:內(nèi)容性質(zhì):當(dāng)前頁面的性質(zhì)是偏向于用戶瀏覽還是查找,根據(jù)用戶行為來決定是否需要搜索;

3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內(nèi)容很復(fù)雜,我們還可以搜索結(jié)合篩選來更好的查找信息;


上述3點(diǎn)決定了我們是否需要考慮搜索功能。而關(guān)于搜索的其他細(xì)節(jié)點(diǎn),比如搜索規(guī)則和搜索結(jié)果等,在這里不做進(jìn)一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。


3.4信息架構(gòu)表達(dá):視覺化你的架構(gòu)

我們通過上述方法已經(jīng)知道如何梳理信息架構(gòu)了,那么我們應(yīng)該如何呈現(xiàn)它呢。這部分其實(shí)也是很多資料中比較模糊的點(diǎn)。

在學(xué)習(xí)的過程中,發(fā)現(xiàn)部分資料認(rèn)為信息架構(gòu)就是單純的指思維導(dǎo)圖,但實(shí)際上信息架構(gòu)并不能單純只用思維導(dǎo)圖就能夠完全表示。

因?yàn)樾畔⒓軜?gòu)包含了很多部分的內(nèi)容。只能說思維導(dǎo)圖可以是信息架構(gòu)的一種表現(xiàn)形式,其可以幫助我們在思考階段梳理整體產(chǎn)品的信息構(gòu)成。


這里拋出一個很有意思的觀點(diǎn),那就是「功能結(jié)構(gòu)圖」和「信息架構(gòu)圖」到底什么關(guān)系,這里用兩張圖示例:

可以看到,功能結(jié)構(gòu)圖更多體現(xiàn)的形式是功能闡述,一般形式為名詞+動詞,比如頭像設(shè)置;而信息架構(gòu)圖重點(diǎn)呈現(xiàn)的應(yīng)該都為信息元素,一般為名詞,比如頭像圖片。

但在大多數(shù)時候我們看到的產(chǎn)品架構(gòu)圖,其實(shí)更偏向于功能結(jié)構(gòu)圖和信息架構(gòu)圖的結(jié)合。因?yàn)樵诤芏鄷r候闡述信息構(gòu)成時需要依賴功能進(jìn)行輔助說明。


因此這篇文章講述的信息架構(gòu)更偏向于基于產(chǎn)品的整體架構(gòu)。其實(shí)信息架構(gòu)對于呈現(xiàn)形式并沒有特別的限制,只要能夠幫助你清晰表達(dá)產(chǎn)品整體結(jié)構(gòu)就行?!缎畔⒓軜?gòu):超越web設(shè)計》第4版中其實(shí)也并沒有對表現(xiàn)形式這一塊進(jìn)行嚴(yán)苛的定義,其用「顯示信息元素間的關(guān)系——站點(diǎn)地圖」的說法概括了信息架構(gòu)的呈現(xiàn)形式,其表達(dá)如下:

可以看到其表達(dá)形式包括思維導(dǎo)圖和流程圖等形式:思維導(dǎo)圖的優(yōu)勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優(yōu)勢則更能夠表達(dá)整體的邏輯關(guān)系。


因此信息架構(gòu)的呈現(xiàn)需要根據(jù)你的產(chǎn)品場景選擇合適的視覺框架表達(dá)。不必讓形式限制了我們的發(fā)揮,而是應(yīng)該形式追隨于我們的架構(gòu)表達(dá)。其只是一個信息梳理結(jié)構(gòu)的說明結(jié)果(類似于中間態(tài)),我們需要借助它來更好的闡述思路與溝通想法。


3.5信息架構(gòu)之后:讓信息具像化

在輸出信息架構(gòu)之后,其實(shí)這里想聊一聊頁面的呈現(xiàn)。因?yàn)楫?dāng)梳理好大的框架后,剩余的頁面細(xì)節(jié)其實(shí)都需要通過原型圖來進(jìn)行體現(xiàn)。這個過程是從框架到頁面的階段,其實(shí)對于設(shè)計師來說也是很重要的部分。在這里根據(jù)自己的理解列出了以下幾方面的注意點(diǎn):

A.頁面能夠讓用戶看懂

這其實(shí)就是涉及到我們的信息組織和標(biāo)簽系統(tǒng)。如果當(dāng)我們的某個頁面不能讓用戶第一時間獲取到該頁面表達(dá)的信息,反思一下是在哪個方面做得不好。是標(biāo)簽系統(tǒng)含義模糊呢,還是信息的組織分類方式不對。從頁面呈現(xiàn)倒推信息架構(gòu)。

綜合來說就是設(shè)計時的排列要考慮用戶的心智模型(比如網(wǎng)頁的常規(guī)排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產(chǎn)品想要完全避免學(xué)習(xí)成本是不可能的,但我們可以盡量減少其學(xué)習(xí)成本。


B.考慮用戶的視覺動線

當(dāng)我們在進(jìn)行信息排列時,這時需要思考的就是用戶的視覺動線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動線模型能夠讓用戶更好地查找信息。

F模型和Z模型的使用區(qū)分其實(shí)就是在使用場景上,對于內(nèi)容頁面來說F模型會更為合適(比如文章或者搜索結(jié)果),適合文本類的內(nèi)容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設(shè)計跟蹤了人眼掃描頁面時的路線——從左到右,從上到下,能夠更好引導(dǎo)用戶的視線。


C.掌控好適度的信息層級

B端由于在視覺的發(fā)揮空間不多,那么相對來說保持良好的信息層級能夠讓整體的體驗(yàn)變得更為良好。

不管是原型圖還是視覺,整體的視覺層級要體現(xiàn)得更為清晰。按理說最好的視覺層級控制在三級左右。如果發(fā)現(xiàn)視覺層級過多,需要考慮是不是因?yàn)樾畔⒓軜?gòu)設(shè)計時縱向?qū)蛹夁^深,通過調(diào)整架構(gòu)的形式來更好的呈現(xiàn)信息。以及對同頁面的信息進(jìn)行重要程度分級。


當(dāng)我們做完或者聽別人闡述對應(yīng)的信息架構(gòu)時,該如何評判呢,到底怎樣的信息架構(gòu)才算優(yōu)秀呢。個人認(rèn)為可以從3方面去進(jìn)行判斷:

業(yè)務(wù)層:

1.設(shè)計目標(biāo)合理:能平衡商業(yè)目標(biāo)和用戶的目標(biāo),保證客戶和用戶都有較為良好的體驗(yàn);

2.核心任務(wù)目標(biāo):能夠讓用戶順利完成產(chǎn)品的核心任務(wù),需要通過用戶測試來進(jìn)行驗(yàn)證

結(jié)構(gòu)層:

1.平衡廣度和深度:在進(jìn)行功能使用時不會隱藏的太深而找不到,是否有冗余步驟

2.保證拓展性:當(dāng)前信息架構(gòu)在面對未來新增或者刪減信息時能夠穩(wěn)定拓展

體驗(yàn)層:

1.保證易讀性:用戶不經(jīng)過介紹,通過頁面信息呈現(xiàn)能夠看懂該產(chǎn)品是用來做什么的

2.保證易查找性:用戶在需要某個功能時能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


合理的信息架構(gòu)需要具備以上條件,我們需要在做設(shè)計呈現(xiàn)時也盡量保證以上條件。但在很多情況下其實(shí)并不能完全滿足,這個時候我們需要根據(jù)業(yè)務(wù)目標(biāo)的重要性來選擇某些點(diǎn)進(jìn)行滿足。


梳理一下整體文章的架構(gòu),其實(shí)是按照「是什么-為什么-怎么做」的形式來進(jìn)行拆分的:

這篇文章想要表達(dá)的觀點(diǎn),不是讓設(shè)計師獨(dú)立去梳理整體信息架構(gòu),而是讓設(shè)計師擁有信息架構(gòu)意識,了解其是如何進(jìn)行并產(chǎn)生的。這樣你在看到整體架構(gòu)時,有足夠的理論支撐去判斷它的好壞,并通過自己的理論認(rèn)知去理解和改進(jìn)不好的地方。


當(dāng)我們對信息架構(gòu)有足夠的認(rèn)知時,我們在設(shè)計頁面時才能有合理的思考方向,做出「正確的設(shè)計」,避免成為無情的作圖機(jī)器。信息架構(gòu)作為產(chǎn)品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗(yàn)才能夠有本質(zhì)上的提升。


注:文章中不可避免會存在不足之處,如果對文章中內(nèi)容有更好建議,歡迎隨時交流。


  參考資料:

《web信息架構(gòu)》第四版

《信息焦慮》

《用戶體驗(yàn)要素》

《信息架構(gòu)設(shè)計》

「從設(shè)計前/設(shè)計中階段,了解信息架構(gòu)知識點(diǎn)」

「互聯(lián)網(wǎng)產(chǎn)品如何搭建信息架構(gòu)」

文章來源:進(jìn)擊的M(站酷)
作者:進(jìn)擊的M

轉(zhuǎn)載請注明:交互深耕-B端設(shè)計師要懂的信息架構(gòu)

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

截屏2021-05-13 上午11.41.03.png

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

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

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

學(xué)再多方法,不如多做一些解決方案

ui設(shè)計分享達(dá)人

目前為止,我發(fā)現(xiàn)大部分市面上的文章都在告訴大家,競品分析怎么做、場景分析怎么做、體驗(yàn)地圖怎么做、訪談怎么做、度量模型怎么做,但唯獨(dú)少了最后落地方案怎么做。


我曾經(jīng)試著利用迪士尼和環(huán)球影城的兩個案例來優(yōu)化他們的產(chǎn)品,但是很多人開始無腦噴,因?yàn)闆]有業(yè)務(wù)做背景,別人想怎么說怎么說,都是“我覺得”。正因?yàn)檫@樣,市面上你幾乎看不到有什么文章教大家實(shí)際的交互解決方案,因?yàn)榕卤粐娮訃?,反正沒有業(yè)務(wù)背景你也無法論證自己方案的合理性,靠經(jīng)驗(yàn)?別人不認(rèn)同,你也沒有數(shù)據(jù)來說服別人,所以這事大家都不敢去做。


但是沒有業(yè)務(wù)背景的交互方案就不能做了嗎?當(dāng)然不是,有了業(yè)務(wù)背景你可以更針對性的選擇你自己知識庫里的方案和頁面結(jié)構(gòu)來解決業(yè)務(wù)和用戶的問題,那么前提是你的知識庫里有那么多案例才行,否則有再多再清晰的業(yè)務(wù)背景,你掏不出來,沒有用。


所以從今天開始,我會陸續(xù)提供一些咱們小伙伴在做練習(xí)時候遇到的一些交互問題,大家一起來探討一下。業(yè)務(wù)背景會適當(dāng)?shù)奶岬?,但是還是以交互方案的多樣性為主去討論,再強(qiáng)調(diào)一遍,不要揪著業(yè)務(wù)去框住自己的思維。


學(xué)習(xí)交互也好,學(xué)習(xí)UI也罷,如果你完全不懂理論是行不通的,所以很多剛?cè)胄械男』锇榛A(chǔ)不夠扎實(shí),覺得理論沒用,這是不對的,理論有用但是也配合實(shí)踐,利用更多的實(shí)際案例去加深理論的印象,做到舉一反三,這樣的效果比較好。所以在做案例之前大家務(wù)必也要多去了解一下交互的設(shè)計理論和基礎(chǔ)指南。



今天練習(xí)的主題是:籃球館預(yù)定流程和原型


其實(shí)以前有文章聊到過,但是大家都有不同的聲音,那么我們就繼續(xù)來探討一下有哪些不同的方案。既然業(yè)務(wù)背景不確定,那么我們的交互方案就不存在最優(yōu)解。



案例


下文描述以圖片順序做記號,例如第一張界面即為p1。



產(chǎn)品功能為什么這么布局、為什么用這個控件、為什么用這個交互形式,取決于業(yè)務(wù)目標(biāo)和設(shè)計目標(biāo),還有用戶的心智模型,以及該單元本身的屬性。那么首先來看案例1-p1,該練習(xí)的背景沒有描述業(yè)務(wù)特征,所以這個布局說明,該產(chǎn)品是一個平臺型的產(chǎn)品,有各種球館的列表,除了細(xì)節(jié)不完整以外沒啥大的問題。


再看p2和p3這兩個頁面是這個練習(xí)的核心頁面,我們總說產(chǎn)品形態(tài)取決于產(chǎn)品本身的定位,平臺型產(chǎn)品的球館詳情大致是可以這樣的,如果產(chǎn)品是自我品牌的產(chǎn)品,那么形態(tài)就會發(fā)生很大的變化。例如你可以在美團(tuán)上點(diǎn)星巴克,你也可以在星巴克小程序上下單,但是這兩個應(yīng)用中的星巴克,是不一樣的內(nèi)容呈現(xiàn)。



我們從p2依次往下看,從業(yè)務(wù)和用戶兩個角度來看這個方案,首先從業(yè)務(wù)的角度看,有問題的點(diǎn)在于場地說明,平臺型的產(chǎn)品一般都會給商家做管理后臺和營銷工具,但是場地說明這個板塊就有點(diǎn)雞肋了,


原因1: 大部分球館的標(biāo)準(zhǔn)都是統(tǒng)一的,不可能一塊木地板一塊pvc這樣錯開,很難看,也不可能。如果有區(qū)別那么只有尺寸規(guī)格的區(qū)別。


原因2:場地類型展示并不是核心用戶需求,只是一種輔助決策,并且是“一次性”決策,該流程的核心任務(wù)還是要讓用戶可以去預(yù)定場地,但是目前整個頁面只有底部一個預(yù)定的按鈕(等會說這個按鈕)


原因3: 頁面頂部有場館的圖片及環(huán)境介紹了,所以場地圖片展示可以集中在頂部的圖片區(qū)域展示,例如大眾點(diǎn)評,點(diǎn)開后會有更多分類的圖片和視頻標(biāo)簽。



所以中間這塊區(qū)域可以展示快捷預(yù)定的入口,比單純展示場地類型性價比高的多。


那么底部是否需要有一個立即預(yù)定的按鈕呢?如果這個產(chǎn)品是一個專門用來給籃球館做推廣的平臺,我覺得可以放。但如果是類似大眾點(diǎn)評這樣的平臺的話,就要繼續(xù)思考了。


而我們看到大眾點(diǎn)評為什么底部不做成一個大按鈕的形式,豈不是會更加強(qiáng)化這個任務(wù)的核心目標(biāo)嗎?平臺類型的產(chǎn)品對接商家的種類非常多,同時類似這樣的平臺產(chǎn)品核心的產(chǎn)品定位是給幫助用戶去找到好吃、好玩、好看的地方,側(cè)重的是真實(shí)用戶反饋,所以說到真實(shí)用戶反饋這里再舉個小例子,大眾點(diǎn)評在評價的時候當(dāng)點(diǎn)擊第五顆星的時候是顯示4.5星,而不會直接顯示5星,要再次點(diǎn)擊后才會變成5星。



產(chǎn)品認(rèn)為為了快速點(diǎn)擊5星好評的行為并不是真實(shí)反饋,當(dāng)真實(shí)想要給5星的時候才會再操作一步(題外話)。


回正題,平臺型的產(chǎn)品定位是為了把所有商家和用戶進(jìn)行高效的匹配(花錢匹配度、曝光更高),而不是為某一個商家去做轉(zhuǎn)化。并且使用該產(chǎn)品的用戶場景和需求比較豐富,大部分用戶都只是來看看這些場所的評分、口碑和詳情。


所以底部就不會只放一個預(yù)定/買單的大按鈕,而改成了用戶反饋的相關(guān)功能。為了幫助商家做銷售,營銷管理工具做的還是很成熟的,什么拼團(tuán)啦、套餐啦、代金券的工具啦等等。


有同學(xué)會問,那不就是大眾點(diǎn)評嘛,有什么區(qū)別。首先不要為了不同而不同,為了創(chuàng)新而創(chuàng)新,如果有更優(yōu)秀的解決方案當(dāng)然是最好了,但在當(dāng)下的環(huán)境中,沒有什么必要。如果一定要做差異化,一定是業(yè)務(wù)訴求出現(xiàn)了。比如這個產(chǎn)品變成了自有品牌做的一個app/小程序,而不再是靠平臺幫我去宣傳籃球場地,那么會變成什么樣呢?


那我們可以想到的時候在預(yù)約入口的地方就會發(fā)生了變化(同星巴克),平臺通過列表進(jìn)入,而自有產(chǎn)品則是在產(chǎn)品首頁中放一個入口,形態(tài)也完全改變,首頁不僅僅有場地預(yù)定,還會有私教培訓(xùn)、課程套餐、活動組織等等,圍繞著這個場地衍生出很多的業(yè)務(wù)。并且像用戶評價這個東西,在自有產(chǎn)品中也變得不那么透明,表現(xiàn)形式肯定也會更加弱化。


所以在本身是平臺的屬性下,這個頁面正常就是這樣,p2缺少了用戶側(cè)的一些支線場景和功能的補(bǔ)充,例如咨詢?nèi)肟?、舉報入口等支線的功能。



再看p3,點(diǎn)擊預(yù)約入口后開始進(jìn)行選擇場地的交互,選擇場地需要幾個關(guān)鍵要素:1.日期 2.時間 3.場地號 4.場地規(guī)格 5.價格,那么這里又涉及到業(yè)務(wù)背景了,場地號是什么?場地規(guī)格又是什么?商家如果要讓別人預(yù)定場地,是按照全場預(yù)定還是可以半場預(yù)定,場地的類型是否有多樣,都會影響到我們這整個預(yù)約的交互流程。


p3的這個方案的問題在于:


1.信息關(guān)聯(lián)度沒做好,這里的日期和時間要更緊密,和買電影票不一樣。

2.時間的交互效率低,并且沒有展示全,可擴(kuò)展性不好,如果場館早上8點(diǎn)開門怎么辦?商家要求最低2小時起訂或者1小時起訂怎么辦?

3.半場和全場的選擇不夠簡單,全場其實(shí)等于兩個半場,而現(xiàn)在的展示形式變成了一個切換按鈕,雖然加了一個箭頭,但是這樣的交互形式和控件的用法是不符合常規(guī)的,并且指向性很差,當(dāng)切換到3/4號場地的時候箭頭就指向了半場,這樣就會產(chǎn)生歧義,所以是不可行的。


所以我們這里就會發(fā)現(xiàn)這些信息是需要聯(lián)動的,聯(lián)動表單最常見的就是橫縱聯(lián)合。一般最初級的做法就是一個行為管一個信息,就比如這樣:把選項(xiàng)放入picker中



這種交互方式一般不單獨(dú)用,因?yàn)槠鋵?shí)算是一種樹狀結(jié)構(gòu),這種結(jié)構(gòu)一般運(yùn)用在添加收貨地址等完全獨(dú)立的信息填寫或者一些多行表單中。


而這里的選擇日期、時間、類型、編號并不完全獨(dú)立,而且需要實(shí)時查看。


所以這樣也不夠直觀,picker擋住了價格,無法實(shí)時查看。更何況在這個頁面中所有內(nèi)容都收起來版面利用率大幅下降,交互層級更深了。


再看一些其他的方案,難道就一定要選場地嗎?我只需要時間、日期行不行。不行,為什么?


那我們再來看下面這個方案:




這個方案中,同學(xué)把圖片加入進(jìn)來,希望幫助用戶去輔助決策,其實(shí)沒必要,之前也說過,圖片屬于認(rèn)知信息的一部分,在外面認(rèn)知完了解過就可以了,里面就不需要再展示一遍了,可能也是為了不讓頁面這么空,因?yàn)榈撞坑昧艘粋€卡片的塊選擇日期時間。但是少了場地類型的選擇(半/全)長,為什么說半全場和場地號一定要選呢?因?yàn)橛泻芏鄨鼍叭笔Я?,比如你要幫朋友訂另一個場地怎么辦?我要訂兩個半場打全場怎么辦?每次預(yù)定只定了時間,老板還要手動標(biāo)記哪些場地在哪些時間沒有預(yù)定,非常的麻煩。所以不選擇場地是不行的。



再來看一個方案:



這個方案的選項(xiàng)和操作過于分散,而一般也不會將需要交互的選項(xiàng)放在左側(cè),有個原則就是內(nèi)容在上/左,操作在下/右,雖然不能一概而論但大部分情況都要遵循。參考古騰堡圖標(biāo)原則,左側(cè)的日期不經(jīng)意看以為是一個標(biāo)題。大部分第一次做交互原型的同學(xué)可能都會這樣,一些按鈕和控件的用法和該放、可以放的位置不太清楚,在做交互的時候還有一件事要清楚,就是誰控制誰,控制器怎么觸發(fā)。


而這個方案和p3也是一樣,觸點(diǎn)順序亂了:選擇日期-選擇場地類型-選擇場地號-選擇時間。因?yàn)轭A(yù)約場地的場景是,今天小王想約朋友去打球,他問了一下朋友哪天有空,朋友說下周六都可以,最好是下午,于是小王打開應(yīng)用軟件,選擇了下周六的日期和下午的時間,看看還有哪些場地可以預(yù)約。


同樣也是順序亂了:場地編號-日期-時間。為什么順序很重要,這就和我們買電影票的習(xí)慣一樣,大部分情況是我們想要看某一本電影,然后再考慮自己的時間和去哪個電影院,有人說,我就不一樣,我會先選擇電影院,比如我逛街途中突然想看電影了,再看看電影院最近有什么電影。我只能說,滿足大部分、大概率的用戶需求和場景才是正事,產(chǎn)品是無法滿足全部用戶的。


拋開日期和時間的關(guān)聯(lián)性,這個方案還有一個問題就是如果要預(yù)定多個場地就會比較復(fù)雜,例如只有1號場地和9號場地的某一個時間段可以預(yù)約,那么就需要用戶在幾個場地中展開收起進(jìn)行操作,非常繁瑣。



再來看一個案例



這位同學(xué)將步驟分為了先通過picker選擇日期和時間,確定后再選擇場地。這個流程問題就在于:


1.picker用的不對,picker雖然叫做選擇器,但往往不會作為一個中間任務(wù)承載的模塊去用,而是對于一個頁面中需要選擇一些選項(xiàng)的時候才會用到,選擇完后依然停留在該頁面。否則進(jìn)入下一個頁面后,再返回,就看不到picker了,還要再選擇一次。


2.場地可能會出現(xiàn)被人預(yù)定的情況,所以當(dāng)選擇日期和時間后再選擇場地,如果被預(yù)定了,那么用戶就會比較抓狂。



所以在這個頁面中我們會選擇將其全部展開,怎么展開呢,有人覺的日期時間可以不動,把場地和類型展開。有人覺得全部展開才更直觀,那我們來看這兩個方案


如果日期和時間不展開,會有一個問題,那就是無法選擇多個時間段的場地,只能選擇某個時間段的多個場地,無法滿足這部分用戶需求,并且在信息展示上也會比較擁擠。那么我再看看全部展開,全部展開之后將時間和日期也做一個橫縱形式,然后將半/全場和編號進(jìn)行結(jié)合,默認(rèn)選擇一個塊即為半場,但是在場地命名上還是需要做一個小心思,那就是如果有人要包全場,如果我們單純給場地編號1、2、3、4….就會讓用戶不知道哪個半場和哪個半場是一體的,所以命名就可以改成1號場A、1號場B…...



當(dāng)然如果不要編號問題也不大,主要是場地還有些特殊情況,比如不同場地的通風(fēng)、燈光的區(qū)別,所以會有場地編號。


在之前的留言中,也有小伙伴會問,即便是自有產(chǎn)品,用戶在選擇場地的時候到底是否需要再看場地的圖片,直接從入口進(jìn)來不顯示圖片就讓用戶去定場地合理嗎?這里主要就是分針對老用戶還是新用戶,只要去過一次的用戶基本上也就不需要再看場地圖片了,新用戶的話就需要,他們還需要知道場館的地址、聯(lián)系方式等等,所以這些內(nèi)容會聚合在選擇場館的上一步,也就是首頁,具體首頁可以怎么放這些內(nèi)容留給大家思考。


我們講到這里,還有一些抬杠冠軍又要說了,一個頁面這么多信息太復(fù)雜了,我選擇第一個方案,多簡單,就兩個選項(xiàng)。如果我們知道復(fù)雜性守恒定律,那么不管怎么壓縮信息復(fù)雜度是不變的,把那么多場地選擇壓縮在一個picker中會更加復(fù)雜和難操作。


其實(shí)當(dāng)大家看到這些原型的時候,都明白問題出在哪里,真實(shí)情況是,如果讓你們從0開始,一下子就懵逼了。比如預(yù)定籃球場地的這個流程,從無到有,如果讓你自己來設(shè)計一遍,你可以完整的做下來嗎?每一個細(xì)節(jié)是否到位。大家產(chǎn)生了一種幻覺,看懂了,等于自己會做。一定一定要腳踏實(shí)地去做一遍才知道自己哪里搞懂哪里沒有搞懂。

原文地址:站酷
作者:MOMOUX墨默體驗(yàn)

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

截屏2021-05-13 上午11.41.03.png

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

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


美學(xué)可用性:用戶體驗(yàn)的責(zé)任之美

ui設(shè)計分享達(dá)人

什么是設(shè)計?簡而言之,就是用邏輯和美來解決人們的問題,滿足他們的愿望。在本文中,我們將討論美在用戶體驗(yàn)設(shè)計中的作用:讓我們看看它如何讓用戶和企業(yè)都感到高興。

為什么美對設(shè)計很重要

網(wǎng)站或移動應(yīng)用程序應(yīng)該有效、輕松、直觀地解決他們的問題。但是接下來會發(fā)生什么,當(dāng)產(chǎn)品不再是唯一的,不再是獨(dú)家的東西,自然競爭開始發(fā)揮作用時?人們開始看得更深,爭取更多。他們將審美愉悅和情感吸引力添加到他們的愿望清單中。而在兩款功能同樣出色的產(chǎn)品之間,絕大多數(shù)情況下,用戶會選擇美觀的一款。

基于需求層次,人們獲得的越多,他們的選擇就越復(fù)雜。教育和收入水平讓他們思考超越功能:除此之外,用戶追求和諧與美感。所以,美的作用越來越高。

以下是美在用戶體驗(yàn)設(shè)計中以這種方式起作用的一系列原因:

1) 它使設(shè)計充滿情感,也就是人性化

2) 它使數(shù)字事物與現(xiàn)實(shí)世界保持聯(lián)系

3) 它支持可用性

4) 滿足審美需求

5) 它將不同的事物與一種風(fēng)格結(jié)合在一起

6) 它讓產(chǎn)品在競爭中脫穎而出。

美與美學(xué)是連接設(shè)計的過去、現(xiàn)在和未來的堅(jiān)實(shí)橋梁。今天,新的布局和圖形基于數(shù)百年來收集的豐富的世界文化遺產(chǎn)?,F(xiàn)代設(shè)計師和藝術(shù)家通過一些趨勢和創(chuàng)新對其進(jìn)行改造:建立一個新的文化歷史圈,他們保留了歷代最優(yōu)秀藝術(shù)家的作品。這就是藝術(shù)和美學(xué)吸引力在設(shè)計中發(fā)揮作用的時候。我們不是在重新發(fā)明——我們是讓它變得現(xiàn)代化,讓它解決人們的問題。

審美-可用性效應(yīng)

用戶體驗(yàn)設(shè)計大師尼爾森諾曼集團(tuán)將其描述為審美可用性效應(yīng)現(xiàn)象。它指的是用戶傾向于認(rèn)為有吸引力的產(chǎn)品更有用。人們傾向于相信看起來更好的東西會更好地工作——即使它們實(shí)際上并沒有更有效率。這種效果是為什么良好的用戶體驗(yàn)不能只是功能性UI的一個重要原因——設(shè)計一個既有吸引力又實(shí)用的界面是值得付出努力的。

基于此,讓我們考慮一下美感對UX 目標(biāo)的影響。UX設(shè)計有 4 個基本方面,外觀視覺和諧呈現(xiàn)出賦予所有要點(diǎn)的因素。

可用性意味著產(chǎn)品可以工作并且用戶了解如何工作。

可訪問性則允許界面適用于具有不同能力和跨各種設(shè)備的不同人。

實(shí)用性意味著它可以解決問題。

可取性意味著它是令人愉快的,并使用戶感到高興。

業(yè)務(wù)目標(biāo)

但是,啟動新產(chǎn)品或改進(jìn)知名產(chǎn)品的公司也必須從另一個角度思考。它通過各種財務(wù)因素、轉(zhuǎn)換、銷售和所有其他業(yè)務(wù)來運(yùn)作。

銀幕上的美會影響他們的商業(yè)目標(biāo)嗎?確實(shí)會。色彩理論和心理學(xué)、屏幕上的和諧、可讀的文本內(nèi)容和有吸引力的圖像不僅是讓用戶開心的關(guān)鍵。

用戶體驗(yàn)美學(xué)元素

不同的元素可以讓美融入用戶界面并構(gòu)建其美學(xué),其中包括:

a) 排版

b) 布局

c) 照片

d) 插圖

e) 3D圖形

f) 動畫片

g) 視頻

h) 人物

所有這些元素構(gòu)成了交互的美感,并直接影響積極的用戶體驗(yàn)。

一致性

從美學(xué)可用性效應(yīng)考慮的另一個核心點(diǎn)在于用戶體驗(yàn)和業(yè)務(wù)的十字路口——一致性。正如雅各布尼爾森所說,“一致性是最強(qiáng)大的可用性原則之一:當(dāng)事情總是表現(xiàn)相同時,用戶不必?fù)?dān)心會發(fā)生什么。”

事實(shí)上,它比交互更進(jìn)一步。它還有助于建立強(qiáng)大的品牌。標(biāo)志和品牌商品、網(wǎng)站、應(yīng)用程序、電子郵件和社交網(wǎng)絡(luò)——產(chǎn)品與其用戶的每個接觸點(diǎn)都應(yīng)遵循一個總體理念和一組價值觀,并以一致和完整的風(fēng)格包裝。

最后

在全球范圍內(nèi),所有的設(shè)計解決方案都應(yīng)該回答一個問題——Why?我們做出的所有決定都應(yīng)該從“Why”開始,這將形成如何與用戶交談,無論溝通的來源是什么。無論與品牌的連接點(diǎn)是什么,您都應(yīng)該確定與您交流的是什么。這會建立信任感并使品牌更強(qiáng)大,而這正是美有助于使用戶體驗(yàn)更加穩(wěn)固和有用的地方。

原文地址:站酷
作者:對啊設(shè)計君

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

截屏2021-05-13 上午11.41.03.png

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

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


日歷

鏈接

個人資料

存檔