首頁(yè)

設(shè)計(jì)模式 | 多級(jí)撤銷 Multilevel Undo:讓用戶更有安全感

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

What 是什么

簡(jiǎn)介:「多級(jí)撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統(tǒng)捕獲記錄,根據(jù)原始執(zhí)行順序,一步步返回歷史操作。


例子:用 Sketch 畫設(shè)計(jì)稿時(shí),可以多級(jí)撤銷,允許用戶返回上一步或更早的歷史操作


undefined


Why 為什么

具備多級(jí)撤銷的功能可以讓用戶覺(jué)得能夠?qū)缑孢M(jìn)行安全探索,不必?fù)?dān)心造成某些不可取消的修改。例如,如果單擊了錯(cuò)誤的菜單項(xiàng),不需要進(jìn)行復(fù)雜的恢復(fù),不需要退回到此前保存的文件版本,或者尋求系統(tǒng)管理員的幫助。


多級(jí)撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言,一名 Photoshop 用戶可能會(huì)在一個(gè)圖片上執(zhí)行一系列的濾鏡操作,研究那些結(jié)果看是不是他喜歡的,然后再逐一撤銷,回到起點(diǎn)。


When 什么時(shí)候使用

需要用戶頻繁在單一頁(yè)面上交互的用戶界面,相比普通的網(wǎng)站或者移動(dòng)端 APP,交互操作要復(fù)雜得多。例如:文件編輯器、圖形建模工具、郵件閱讀器、數(shù)據(jù)庫(kù)軟件、寫作工具、編程環(huán)境等。該功能能使用戶撤銷一系列操作而非單一個(gè)操作。


使用條件:該軟件的單一界面交互比較復(fù)雜和頻繁


How 如何使用

軟件首先需要一個(gè)強(qiáng)大的模型,這個(gè)模型是關(guān)于動(dòng)作是什么樣的——?jiǎng)幼鞯拿Q、動(dòng)作所關(guān)聯(lián)的對(duì)象,以及如何返回歷史動(dòng)作。


決定哪些動(dòng)作需要成為可取消的操作。如果動(dòng)作可以改變一個(gè)文件或者數(shù)據(jù)庫(kù)——任何將是永久性存在的對(duì)象——都應(yīng)該是可取消的動(dòng)作。具體而言,在大部分應(yīng)用里,人們期望能撤銷下面這些改變:

  • 文檔或表單的文字輸入

  • 數(shù)據(jù)庫(kù)

  • 圖片或畫布的修改

  • 布局上的變化位置、大小、順序或分組在圖像應(yīng)用程序中

  • 文件操作,例如刪除或修改

  • 對(duì)象的創(chuàng)建、刪除和重新組織,例如郵件消息或電子表單的列

  • 任何剪切、復(fù)制、粘貼操作


下面這些修改基本上是不可撤銷的:

  • 文本或?qū)ο筮x擇

  • 窗口或頁(yè)面之間的導(dǎo)航

  • 鼠標(biāo)光標(biāo)和文本光標(biāo)的定位

  • 滾動(dòng)條的位置

  • 窗口或面板的位置和尺寸

  • 在一個(gè)未提交的對(duì)話框或模態(tài)對(duì)話框上的改動(dòng)


展現(xiàn)方式

然后,決定以哪種方式把撤銷操作展現(xiàn)給用戶。大部分桌面應(yīng)用程序會(huì)把“撤銷/重復(fù)”的菜單項(xiàng)放在“編輯”菜單下。撤銷通常也關(guān)聯(lián)到Ctrl+Z 或類似的快捷鍵。


Example 案例

案例一:Microsoft OneNote 筆記編輯器

用戶需求:撤銷文字輸入

Microsoft Onenote  文檔編輯器擋在輸入過(guò)程中需要修改可以用快捷鍵 COM + Z 撤銷,或者使用編輯菜單下的按鈕幫助用戶返回上一步。

undefined


案例二:Photoshop 多級(jí)撤銷

用戶需求:回到歷史操作記錄

Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作,由于 PS 的操作修改繁瑣且復(fù)雜,所以為用戶提供了歷史記錄面板,用戶也可以點(diǎn)擊歷史操作步驟回到想要的歷史操作記錄。

undefined


案例三:美圖秀秀圖像處理 App

用戶需求: 撤銷回到上幾步圖像處理結(jié)果

使用美圖秀秀等圖片處理 App 對(duì)圖像進(jìn)行美化操作時(shí),常常會(huì)返回查看對(duì)比不同的效果,或者操作錯(cuò)誤時(shí)返回到前幾步,頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

undefined


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

文章來(lái)源:站酷。 作者:  Ant_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


「設(shè)計(jì)心理學(xué)」Uber利用心理學(xué)改善用戶體驗(yàn)

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

“Uber是一種非常獨(dú)特的模式,沒(méi)什么可以參考的產(chǎn)品”

——Travis Kalanick


Uber遍布全球65個(gè)國(guó)家,超過(guò)600個(gè)城市,擁有7500萬(wàn)用戶,為很多人解決了交通不便的問(wèn)題。


這個(gè)規(guī)模和增長(zhǎng)速度是前所未有的,Uber提到這其中獨(dú)特的商業(yè)模式和用戶體驗(yàn)是驅(qū)動(dòng)。


所以哪些是最重要的用戶體驗(yàn)問(wèn)題,Uber又是怎么通過(guò)科學(xué)的方式來(lái)解決這些問(wèn)題的呢?


Uber用戶最大的痛點(diǎn)-等待

-

想象一下你在凌晨2點(diǎn)的冬天,獨(dú)自矗立在陌生城市的街頭瑟瑟發(fā)抖;或者是你要參加一個(gè)重要的會(huì)議,如果Uber準(zhǔn)時(shí)到達(dá)的話那就正好趕得上。


在這些非常緊急的情況下,人們對(duì)時(shí)間的感知是扭曲的,等一秒像是一分鐘,等一分鐘像是一個(gè)小時(shí)。

不僅如此,人們還會(huì)用這種扭曲的等待時(shí)間來(lái)評(píng)價(jià)整體用戶體驗(yàn),為什么會(huì)這樣?這就用到一條心理學(xué)原則叫“峰終定律”(peakend rule).


隱藏在“難以忘懷的用戶體驗(yàn)”背后的科學(xué)

-


Image via UI Patterns.com


峰終定律指的是人們基于最高峰體驗(yàn)和最終體驗(yàn)來(lái)評(píng)價(jià)整體體驗(yàn),而不是在這段體驗(yàn)中的平均感受,這個(gè)定律對(duì)好體驗(yàn)和壞體驗(yàn)是通用的。


對(duì)品牌來(lái)說(shuō),顧客會(huì)深刻記住這兩個(gè)點(diǎn):最壞(或最好)的體驗(yàn)、最后的體驗(yàn)。

Photo by why kei on Unsplash


好體驗(yàn)對(duì)“等待時(shí)間”的要求是非??量痰?,這也是用戶給出好評(píng)的關(guān)鍵點(diǎn),Uber花了無(wú)數(shù)時(shí)間來(lái)解決這個(gè)痛點(diǎn),這就是Uber決定要應(yīng)用心理學(xué)來(lái)完善用戶體驗(yàn)的原因。


在這份調(diào)查中,Uber發(fā)現(xiàn)了3個(gè)關(guān)鍵原則,可以解決“等待時(shí)間”這個(gè)痛點(diǎn):厭惡無(wú)聊,操作透明化,目標(biāo)趨近效應(yīng)。


1.厭惡無(wú)聊

-


“人們討厭無(wú)所事事,他們需要一個(gè)原因忙起來(lái)”

——researcher Chris Hsee

Photo by Fabrizio Verrecchia on Unsplash


最近對(duì)心理學(xué)、幸福和用戶體驗(yàn)的研究,揭示出一個(gè)原則,就是“厭惡無(wú)聊”,指的是人們?cè)诿β禃r(shí)感到更快樂(lè),即使他們是被迫忙碌。


如何應(yīng)用這一原則?


可以讓用戶參與讀取信息、游戲化和增加視覺(jué)效果等方式,讓用戶保持忙碌的狀態(tài)。


像下面Uber采用的方式,他們利用一個(gè)動(dòng)畫來(lái)愉悅用戶,同時(shí)實(shí)時(shí)告訴你等待時(shí)間。

Uber Blog Australia


2.操作透明化

-


“當(dāng)用戶從我們?yōu)樗麄儎?chuàng)造價(jià)值的過(guò)程中分離時(shí),他們會(huì)感覺(jué)我們沒(méi)有全力以赴。

這時(shí)候他們較少重視或肯定我們的服務(wù)?!?/em>

——Ryan Buell,哈佛商學(xué)院

Photo by Sitraka Rakotoarivelo on Unsplash


操作透明化是一種能讓用戶看到公司如何運(yùn)營(yíng)操作的直接方式,這樣用戶就能看到我們?cè)谡麄€(gè)過(guò)程中付出了多少努力。


根據(jù)最新的研究發(fā)現(xiàn),操作透明化會(huì)讓用戶對(duì)產(chǎn)品的價(jià)值評(píng)價(jià)更高,讓人們感覺(jué)更好。


如何應(yīng)用操作透明化?


及時(shí)告知用戶,讓關(guān)鍵信息可見(jiàn),還要幫用戶理解信息來(lái)源。


在下面Uber Pool的例子中,他們提供了到達(dá)時(shí)間的計(jì)算方法這一信息。通過(guò)一種簡(jiǎn)便的方式告訴用戶,即使是沒(méi)有任何技術(shù)基礎(chǔ)的用戶也能看懂。

Engineering at Uber(右圖詳細(xì)解釋:我們是如何計(jì)算到達(dá)時(shí)間的)


3.目標(biāo)趨近效應(yīng)

-

目標(biāo)趨近效應(yīng)表明人們更愿意為即將達(dá)成的目標(biāo)而付出努力,而不是他們已經(jīng)走了多遠(yuǎn)。

Photo by Jonathan Chng on Unsplash


越接近目標(biāo),用戶就越愿意采取行動(dòng)更快的去完成這個(gè)目標(biāo)。


如何應(yīng)用目標(biāo)趨近效應(yīng)?


想象目標(biāo)趨近效應(yīng)是一條真實(shí)存在的終點(diǎn)線,用戶越接近終點(diǎn),越能鼓勵(lì)他們積極行動(dòng)。


你也會(huì)經(jīng)??吹?strong style="outline:0px;margin:0px;padding:0px;">這個(gè)原則應(yīng)用在很多交互元素上,比如進(jìn)度條,填寫完成度等,用即將完成來(lái)鼓勵(lì)用戶完成任務(wù)。


Uber通過(guò)解釋幕后發(fā)生了什么來(lái)應(yīng)用這一原則,他們解釋過(guò)程中的每一步,讓用戶感覺(jué)到為了達(dá)到他們的目標(biāo)正在不斷的努力。


最后

-

毫無(wú)疑問(wèn),Uber很大部分的收益來(lái)自利用科學(xué)改善用戶體驗(yàn),最先在Uber Pool運(yùn)行的增加了厭惡無(wú)聊、操作透明化、目標(biāo)趨近效應(yīng)的實(shí)驗(yàn)版本,效果非常好:


“Express POOL團(tuán)隊(duì)用A/B測(cè)試的方式,發(fā)現(xiàn)增加這些解決方案后,取消率降低了11%”

——“Uber如何大規(guī)模利用行為科學(xué)”


如果你想在產(chǎn)品中應(yīng)用這些原則,必須要結(jié)合非常嚴(yán)格的測(cè)試。一個(gè)原則的應(yīng)用,可能要通過(guò)上百種實(shí)現(xiàn)方式對(duì)比實(shí)驗(yàn),才能找到最佳解決方案。

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

文章來(lái)源:站酷 作者:彩虹BOOK
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



用戶體驗(yàn)設(shè)計(jì)-基本概念,與藝術(shù)的區(qū)別,工作中的職責(zé),職位上的分類

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

一、設(shè)計(jì)和藝術(shù)的區(qū)別

藝術(shù):

藝術(shù)是感性、天馬行空、富有創(chuàng)造力的,表達(dá)創(chuàng)造者的個(gè)人意識(shí)

設(shè)計(jì):

設(shè)計(jì)是理性、精密的,為了解決用戶的問(wèn)題

      

(你看得懂嗎?你有什么見(jiàn)解?為什么大家見(jiàn)解不一樣?這就是藝術(shù)的魅力)


二、用戶體驗(yàn)及用戶體驗(yàn)設(shè)計(jì)

什么是用戶體驗(yàn)?——————使用一個(gè)產(chǎn)品時(shí)的主觀感受

用戶體驗(yàn)設(shè)計(jì)?———————為了提升用戶體驗(yàn)而做的設(shè)計(jì)

 

1.用戶體驗(yàn)設(shè)計(jì)

首先要解決用戶的某個(gè)實(shí)際問(wèn)題--讓問(wèn)題變得容易解決--最后給用戶留下深刻的印象。(視覺(jué)只是其中一部分,并不是設(shè)計(jì)的全部)


Eg:充電插座的苦惱--錯(cuò)開(kāi)位置

尿液四濺--廁所里放一只蒼蠅,用戶會(huì)去瞄準(zhǔn)上廁所(設(shè)計(jì)美觀且有趣味性)

 

2、用戶體驗(yàn)設(shè)計(jì)的特征

(1)嚴(yán)謹(jǐn)、理性、創(chuàng)意

先關(guān)注要解決的問(wèn)題----其次思考有趣的創(chuàng)意幫助用戶得到更好的體驗(yàn)。

(2)提供特定問(wèn)題的解決方案

設(shè)計(jì)目標(biāo)是什么,為什么人解決問(wèn)題,如何解決

 

Eg:鋼鐵俠u盤死死按住關(guān)機(jī)鍵;樓梯是為殘疾人設(shè)計(jì)的嗎,我懵了?


(3)不讓用戶思考

用戶感到挫敗,會(huì)放棄。你的設(shè)計(jì)不要用戶一頭霧水。

(我到底怎么走?)


(4)趣味橫生

尿液四濺貼提示語(yǔ)效果不好,放一只蒼蠅效果很好?

因?yàn)椋鹤プ×擞脩舻男睦砗托袨榱?xí)慣,同時(shí)充滿趣味,吸引用戶

 

Eg:path推出的商店功能,在里面買自己喜歡的貼紙,搖晃手機(jī)貼紙也搖晃,感覺(jué)很好玩吧~帶來(lái)好的體驗(yàn)感

 


3.用戶體驗(yàn)設(shè)計(jì)師遇到問(wèn)題如何思考




三、各種設(shè)計(jì)師的區(qū)分

1.怎么和別人解釋用戶體驗(yàn)設(shè)計(jì)師

A:“你用一個(gè)網(wǎng)站的時(shí)候,有沒(méi)有出現(xiàn):某個(gè)功能找不到了,點(diǎn)擊按鈕沒(méi)有反應(yīng),填寫的信息不知道哪里錯(cuò)了總是不能提交成功?”

B:我們的工作就是改善這種情況,讓你使用網(wǎng)站時(shí)有一個(gè)好的體驗(yàn),同時(shí)能讓用戶感到愉悅和不受打擾。

工作中:除了考慮用戶還要讓公司有利可圖


2.交互設(shè)計(jì)師

通過(guò)分析用戶心理模型、設(shè)計(jì)任務(wù)流程、運(yùn)用交互知識(shí)把業(yè)務(wù)邏輯(需求/功能)以用戶能理解的方式表達(dá)給用戶,最終實(shí)現(xiàn)產(chǎn)品戰(zhàn)略(公司需求和用戶需求的平衡點(diǎn))的過(guò)程。

即:從公司戰(zhàn)略角度考慮問(wèn)題,在公司需求的基礎(chǔ)上讓用戶覺(jué)得好用、易用

 

交互設(shè)計(jì)師的產(chǎn)出物:不是原型,你不是畫圖的工具,重要的是解決問(wèn)題的能力

工作內(nèi)容:競(jìng)品分析文檔、用戶反饋整理、流程圖、設(shè)計(jì)草圖、原型...

 

3.視覺(jué)設(shè)計(jì)師

原畫:設(shè)計(jì)者很強(qiáng)的手繪能力,作品充滿藝術(shù)表現(xiàn)力

平面:傳達(dá)思想,較強(qiáng)的感染力

推廣運(yùn)營(yíng)設(shè)計(jì)師:突出重點(diǎn)抓眼球

UI:良好的審美、具備一定的交互知識(shí)

                      (原畫)                              (平面)                                              (推廣運(yùn)營(yíng))

4.用戶研究員

通過(guò)各種分析和研究,深入了解用戶特征,用戶行為習(xí)慣,為產(chǎn)品運(yùn)營(yíng)推廣提供必要的方向

工作內(nèi)容:市場(chǎng)分析、競(jìng)品分析、創(chuàng)建人物角色、問(wèn)卷調(diào)查、焦點(diǎn)小組、用戶訪談、可用性測(cè)試

 


四、用戶體驗(yàn)設(shè)計(jì)師的作用和價(jià)值

1、用戶價(jià)值商業(yè)價(jià)值

用戶通過(guò)優(yōu)秀的設(shè)計(jì)快速達(dá)到目標(biāo),企業(yè)也會(huì)財(cái)源滾滾

eg:改變一個(gè)按鈕的顏色,點(diǎn)擊率提高35%;優(yōu)化操作流程,轉(zhuǎn)化率提高50%...


2、項(xiàng)目?jī)r(jià)值

跟進(jìn)各個(gè)環(huán)節(jié),保證產(chǎn)出物質(zhì)量

推進(jìn)統(tǒng)一及標(biāo)準(zhǔn)化,提升設(shè)計(jì)效率

促使項(xiàng)目流程合理,有規(guī)劃

 


五、交互設(shè)計(jì)師的作用和價(jià)值

1.工作內(nèi)容

分析重塑需求;與用研配合,了解用戶特征與行為;設(shè)計(jì)結(jié)構(gòu)、流程、界面、動(dòng)態(tài)效果;跟進(jìn)視覺(jué)、前端、開(kāi)發(fā);及時(shí)整理上線問(wèn)題,準(zhǔn)備下次迭代...


2.品牌價(jià)值

維護(hù)和突出品牌形象,統(tǒng)一的設(shè)計(jì)理念

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

文章來(lái)源:站酷 作者:一團(tuán)雯子

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

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

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


必讀!用戶體驗(yàn)設(shè)計(jì)指南 - KIT組件庫(kù)一站式體驗(yàn)搭建

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

本文將從理論到實(shí)踐,從軟件到插件,再到不同應(yīng)用場(chǎng)景拆解和團(tuán)隊(duì)協(xié)同的重構(gòu),一步步教你如何搭建產(chǎn)品KIT組件庫(kù)。也給大家?guī)?lái)逆天的Anima插件教程,組件化設(shè)計(jì)的必備插件,目前國(guó)內(nèi)還比較少有文章講到。手把手!嘴對(duì)嘴!堪稱全網(wǎng)最細(xì)保姆級(jí)教程!




01. 什么是KIT組件庫(kù)?


一個(gè)成熟的設(shè)計(jì)團(tuán)隊(duì),都會(huì)為產(chǎn)品制定設(shè)計(jì)規(guī)范,搭建產(chǎn)品KIT組件庫(kù),組件化思維也是設(shè)計(jì)師的必備思維之一。組件庫(kù)會(huì)讓團(tuán)隊(duì)協(xié)作變得高效且一致,讓團(tuán)隊(duì)成員專注于深耕體驗(yàn)和細(xì)節(jié),實(shí)現(xiàn)設(shè)計(jì)向產(chǎn)品賦能。極大的節(jié)省設(shè)計(jì)和開(kāi)發(fā)成本,優(yōu)化用戶在界面流轉(zhuǎn)間的感知差異體驗(yàn)。


KIT組件庫(kù)本質(zhì)上是一個(gè)集合的Sketch文件,由原子、分子、組織、模板、頁(yè)面組成。原子理論支撐可復(fù)用、可修改、易于協(xié)同和維護(hù)。


由Google推出的當(dāng)時(shí)媲美蘋果全新設(shè)計(jì)語(yǔ)言的Material Design,Material Design也是最為經(jīng)典組件庫(kù)設(shè)計(jì)。現(xiàn)如今阿里的Ant Design和Element給我們提供了一套完整可復(fù)用的組件庫(kù)。



02. 原子設(shè)計(jì)理論


原子設(shè)計(jì)是將界面設(shè)計(jì)中最小元素——原子,組合嵌套為分子、組織、模板、頁(yè)面的系統(tǒng)規(guī)范化設(shè)計(jì)過(guò)程。




1.  原子 Atoms

原子Atoms,我們知道是指化學(xué)反應(yīng)不可再分的基本微粒。原子在化學(xué)反應(yīng)中不可分割,但在物理狀態(tài)中可以分割的。原子由原子核和繞核運(yùn)動(dòng)的電子組成,所以原子是構(gòu)成物質(zhì)的最小粒子這就不對(duì)了。


但在界面設(shè)計(jì)中我們所說(shuō)的原子是構(gòu)成界面的最小顆粒度元素,在設(shè)計(jì)中無(wú)法再被拆分或者拆分下去已無(wú)意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標(biāo)、分割線等。

2. 分子 Molecules

由原子按照一定的規(guī)律和目的組成的部分為分子,在界面設(shè)計(jì)中比如Button按鈕、swittch開(kāi)關(guān)、非模態(tài)彈窗Toast等,可以理解為比較簡(jiǎn)單的小組件。

3. 組織 Organisms

將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯(lián)系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


4. 模板 Templates

將組織與分子、原子進(jìn)行特定的組合就形成了模板。這一步已經(jīng)能展示界面的主要功能和交互了。一般這一步得到的結(jié)果就是我們?nèi)粘9ぷ髦械脑蛨D,產(chǎn)品的大致形態(tài)也慢慢清晰。所以模板可以理解成未上色的界面。


5. 頁(yè)面 Pages

最終輸出的高保真設(shè)計(jì)圖即為我們說(shuō)的表現(xiàn)層的頁(yè)面Pages。將模板填充信息和圖片內(nèi)容,就得到了高保真設(shè)計(jì)界面。


03. KIT組件庫(kù)搭建過(guò)程詳解


以最近做的一個(gè)NFT項(xiàng)目為例子,展示具體搭建細(xì)節(jié)的全過(guò)程。




1.  命名規(guī)范


命名按照:一級(jí)分類 / 二級(jí)分類 / 三級(jí)分類 。例如:一級(jí)標(biāo)題樣式/蘋方/常規(guī)/灰階0


其中 “/” 為層級(jí)結(jié)構(gòu)分隔符,Sketch會(huì)自動(dòng)識(shí)別。組件庫(kù)的搭建需要按照層級(jí)規(guī)范命名,從最外層到最內(nèi)層,就像一個(gè)抽屜,每一層都對(duì)應(yīng)放著東西。規(guī)范的命名會(huì)使后期調(diào)用維護(hù)、團(tuán)隊(duì)協(xié)同變得清晰高效。




2. 樣式


(1)顏色樣式

我們?cè)O(shè)計(jì)一般都需要定義顏色樣式,一般有主色調(diào)(Main tone)、輔助色(Minor)、漸變色(Gradient)、字體的灰階度(Gray scale)等。選中你需要?jiǎng)?chuàng)建樣式的顏色,點(diǎn)擊「外觀 - 創(chuàng)建」,在輸入框內(nèi)輸入層級(jí)規(guī)范命名。



(2)文字樣式

定義文字樣式,文字具有字體、大小、字重、灰階等屬性,選中文字,點(diǎn)擊【外觀-新建】,在輸入框內(nèi)輸入層級(jí)規(guī)范命名。




(3)樣式切換

當(dāng)我們需要切換一個(gè)定義好的文字樣式時(shí),比如從“閱讀文本樣式”更換為“一級(jí)標(biāo)題樣式”,只需要選中文字 - 點(diǎn)擊「當(dāng)前文檔」下定義的文字樣式 - 點(diǎn)擊需要更改的文字樣式即可。




(4)樣式修改 - 解綁與更新

當(dāng)我們需要對(duì)定義好的文字樣式進(jìn)行修改時(shí),比如在設(shè)計(jì)的過(guò)程中突然感覺(jué)"閱讀文本樣式"字體小了點(diǎn),為了優(yōu)化閱讀體驗(yàn)需要增大字號(hào)。


1. 單個(gè)修改 - 解綁

將文字調(diào)整更改為你需要的大小或字重,此時(shí)只對(duì)單個(gè)文本修改,不對(duì)其他文本產(chǎn)生影響,點(diǎn)擊解綁,便可與定義好的樣式分離。


2. 整體同步 - 更新

將文字調(diào)整更改為你需要的大小或字重,樣式名稱后會(huì)出現(xiàn) "*" 星號(hào),此時(shí)代表未保存,且更新按鈕激活,點(diǎn)擊更新按鈕則所有使用該樣式的字段都會(huì)更改,整體同步更新。




3. 組件

組件是將元素定義為標(biāo)準(zhǔn)化可復(fù)用的集合體,對(duì)組件進(jìn)行規(guī)范的命名,形成高效設(shè)計(jì)的KIT組件庫(kù)。


(1)文本組件

選中我們需要定義的文本字段,注意!根據(jù)實(shí)際應(yīng)用場(chǎng)景選擇合適的文本對(duì)齊方式,否則修改字段信息是會(huì)出錯(cuò)。這里文本選擇左對(duì)齊,點(diǎn)擊 「創(chuàng)建控件」- 按照層級(jí)規(guī)范命名,選擇從左往右布局 - 點(diǎn)擊 「覆蓋層」即可對(duì)文本字段內(nèi)容進(jìn)行修改。




(2)標(biāo)簽組件


1. 單個(gè)標(biāo)簽

當(dāng)設(shè)計(jì)完標(biāo)簽后,對(duì)標(biāo)簽創(chuàng)建組件。依次選中便簽中的文字“LIMIT”、“2000份”,依次將文本選擇左對(duì)齊,步驟同上。將整個(gè)標(biāo)簽打組,點(diǎn)擊 「創(chuàng)建控件」- 按照層級(jí)規(guī)范命名,選擇從左往右布局(這里注意!從左往右布局表示標(biāo)簽在更改字段信息后,便簽左邊固定不動(dòng),從左往右自適應(yīng)) - 在覆蓋層修改文本字段信息,庫(kù)存標(biāo)簽組件自適應(yīng)。




2. 標(biāo)簽修改           
         

如果我們覺(jué)得這個(gè)庫(kù)存標(biāo)簽設(shè)計(jì)的不滿意,或者還需新增倒計(jì)時(shí)標(biāo)簽、已售標(biāo)簽,那怎樣又該怎么做的?


第一步:這時(shí)我們新建一個(gè)Sketch文件,命名為「 *** KIT 組件庫(kù)」。選中標(biāo)簽圖標(biāo)復(fù)制,將圖標(biāo)粘貼到新建文件內(nèi),注意!此時(shí)需要給圖標(biāo)添加合適的畫板,并按規(guī)范命名。

第二步:將Sketch文件保存到桌面,拖動(dòng)到「首選項(xiàng)-組件庫(kù)」內(nèi)。

第三步:選中組件,回車可進(jìn)入控件(組件)頁(yè)面,可直接調(diào)用定義好的控件,進(jìn)行修改。





Tips:這里畫板的作用是

(1)畫板是用來(lái)規(guī)范固定組件位置和大小的,成套系的KIT Library需要建立畫板。

(2)畫板組件在創(chuàng)建后,調(diào)用時(shí)只固定大小和邊界。

(2)如果只是做較少的界面,較少的復(fù)用的樣式,就可以不用做畫板。




3. 多個(gè)標(biāo)簽

當(dāng)頁(yè)面需要不止一個(gè)標(biāo)簽時(shí),就需要新增標(biāo)簽,通常為左右或上下布局。若直接增加一個(gè)標(biāo)簽修改字段,文本標(biāo)簽不會(huì)自適應(yīng)。 和之前操作一致,將新建的標(biāo)簽新建組件后,可實(shí)現(xiàn)標(biāo)簽文本自適應(yīng)。




4. Sketch素材調(diào)用

繼續(xù)添加商品作者組件、價(jià)格組件。點(diǎn)擊右邊覆蓋層可修改文本字段。點(diǎn)擊文字右邊小icon可調(diào)用Sketch自帶的數(shù)據(jù)。




(3)容器組件整合

將前面定義好的所有組件整合到容器中,形成可直接復(fù)用的商品信息容器組件。


第一步:調(diào)用定義好的閱讀文本樣式,注意!直接拖過(guò)來(lái)即可,文本框的長(zhǎng)度左右拉到合適的左右間距,這里不需要?jiǎng)游谋究虻母叨龋駝t會(huì)出錯(cuò)。將底部容器(卡片)的收起到合適的高度


第二步:選中整體打組,創(chuàng)建組件。注意! 此時(shí)選擇從上向下布局。


第三步:選中整體,在右側(cè)覆蓋層可對(duì)文本進(jìn)行編輯,輸入文本字段,此時(shí)容器高度實(shí)現(xiàn)自適應(yīng)。




(4)組件的拆解與重構(gòu)


頁(yè)面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構(gòu)為組織、模板和頁(yè)面。




(5)Anima插件


如果上下同時(shí)有卡片的情況該怎么呢? 當(dāng)然,我們完全可以將它們一起定義組件,但有沒(méi)有其他更便捷,更靈活的方法呢?這里跟大家介紹Anima插件的使用,會(huì)使得大家在搭建組件庫(kù)時(shí)變得更加靈活高效。


Anima插件為一款在線自動(dòng)響應(yīng)式的插件,其中的STACK與PADDING功能簡(jiǎn)直是Sketch設(shè)計(jì)必備,簡(jiǎn)直逆天。




1. PADDING功能

新建一個(gè)文本,當(dāng)點(diǎn)擊PADDING后,會(huì)自動(dòng)生成一個(gè)底板,選中底板可對(duì)其進(jìn)行編輯,更改顏色、原角度等。在PADDING輸入框內(nèi)可輸入距離上下左右的邊距。此時(shí)注意文本的對(duì)其方式,左對(duì)齊一般適合標(biāo)簽使用較多,而居中對(duì)齊適合一般的居中按鈕,如立即支付、立即報(bào)名等。




2. STACK功能

將三個(gè)標(biāo)簽分別打組,再全選整體打一個(gè)組,點(diǎn)擊STACK,選擇左右排版和居中對(duì)齊,輸入你需要的間距。此時(shí)Anima插件最牛的STACK功能就是可以雙擊選中任一個(gè)標(biāo)簽,拖拽可改變排列順序,松手后還可以自適應(yīng)。




04. 為什么要搭建組件庫(kù)?


(1)統(tǒng)一(Unified)


1. 團(tuán)隊(duì)不同成員或新來(lái)設(shè)計(jì)師之間協(xié)同配合,保證輸出的一致性和穩(wěn)定性。


2. 統(tǒng)一的組件庫(kù)樣式,會(huì)減輕用戶在頁(yè)面流轉(zhuǎn)間的疑惑感和理解成本,使用戶體驗(yàn)得到了提高。



(2)效率(Efficientcy)


1. 減少相同模塊的重復(fù)設(shè)計(jì)。一個(gè)產(chǎn)品功能流轉(zhuǎn)、頁(yè)面交互必定會(huì)涉及到大量的重復(fù)設(shè)計(jì)的樣式與組件。試想一下,如果每一個(gè)都重新設(shè)計(jì)將是一個(gè)巨大的時(shí)間成本浪費(fèi)。


2. 如果從產(chǎn)品的全生命周期來(lái)看,搭建好設(shè)計(jì)中臺(tái)KIT組件庫(kù),并與開(kāi)發(fā)進(jìn)行溝通,能減少前端開(kāi)發(fā)樣式,將時(shí)間更多的放在功能交互體驗(yàn)和項(xiàng)目推動(dòng)上,極大提高了效率。



(3)協(xié)同(Together)


1. 建立完善的設(shè)計(jì)規(guī)范和KIT組件庫(kù),提高組件庫(kù)優(yōu)化迭代效率。組件庫(kù)團(tuán)隊(duì)協(xié)同自動(dòng)更新。


2. KIT組件庫(kù)一鍵修改,也可通過(guò)組件分離功能(解綁)單獨(dú)對(duì)樣式進(jìn)行修改,工作中需要對(duì)設(shè)計(jì)反復(fù)調(diào)整打磨,可進(jìn)行批量一鍵更改,單個(gè)模塊的單獨(dú)修改。




05. 什么時(shí)候搭建組件庫(kù)?


什么時(shí)候時(shí)候搭建組件庫(kù)?先定義規(guī)范都是扯淡!所謂實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),“在設(shè)計(jì)開(kāi)始之前就制定設(shè)計(jì)規(guī)范,是不切實(shí)際的做法,你會(huì)發(fā)現(xiàn)做好的規(guī)范在實(shí)際操作中是無(wú)用且白費(fèi)精力的”摘自《破繭成蝶 用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路》。所以組件庫(kù)中的組件必定是經(jīng)過(guò)反復(fù)修改后適合產(chǎn)品以及可后期可復(fù)用的。


















并不是所有的設(shè)計(jì)都需要做設(shè)計(jì)規(guī)范或者KIT組件庫(kù)。組件庫(kù)的搭建本身就是一個(gè)耗費(fèi)時(shí)間人力的事情,如果是一次性項(xiàng)目那根本就沒(méi)有必要做組件庫(kù)了。是否需要?jiǎng)?chuàng)建樣式或組件取決于該樣式或組件在后續(xù)的工作中是否會(huì)被復(fù)用或復(fù)用的頻次。也會(huì)減少前端工程師重復(fù)開(kāi)發(fā)CSS樣式以及后臺(tái)數(shù)據(jù)的封裝成本。



06. 團(tuán)隊(duì)協(xié)同


將組件都定義在新建的Sketch文件中,將文件發(fā)給你的團(tuán)隊(duì)其他成員。步驟同上。


第一步:新建一個(gè)Sketch文件,命名為「 *** KIT組件庫(kù)」,將組件都創(chuàng)建在新建文件內(nèi)。

第二步:將Sketch文件發(fā)送給團(tuán)隊(duì)其他成員,拖動(dòng)到Sketch「首選項(xiàng)-組件庫(kù)」內(nèi)。

第三步:直接調(diào)用定義好的組件。


共享組件庫(kù)個(gè)人使用 Sketch Cloud,但組件庫(kù)有更新Sketch右上角會(huì)有提示,及時(shí)溝通更新即可。



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

文章來(lái)源:站酷  作者:JI_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


情感化設(shè)計(jì)心理學(xué):用戶心理定律及優(yōu)秀案例分析

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

將普遍存在的人性用戶心理規(guī)律運(yùn)用于設(shè)計(jì),增加設(shè)計(jì)的溫度。

近來(lái)對(duì)用戶心理比較感興趣,去看相關(guān)設(shè)計(jì)資料的時(shí)候發(fā)現(xiàn)相關(guān)內(nèi)容重復(fù)性較高,多方搜集資料結(jié)合自己的一些分析總結(jié)出一篇補(bǔ)充。

定律是鑰匙,在遇到讓我們上癮,持續(xù)付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續(xù)的設(shè)計(jì)吸收。










undefined

undefined

undefined

undefined

undefined

最后想說(shuō),設(shè)計(jì)師的價(jià)值不僅僅在視覺(jué),好的設(shè)計(jì)必是好用好看好懂用戶的??珙I(lǐng)域?qū)W習(xí)補(bǔ)充自己的視野,多思多想,掌握鑰匙,開(kāi)啟用戶不同的心門。

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

文章來(lái)源:站酷  作者:唐小蔥

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

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

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


案例分享 PM/UX 必看 [用戶體驗(yàn)]

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


 

講User Research | 用戶研究 之前,有必要先介紹下“用戶體驗(yàn)”。這兩者是密切關(guān)聯(lián)的。

 


作為一枚互聯(lián)網(wǎng)老兵,先說(shuō)一下歷史吧。

 

N年前,UX Designer還不怎么流行。

 

隨著喬幫主iphone4的橫空出世,驚為天人,徹底改變了整個(gè)手機(jī)生態(tài)。于是在中國(guó)市場(chǎng),各種熱錢涌入,到處都是創(chuàng)業(yè)公司(start-up),各類APP紛紛孵出(我在上海)。這是整個(gè)移動(dòng)互聯(lián)網(wǎng)行業(yè)野蠻生長(zhǎng)的年代。公司那么多了,那么UI,iOS開(kāi)發(fā),Android 開(kāi)發(fā)等等都是供不應(yīng)求的。

 

 

當(dāng)然,那么多創(chuàng)業(yè)公司,90%都會(huì)在一年內(nèi),在天使輪的階段死掉。能活下來(lái)的,都是壯士!現(xiàn)在你看看你手機(jī)上裝的啥耳熟能詳?shù)腁PP,基本也就是那些了。

 

題外話:我當(dāng)時(shí)的公司樓上是一家知名網(wǎng)游公司。某天我很快樂(lè)(KU B)的去上班(Make Money),結(jié)果就看到新聞?wù)f那家創(chuàng)始人CEO昨天半夜心臟病發(fā),人沒(méi)了。隔天就看到他家公司門口貼訃告了。(此處默哀!)創(chuàng)業(yè)不易,真心能活下來(lái)的都是壯士!

 

野蠻生長(zhǎng)的年代,對(duì)于崗位要求不會(huì)那么精細(xì)。做UI的,最好你什么都會(huì),十項(xiàng)全能。平面/手繪/App UI/ Web UI/H5/交互/動(dòng)效/前端最好也懂一些/其他。。。


那時(shí)候少有交互崗,因?yàn)榻换復(fù)ǔ?huì)被產(chǎn)品崗,或者UI崗兼了。但隨著這些年WEB/APP越來(lái)越成熟,用戶對(duì)于體驗(yàn)的要求越來(lái)越高。另外,隨著各類海歸人才帶回來(lái)的國(guó)外先進(jìn)設(shè)計(jì)理念。各路大中小廠對(duì)于UX交互也就越來(lái)越重視。

 

于是,就有了UX Design | 交互設(shè)計(jì)的專門崗位,有些也叫User Experience Design | 用戶體驗(yàn)設(shè)計(jì),在互聯(lián)網(wǎng)行業(yè),兩者基本一個(gè)意思。

(我們這里不討論用戶體驗(yàn)的五個(gè)層次,戰(zhàn)略層、結(jié)構(gòu)層、表現(xiàn)層之類的。這些太理論,大概知道就行了,多說(shuō)我也困。真要硬掰,那交互設(shè)計(jì)實(shí)際算是用戶體驗(yàn)中的結(jié)構(gòu)層。但在國(guó)外專業(yè)文獻(xiàn)中,UX Design=User Experience Design。不要硬剛。 :P)

 

人類總是情緒化的,總是對(duì)他們世界里的產(chǎn)品做出情緒化的反應(yīng)

-艾倫·庫(kù)珀,Cooper公司總裁,Visual Basic之父

 

 

一.什么是 User Experience | 用戶體驗(yàn)?


通常來(lái)說(shuō),“用戶體驗(yàn)”就是人們?cè)谑褂卯a(chǎn)品時(shí)候的感受。用戶體驗(yàn)并不僅限于互聯(lián)網(wǎng)行業(yè),各行各業(yè)都有。


用戶體驗(yàn)更關(guān)注的是人和物的交互(Human-Objects Interaction)之間的聯(lián)系。


“物”在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用可以是Web,APP,System等。

 

舉個(gè)生活中的例子,迪斯尼。

迪斯尼,娛樂(lè)行業(yè)吧?但它更是一家徹徹底底的體驗(yàn)公司,極其注重體驗(yàn)管理。


迪斯尼樂(lè)園為小朋友們,大朋友們筑造了一個(gè)夢(mèng)。迪斯尼的體驗(yàn)管理,就是從造夢(mèng)這個(gè)目的出發(fā)的。


對(duì)于服務(wù)人員、演職人員的要求,干凈、禮貌都是最基本的。


迪斯尼對(duì)演員的要求是,你不是演米老鼠,你就是米老鼠。用戶體驗(yàn)細(xì)致到如下:

只要有賓客在,演員就不能把頭套摘下。之前有新聞?wù)f演員中暑了,也堅(jiān)持不取下頭套。(這里我們不討論勞工權(quán)益之類的問(wèn)題)因?yàn)椴荒軞绾⒆觽兊膲?mèng)。

在同一個(gè)視野里,不能有兩個(gè)同樣的米老鼠。因?yàn)閷?duì)于孩子來(lái)說(shuō),米老鼠只有一個(gè)!

全世界演米老鼠的演員,都要苦練簽名。因?yàn)閷?duì)于孩子來(lái)說(shuō),全世界只有一個(gè)米老鼠,簽名當(dāng)然是一摸一樣的。


這只是演員,還有其他工作人員,還有工作以外的服務(wù)。此處不再延申討論了。


 

二.什么是 User Experience Design | 用戶體驗(yàn)設(shè)計(jì)(即UX Design | 交互設(shè)計(jì))?


用戶體驗(yàn)設(shè)計(jì),顧名思義,就是為產(chǎn)品/服務(wù)設(shè)計(jì)一個(gè)良好的體驗(yàn)。用戶體驗(yàn)設(shè)計(jì)同樣并不僅限于互聯(lián)網(wǎng)行業(yè),各行各業(yè)都有。

 

舉個(gè)生活中的例子,麥當(dāng)勞的打包袋設(shè)計(jì)。


傳統(tǒng)設(shè)計(jì)是這樣的。

漢堡薯?xiàng)l什么的全部裝紙袋,沒(méi)有提手,每次都捏到我手指抽筋。飲料再另外裝個(gè)塑料袋。

一個(gè)捏,一個(gè)提。其實(shí)是不舒服也不方便的。

 

用戶體驗(yàn)好的設(shè)計(jì)可以是這樣的。方便快捷,節(jié)約資源,解放手指。

(gif動(dòng)圖,刷新頁(yè)面重播)

 

我們這里想說(shuō)的用戶體驗(yàn)設(shè)計(jì),特指互聯(lián)網(wǎng)行業(yè)。


早期的Web頁(yè),幾乎就是個(gè)靜態(tài)網(wǎng)頁(yè),就提供些信息展示。那時(shí)候用的還是asp, php, .net技術(shù),快捷點(diǎn)的話有個(gè)模板套套,新聞/產(chǎn)品就能后臺(tái)維護(hù)了。


從大概2010年以后,Web就開(kāi)始越來(lái)越復(fù)雜了,APP也開(kāi)始越來(lái)越精細(xì)和規(guī)范了。這對(duì)于交互的要求就越來(lái)越高,需要有一個(gè)良好的用戶體驗(yàn)設(shè)計(jì)。

 

舉個(gè)APP的例子。

淘寶最近對(duì)“確認(rèn)收貨方式”做了優(yōu)化(大致在2021.9),不知道你發(fā)現(xiàn)了嗎?


淘寶購(gòu)物時(shí),首先,在買東西付款的時(shí)候,就需要輸入第1次支付密碼。


最后,在收貨確認(rèn)時(shí),

Before: 原來(lái),還需要再輸入第2次支付密碼。

Now: 現(xiàn)在,只需要點(diǎn)擊“確認(rèn)”就行了,不需要再輸入一次支付密碼了。此次優(yōu)化,就是簡(jiǎn)化用戶的操作,提升用戶體驗(yàn)。

 

如下圖為最新優(yōu)化后的截圖:


 

如圖,

Before: 原來(lái),在Step 3中,原來(lái)還需要再輸入第2次密碼。

Now:現(xiàn)在,在Setp3中,直接從Setp3——>Setp4.


三.為什么UX Design | 交互設(shè)計(jì)很重要呢?

 

產(chǎn)品成功與否,涉及到太多方面了。戰(zhàn)略決策、產(chǎn)品、內(nèi)容、用戶體驗(yàn)、技術(shù)、運(yùn)營(yíng)、服務(wù)、競(jìng)品情況,資金投入、運(yùn)氣等等,缺一不可。而用戶體驗(yàn)/交互是其中重要的一環(huán)。


專注于用戶的交互設(shè)計(jì),大大增加了項(xiàng)目成功的機(jī)會(huì)。因?yàn)楫a(chǎn)品是給人用的,尤其是互聯(lián)網(wǎng)產(chǎn)品,用戶不會(huì)因?yàn)楫a(chǎn)品是知名品牌,就堅(jiān)定不移的支持它,買它,用它。


要是產(chǎn)品不好用,那放棄它,也是遲早的事情了。


畢竟,能讓大家都喜愛(ài)的,還不管怎么樣都愛(ài)到死的,也只有RMB人民幣了。

 

 

四.什么是 UX Designer | 交互設(shè)計(jì)師?


 

交互設(shè)計(jì)師,需要通過(guò)調(diào)查和分析等用戶研究方法來(lái)設(shè)計(jì)產(chǎn)品,或者對(duì)產(chǎn)品做優(yōu)化改進(jìn),以保證用戶能有一個(gè)良好的用戶體驗(yàn)。


 

五.UX 和UI的區(qū)別?


UI,純粹的UI,通俗來(lái)說(shuō),就是負(fù)責(zé)好看。把產(chǎn)品做好看了,做精致了,讓用戶看得賞心悅目,心情舒暢。這是美學(xué)意義上的工作。

 

UX,通俗來(lái)說(shuō),就是負(fù)責(zé)好用。讓整個(gè)產(chǎn)品流程簡(jiǎn)單又便利,用戶使用產(chǎn)品不會(huì)有停頓和疑問(wèn),讓用戶使用產(chǎn)品的感受非常好。最終目的是為了增加用戶的粘性,提高產(chǎn)品的流量,促進(jìn)產(chǎn)品的轉(zhuǎn)化率,為公司帶來(lái)直接或間接的收益增長(zhǎng)。

 

UX是產(chǎn)品中的重要一環(huán)。

 

當(dāng)然,在實(shí)際工作中,如果產(chǎn)品——長(zhǎng)得好看+體驗(yàn)好。那就是王者~

這也應(yīng)該是做產(chǎn)品的要求和標(biāo)準(zhǔn),也應(yīng)該是設(shè)計(jì)師對(duì)自己的要求和標(biāo)準(zhǔn)。

 

 

舉個(gè)兩者結(jié)合的例子,摩拜單車。

(雖然他欠用戶押金,雖然他已經(jīng)沒(méi)了,成為了美團(tuán)單車。但是他的故事還是可以講一講的)

 

設(shè)計(jì)方面,

摩拜單車的聯(lián)合創(chuàng)始人王曉峰(負(fù)責(zé)具體的研發(fā)、運(yùn)營(yíng)及市場(chǎng)工作)回憶當(dāng)年做摩拜單車的時(shí)候,首先考慮的是產(chǎn)品和服務(wù)要讓消費(fèi)者有面子。


前期他做了很多市場(chǎng)調(diào)研(看,用戶研究),當(dāng)年在校園外騎車的只有三種:除了專業(yè)騎賽車的,就是藍(lán)領(lǐng)工人和老年人。


想讓白領(lǐng)階層都愿意騎自行車,就必須要讓他們覺(jué)得有面子。如果讓一個(gè)白領(lǐng),騎著五花八門,甚至還叮當(dāng)帶響的自行車上路,那是很沒(méi)面子的,這種生意一定會(huì)失敗。


于是,摩拜就設(shè)計(jì)出一輛金屬感十足的橙色自行車,好看又酷炫。

 

用戶體驗(yàn)方面,

摩拜單車能夠提供給用戶的體驗(yàn)一直有著不錯(cuò)的口碑,比如車身結(jié)實(shí)、開(kāi)鎖方便、損壞率低。但是,在夸贊的后面,用戶們往往會(huì)補(bǔ)刀:「好是好,就是太重了?!梗ǖ谝淮亓繛?5公斤,是普通自行車重量的2倍。)


于是,為了改善用戶體驗(yàn)(看,基于用戶反饋。又是用戶研究。),第二代摩拜單車在確保安全和耐用的前提下對(duì)每個(gè)零件減重,整車僅重 15.5kg。比于第一代單車「減重」了約 10 公斤。


這還僅僅是車身重量,其他各方面,輪胎,鎖,鏈條,車座等等,全部做了優(yōu)化改進(jìn)。此處不再延申討論。

 

 


回到做WEB或者APP的設(shè)計(jì)上。


中國(guó)的互聯(lián)網(wǎng)行業(yè)并不羞于抄襲對(duì)手,現(xiàn)在產(chǎn)品同質(zhì)化這么嚴(yán)重,靠單純的產(chǎn)品創(chuàng)意早已經(jīng)無(wú)法取勝了。


現(xiàn)在產(chǎn)品更多的核心優(yōu)勢(shì)是ABC——人工智能(AI)、大數(shù)據(jù)(BIG DATA)和云計(jì)算(CLOUD)。我們頂尖的算法工程師們(Data Scientist)好不容易對(duì)數(shù)據(jù)做了識(shí)別、分析和精準(zhǔn)有效的輸出。


結(jié)果在交互這一環(huán)沒(méi)做好,用戶找不到,看不懂,不會(huì)用這些產(chǎn)品/內(nèi)容。你做設(shè)計(jì)的良心會(huì)不會(huì)痛?


 

六.用戶體驗(yàn)設(shè)計(jì)就是需要“以用戶為中心”(user-centered)而設(shè)計(jì)


不要拍腦袋決定,不要自己YY。

不然只能設(shè)計(jì)出一個(gè)你自己想要的,或者是你老板想要的產(chǎn)品。

 

舉個(gè)反面案例:生活中的例子,廁所標(biāo)識(shí)。

 

用戶體驗(yàn)—— 正常

這張圖,好理解吧,廁所標(biāo)志。就算右邊那個(gè)清朝的個(gè)性了點(diǎn),那也是設(shè)計(jì)得不錯(cuò),能看懂。


 

用戶體驗(yàn)—— 差

這張圖,額。雞?讓我想想,哪個(gè)是公雞,哪個(gè)是母雞?只要我努力辨認(rèn),我還是有機(jī)會(huì)成功上廁所的。


 

用戶體驗(yàn)—— 極品差

這就是設(shè)計(jì)師自己YY的結(jié)果。


這張圖,這都是什么玩意兒?大象?長(zhǎng)頸鹿?什么意思?設(shè)計(jì)師,你給我出來(lái),你信不信我打不死你?


這樣的廁所標(biāo)志,我猜都猜不出來(lái),我只能跑到廁所門口張望,當(dāng)個(gè)女流氓,看看廁所里的坑位是什么樣的,我才有指望上廁所。

 

好了,那位設(shè)計(jì)師現(xiàn)身說(shuō)法了,他的靈感源于動(dòng)物習(xí)慣,大家弄不清楚的原因是他們不了解動(dòng)物的具體習(xí)性。


長(zhǎng)頸鹿在噓噓時(shí)會(huì)張開(kāi)雙腿,這標(biāo)志著女廁所,而大象則用象鼻噴水,這標(biāo)志著男廁所。他的靈感在大部分人看來(lái)太牽強(qiáng),因?yàn)橐话闳藢?duì)于這些動(dòng)物習(xí)慣一無(wú)所知,用大象和長(zhǎng)頸鹿來(lái)分辨廁所之間的區(qū)別是不是很無(wú)語(yǔ)?


這設(shè)計(jì)師就光顧自己玩創(chuàng)意了,自己YY。廁所是為了給大家?guī)?lái)方便的,好的設(shè)計(jì)創(chuàng)意是一回事,但最大的問(wèn)題也是要方便眾人使用的。

 



舉個(gè)正面案例:APP的例子, AR(增強(qiáng)現(xiàn)實(shí))。


現(xiàn)在AR技術(shù)已經(jīng)相對(duì)成熟了,導(dǎo)航,家居,翻譯,試妝,試鞋,地球儀都有AR。

 

拿AR試鞋舉例子。

Before: N年前,AR試鞋還是把鞋子投到地面上,看個(gè)大致效果。(左側(cè)Before截圖大概是我3年前截的)

Now: 現(xiàn)在,AR技術(shù)做強(qiáng)了,AR試鞋就直接投到腳上,能夠看到鞋子上腳的效果。對(duì)用戶而言,體驗(yàn)更好。對(duì)商家而言,轉(zhuǎn)化率會(huì)更高。

 

好了,用戶體驗(yàn)就講到這了,是不是很輕松,看看故事就有些體會(huì)了?


 

最后,

今年是喬幫主逝世10周年,緬懷下!原來(lái),他已經(jīng)離開(kāi)這么久了。

 

I skate to where the puck is going to be, not where it has been. 

- Wayne Douglas Gretzky

這句話簡(jiǎn)單來(lái)說(shuō),就是預(yù)判形勢(shì),提前準(zhǔn)備。

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

文章來(lái)源:站酷  作者:Lu傾傾
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



B端產(chǎn)品界面高屏效初探

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

背景

在 B 端設(shè)計(jì)領(lǐng)域中,不管是內(nèi)部用戶、產(chǎn)品、設(shè)計(jì)師、開(kāi)發(fā),還是外部產(chǎn)品、設(shè)計(jì)師等,總能聽(tīng)到關(guān)于界面「屏效」方面的訴求或吐槽。


undefined


「屏效」狹義理解是「界面過(guò)度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產(chǎn)出多少營(yíng)業(yè)額(營(yíng)業(yè)額/專柜所占總坪數(shù))。而「屏效」對(duì)于界面而言可以指屏幕單位時(shí)間、單位面積內(nèi)的信息可以帶來(lái)多少商業(yè)效益/效率提升。


為了探索在 B 端產(chǎn)品中用戶為何對(duì)「界面過(guò)度留白」或「屏效」問(wèn)題如此敏感,于是我們展開(kāi)了「屏效」專題的設(shè)計(jì)探索與實(shí)踐。「屏效」專題探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開(kāi),將實(shí)踐過(guò)程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊(cè),同步將部分功能進(jìn)行工程化,確??梢蚤_(kāi)箱即用。


undefined


探索階段-為誰(shuí)在何時(shí)何地設(shè)計(jì)

用戶聲音|不同的故事相似的訴求

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求》《中后臺(tái)產(chǎn)品滿意度調(diào)研》問(wèn)卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計(jì)師占 58.14%;認(rèn)為提升屏效對(duì)體驗(yàn)有提升的終端用戶占 50.6%。


undefined


外部知乎上針對(duì)《Ant Design 4.0 設(shè)計(jì)價(jià)值觀》的 13 條反饋里,其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。


undefined


通過(guò)了解不同用戶和產(chǎn)品類型發(fā)現(xiàn),不同的用戶在工作場(chǎng)景的產(chǎn)品使用中有著相似的特征:


undefined



案例收集|發(fā)現(xiàn)問(wèn)題,大膽假設(shè)

縱觀 B 端產(chǎn)品界面,發(fā)現(xiàn)普遍問(wèn)題和收錄在解決屏效問(wèn)題上實(shí)踐得比較好的案例,為了逐步突破問(wèn)題,選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計(jì)切入點(diǎn),通過(guò)線上跨產(chǎn)品多端地毯式的體驗(yàn)走查,發(fā)現(xiàn)表格三個(gè)層次的問(wèn)題:


undefined


視覺(jué)、交互層在無(wú)需理解業(yè)務(wù)場(chǎng)景和用戶目標(biāo)的情況下,都較容易發(fā)現(xiàn),屬基礎(chǔ)問(wèn)題,但很多「過(guò)度留白」的屏效問(wèn)題往往是信息被組織方式的差異導(dǎo)致的「過(guò)度留白」。

綜上我們提出假設(shè):為提高屏效,可從視覺(jué)、交互、信息三個(gè)層次解決

視覺(jué)層為提高信息查閱速度,可以通過(guò)提高信息密度;交互層為提高操作速度,可以縮短當(dāng)前手勢(shì)到目標(biāo)之間的距離;信息層為提高信息被理解的速度,可以通過(guò)重組織等方式。

基于假設(shè),我們進(jìn)行了進(jìn)一步的桌面研究,查閱論文等書籍,尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。


競(jìng)品分析|尋找實(shí)踐證據(jù),謹(jǐn)慎驗(yàn)證

我們知道視覺(jué)上界面留白過(guò)多(過(guò)疏會(huì)增加滾屏成本,過(guò)密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號(hào)、字高和行高的關(guān)系,因?yàn)椴煌煮w的同字號(hào)實(shí)際像素高度會(huì)有差異,因此選擇的是字高(即文字垂直高度的視覺(jué)大?。┒亲痔?hào)或字行高,決定留白的兩個(gè)重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關(guān)系,探究在視覺(jué)層怎樣的留白率能保證甚至提升屏效。


undefined


以數(shù)據(jù)產(chǎn)品中的表格為例,通過(guò)直接和間接競(jìng)對(duì)的方式,分別從數(shù)據(jù)的查閱(視覺(jué))、分析(交互)維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對(duì),來(lái)看看優(yōu)秀產(chǎn)品是如何解決屏效問(wèn)題。

直接競(jìng)對(duì):內(nèi)部用戶口碑較好的產(chǎn)品 A、B外界競(jìng)對(duì):同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格;間接競(jìng)對(duì):谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表(一維表格)


undefined


通過(guò)競(jìng)品分析可以發(fā)現(xiàn),數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù),而谷歌郵箱等工作臺(tái)常用的常規(guī)列表緊湊版本中,留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。


緊湊版的使用場(chǎng)景也常常是面對(duì)數(shù)據(jù)量巨大的信息呈現(xiàn),通過(guò)切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數(shù)據(jù)分析場(chǎng)景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大,而在實(shí)際案例實(shí)踐中,也已經(jīng)將表格行高優(yōu)化至 30px,克制的使用留白。


除此外,競(jìng)品其他層次的設(shè)計(jì)也做了比對(duì),總結(jié)來(lái)看整體設(shè)計(jì)做法:高密度、少屏數(shù)、少留白等。


文字陷阱:中英文字高不等于字號(hào)


舉個(gè)容易犯錯(cuò)的競(jìng)品參考是,谷歌在緊湊版主題下字號(hào) 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會(huì)發(fā)現(xiàn)非常擁擠,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字體,實(shí)際字高只有 10px,而 AntD Table 的語(yǔ)境是中文字偏多,實(shí)際字高有 12px,所以留白的差異在于一個(gè)是 18px(28-10),一個(gè)是 16px(28-12),這也是為什么決定決定留白的兩個(gè)重要因子是「字高」和表格行高,而非「字號(hào)」和表格行高,進(jìn)一步推演,決定界面留白的是「元素視覺(jué)高度」和「元素間距」。


論文查閱|尋找理論證據(jù),謹(jǐn)慎驗(yàn)證

研究表明,低密度認(rèn)知負(fù)荷低,但高密度任務(wù)完成率高,用戶更喜好

參考資料:論文《基于眼動(dòng)的網(wǎng)頁(yè)對(duì)稱性和復(fù)雜度對(duì)用戶認(rèn)知的影響的研究》

對(duì)于信息,用戶需要需要閱讀(視覺(jué)),思考和理解(認(rèn)知),需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字(行動(dòng)),在人機(jī)工程學(xué)中,統(tǒng)稱為負(fù)荷。即認(rèn)知(記憶)負(fù)荷、視覺(jué)負(fù)荷、動(dòng)作負(fù)荷,即分別對(duì)應(yīng)用戶體驗(yàn)設(shè)計(jì)的三個(gè)層級(jí),信息/視覺(jué)/交互。而負(fù)荷所花費(fèi)資源從多到少依次為:認(rèn)知 > 視覺(jué) > 行動(dòng)。


認(rèn)知負(fù)荷,舉個(gè)例子,看了但不一定懂了。你是否有這么一種體驗(yàn)——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學(xué)視頻,即使就短短十來(lái)分鐘(信息密度大,輸出效率高),但是卻要看上半天。因?yàn)樗⒍桃曨l時(shí),你的輸入效率遠(yuǎn)高于作者的輸出效率,而看一門 C4D 教學(xué)視頻時(shí),你的輸入效率遠(yuǎn)低于作者的輸出效率??墒?,輸出效率是客觀的,輸入效率是主觀的。如果輸出效率很高,你可以通過(guò)提高自己的輸入效率(比如讓自己成為 C4D 專家)來(lái)跟上作者,從而變強(qiáng);否則輸出效率很低(信息質(zhì)量低),你的輸入效率很高(很專業(yè)),信息于你而言都是無(wú)效的。


假設(shè)負(fù)荷總量不變的情況下,那么以上三類場(chǎng)景界面需要對(duì)用戶負(fù)擔(dān)分配大致如下,官網(wǎng)品宣類需要低認(rèn)知成本,低視覺(jué)負(fù)擔(dān),視覺(jué)要求高,用戶才會(huì)被吸引過(guò)來(lái)閱讀,甚至酷炫的交互更能增加互動(dòng)體驗(yàn)而帶來(lái)的趣味感,比如蘋果官網(wǎng),信息量極少、圖版率高帶來(lái)極具藝術(shù)的視覺(jué)體驗(yàn)、進(jìn)而吸引用戶愿意跟隨屏幕滾動(dòng)漸進(jìn)式接受信息,而 B 端應(yīng)用因?yàn)槭菍I(yè)使用,首先認(rèn)知方面隨著員工的專業(yè)度提高而降低,因此可以通過(guò)提高視覺(jué)負(fù)擔(dān),來(lái)降低行動(dòng)負(fù)擔(dān),進(jìn)而減少操作用時(shí),當(dāng)然最佳情況是三個(gè)維度能整體降低負(fù)擔(dān),讓總負(fù)擔(dān)降低,就需要更多設(shè)計(jì)巧思了。


undefined


面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中,設(shè)計(jì)師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺(jué)層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。


undefined



實(shí)踐階段-如何設(shè)計(jì)

通過(guò)以上的探索,我們可以確定的是,B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計(jì)中,提高屏效可從視覺(jué)、交互、信息三個(gè)層次進(jìn)行,視覺(jué)層-高密度,即提高屏幕信息密度;交互層-低跳轉(zhuǎn),通過(guò)減少頁(yè)面跳轉(zhuǎn)、手勢(shì)與常用操作的距離等;信息層-有效性,通過(guò)重組織或輔助信息幫助用戶理解,甚至提供幫助手冊(cè)等以提高用戶專業(yè)能力。


undefined


基于以上的總結(jié),對(duì)產(chǎn)品進(jìn)行優(yōu)化。下面以一個(gè)簡(jiǎn)單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營(yíng)同學(xué)想對(duì)比 A、B 兩不同人群在相同維度(白領(lǐng)-有信用卡)下的人數(shù)差異,尋找運(yùn)營(yíng)機(jī)會(huì)點(diǎn)。


如下表格經(jīng)過(guò)高屏效策略優(yōu)化前后對(duì)比圖,優(yōu)化前相同維度下不同人群數(shù)量的對(duì)比需要視線來(lái)回跳動(dòng)比對(duì),而優(yōu)化后的表格內(nèi)容,更符合用戶看差異場(chǎng)景下分析目的數(shù)據(jù)查閱,視線鎖定相同維度,即可快速比對(duì)數(shù)值大小。


undefined


下面以視覺(jué)、交互、信息三個(gè)層次解剖設(shè)計(jì)過(guò)程背后的思考。


視覺(jué)層|高密度-克制的留白

眼動(dòng)理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 30度,垂直最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 55度。可得出人眼最小識(shí)別范圍 12px,水平視野舒適眼動(dòng)寬 1200px,垂直視野舒適眼動(dòng)高 2200px。參考資料:論文《基于眼動(dòng)交互的用戶界面設(shè)計(jì)與研究》


undefined


如圖,縮小表格行高的同時(shí),目標(biāo)信息之間的眼動(dòng)距離隨之縮短,在眼動(dòng)舒適區(qū)內(nèi)看到更多信息,便于信息的高效獲取。


undefined



交互層|低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ):菲茨定律是用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型,它由保羅·菲茨在1954年首先提出。這個(gè)模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離、目標(biāo)的大小、移動(dòng)的最短時(shí)間。三者之間關(guān)系公式為:T=a+blog2(D/W+1),W為其中目標(biāo)的大??;D為到目標(biāo)的距離;T為移動(dòng)到目標(biāo)所用最短時(shí)間。參考資料:菲茲定律


undefined


表格單元格借助交互狀態(tài),增加懸浮出現(xiàn)的信息組件,前置顯示目標(biāo)單元格明細(xì)信息,同時(shí)通過(guò)交互出現(xiàn)的指示器輔助行列信息的獲取,高頻操作考慮手勢(shì)位置放置,縮短與操作目標(biāo)的距離,以提高整體操作效率。


undefined



信息層|有效性-信息重組織

理論基礎(chǔ):交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料:《簡(jiǎn)約至上》


undefined


用戶為了對(duì)比 A、B 兩不同人群在相同維度(白領(lǐng)-有信用卡)下的人數(shù)差異,但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動(dòng)條來(lái)查看,根據(jù)用戶目標(biāo),將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列(即將要對(duì)比的人群放置列頭),即可快速查閱,減少眼跳距離。


undefined


結(jié)語(yǔ)

設(shè)計(jì)趨勢(shì)中常見(jiàn)的大字體大留白界面,但在 B 端場(chǎng)景中,面對(duì)緊張的工作節(jié)奏,時(shí)間和注意力變得尤為可貴,相對(duì)而言,基于復(fù)雜度守恒定律, B 端信息量大且高頻訪問(wèn)的產(chǎn)品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時(shí)間」,少一次點(diǎn)擊,少一次跳轉(zhuǎn),少一份等待,就多一份時(shí)間和效率。

文章來(lái)源:站酷  作者:An t_design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



從體驗(yàn)層面出發(fā),分析App搜索框設(shè)計(jì)的要點(diǎn)

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

搜索動(dòng)作在App中依靠搜索框來(lái)完成,好用的搜索框很大程度上決定了產(chǎn)品的搜索體驗(yàn)如何。大多數(shù)搜索框存在相似性,但真正好的搜索框會(huì)在細(xì)節(jié)上為用戶帶來(lái)差異化的反饋,帶來(lái)很暖很貼心的感覺(jué)。


1、搜索框結(jié)構(gòu)分析 

從體驗(yàn)層面上看,一個(gè)良好的用戶體驗(yàn)需要具備完整的流程。搜索框的使用流程可以簡(jiǎn)單劃分為:

使用前-找到搜索框入口;使用中-點(diǎn)擊輸入內(nèi)容;使用后-展示搜索結(jié)果。

其中使用中會(huì)涉及到跳轉(zhuǎn)和輸入兩種不同的狀態(tài),在下面的文章里我會(huì)展開(kāi)來(lái)分析。


2、搜索框的常見(jiàn)類型 

回想常用App的搜索框,好像它們的樣式看起來(lái)差別并不是很大,但其實(shí)每個(gè)搜索框的細(xì)節(jié)都是經(jīng)過(guò)精心設(shè)計(jì)的,下面總結(jié)了幾種常見(jiàn)的搜索框類型。

搜索圖標(biāo)

頁(yè)面上只提供一個(gè)放大鏡圖標(biāo),通常需要用戶點(diǎn)擊圖標(biāo)后才能跳轉(zhuǎn)到搜索頁(yè)面,例如小紅書就將搜索圖標(biāo)放置在頁(yè)面右上角。

基本搜索框

基本的搜索框組成包括放大鏡圖標(biāo)、文字提示、輸入框三部分。微信主頁(yè)的搜索框采用了這種基本形式,文字提示為搜索,簡(jiǎn)潔清晰。

文字提示類搜索框

和基本搜索框的唯一不同的地方在于,這類搜索框中的文字提示部分不再是搜索兩個(gè)字,而是根據(jù)產(chǎn)品需求支持預(yù)置多組文字提示并在搜索框內(nèi)循環(huán)展示。

▲ 在大眾點(diǎn)評(píng)的頂部搜索框中,文字提示部分循環(huán)展示了三組不同的內(nèi)容,引導(dǎo)用戶快速檢索到好吃和好玩的。

功能類搜索框

之所以叫做功能類搜索框,是在文字提示類搜索框的基礎(chǔ)上根據(jù)產(chǎn)品功能的需要額外添加了常用的功能性圖標(biāo),如掃碼圖標(biāo)、拍照?qǐng)D標(biāo)、語(yǔ)音圖標(biāo)等,賦予搜索框更多的功能屬性。

▲ 經(jīng)常使用豆瓣看書評(píng)的同學(xué)可能會(huì)注意到豆瓣主頁(yè)的搜索框中有一個(gè)掃碼圖標(biāo),點(diǎn)擊之后可以快速掃描圖書條碼或二維碼,快速識(shí)別書的內(nèi)容,省去檢索的麻煩。

▲ 淘寶搜索框的組成更復(fù)雜,除了支持掃碼外還有相機(jī)圖標(biāo),方便用戶拍照識(shí)別商品。 


3、搜索框設(shè)計(jì)狀態(tài)分析 

使用搜索框搜索的過(guò)程總體可以分為四部分:搜索前、點(diǎn)擊搜索框、輸入中、搜索后。設(shè)計(jì)分析過(guò)程中我們要先理清整體的搜索流程,再考慮每個(gè)狀態(tài)對(duì)應(yīng)的交互細(xì)節(jié)及反饋,這樣才能保持邏輯清晰。

搜索前-默認(rèn)狀態(tài)

位置

大多數(shù)搜索框出現(xiàn)在頁(yè)面頂部,作為一個(gè)大的觸摸目標(biāo)更符合用戶的認(rèn)知習(xí)慣,更容易被用戶發(fā)現(xiàn)和使用。

▲ 在蘋果自帶的地圖應(yīng)用中,搜索框放在頁(yè)面中部偏下的位置,相比于頂部搜索框,這樣的位置分布更方便用戶單手操作。

樣式

搜索前的狀態(tài)除了前面講的幾種常見(jiàn)的搜索框樣式外,有些產(chǎn)品會(huì)直接在搜索框增加“搜索”按鈕。

▲ 阿里系產(chǎn)品包括淘寶、支付寶、閑魚(yú)等主頁(yè)搜索框都額外添加了“搜索”按鈕,相比于點(diǎn)擊搜索框再點(diǎn)擊鍵盤搜索內(nèi)容推薦,直接點(diǎn)擊按鈕簡(jiǎn)化了搜索流程。

點(diǎn)擊后-獲取焦點(diǎn)

搜索框

點(diǎn)擊搜索框后,框內(nèi)的放大鏡圖標(biāo)會(huì)消失,出現(xiàn)閃爍的光標(biāo)引導(dǎo)用戶輸入,搜索框右側(cè)會(huì)出現(xiàn)“取消”按鈕。

▲ 點(diǎn)擊大眾點(diǎn)評(píng)的搜索框后,搜索頁(yè)會(huì)出現(xiàn)三個(gè)選項(xiàng),點(diǎn)擊每一個(gè)選項(xiàng),搜索框內(nèi)的文字提示都會(huì)改變,有效幫助用戶提升搜索準(zhǔn)確度,雖然是很小的點(diǎn)但做的很用心。

鍵盤

點(diǎn)擊搜索框后會(huì)彈起鍵盤,在不輸入內(nèi)容的情況下,點(diǎn)擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內(nèi)容。

搜索頁(yè)

搜索頁(yè)的內(nèi)容通常包括歷史搜索、搜索發(fā)現(xiàn)、熱門推薦等版塊,記錄用戶的搜索行為,推薦目標(biāo)商品或服務(wù),提高轉(zhuǎn)化率。

▲ 豆瓣將最熱門的內(nèi)容都展現(xiàn)在搜索頁(yè)中,包括實(shí)時(shí)更新的熱門書影音榜單、熱門小組、熱門話題等,為用戶提供有效的引導(dǎo)。

關(guān)于歷史搜索我們還可以繼續(xù)深入分析,思考這些記錄怎么排序、最多顯示幾條記錄……

▲ 網(wǎng)易云音樂(lè)的歷史搜索最多可以保留10條,采用橫向滑動(dòng)的手勢(shì)交互可以節(jié)省屏幕空間。根據(jù)內(nèi)容長(zhǎng)短一屏一次可以顯示2-3條記錄,這會(huì)導(dǎo)致排在后面的歷史記錄不容易被用戶快速發(fā)現(xiàn)。

▲ 淘寶的歷史搜索可以容納更多的數(shù)量,當(dāng)搜索記錄超過(guò)兩行時(shí)會(huì)有一個(gè)小的展開(kāi)按鈕,點(diǎn)擊按鈕可以查看早期的記錄,這樣既能節(jié)省屏幕空間也能最大化容納歷史記錄。

搜索中-輸入內(nèi)容

刪除/取消

當(dāng)開(kāi)始輸入內(nèi)容時(shí),在搜索框的右側(cè)會(huì)出現(xiàn)刪除圖標(biāo),方便用戶一鍵刪除輸入的內(nèi)容,這里要注意區(qū)分刪除和取消的區(qū)別。

▲ 在淘寶中點(diǎn)擊“刪除”圖標(biāo),頁(yè)面會(huì)返回到上一級(jí)也就是搜索頁(yè);

▲ 點(diǎn)擊“取消”按鈕,頁(yè)面會(huì)直接返回到主頁(yè)也就是搜索前的狀態(tài)。

搜索提示

在用戶輸入內(nèi)容時(shí),產(chǎn)品會(huì)根據(jù)用戶輸入的內(nèi)容提供相對(duì)應(yīng)的搜索推薦,這是搜索框的必備的交互反饋。

通過(guò)合理的詞條推薦能極大降低用戶的思考時(shí)間,提高搜索效率,同時(shí)省去再次點(diǎn)擊搜索按鈕的流程,降低用戶的操作步驟。

字?jǐn)?shù)限制

目前我所知道的大多數(shù)App在搜索時(shí)都沒(méi)有字?jǐn)?shù)限制問(wèn)題。

回顧一下搜索使用場(chǎng)景會(huì)發(fā)現(xiàn)用戶在搜索框內(nèi)輸入任何內(nèi)容都是有可能的,盡量不要約束用戶的輸入內(nèi)容。無(wú)論用戶輸入多少內(nèi)容,點(diǎn)擊都可以完成基本的搜索操作,這樣整個(gè)流程才完整。

▲ 在百度中輸入過(guò)多字符時(shí),會(huì)提示查詢限制在38個(gè)漢字以內(nèi),多的字符會(huì)被忽略,雖然給出了提示但并未打斷用戶的操作流程,可以讓用戶繼續(xù)完成搜索。

搜索后-展示結(jié)果

符合預(yù)期

搜索的理想狀態(tài)是搜索到的結(jié)果符合用戶的預(yù)期,滿足用戶的搜索需求,并把最吻合的搜索結(jié)果排在前面,為用戶帶來(lái)清晰的結(jié)果展示。

智能提示

智能提示是對(duì)用戶輸入內(nèi)容上的一種提示或糾正,如果用戶輸入的內(nèi)容有問(wèn)題或不夠標(biāo)準(zhǔn),在搜索結(jié)果中會(huì)能給最貼切的搜索結(jié)果。

▲ 在淘寶中輸入“shouji”或“souji”,淘寶會(huì)根據(jù)拼音給出“手機(jī)”的搜索結(jié)果,但仍保留原標(biāo)簽,方便用戶再次點(diǎn)擊搜索;輸入“手ji”時(shí),會(huì)直接給出“手機(jī)”標(biāo)簽,這種差異化的反饋能更好的為用戶服務(wù)。

無(wú)結(jié)果提示

如果沒(méi)有搜索到用戶輸入的內(nèi)容,搜索頁(yè)會(huì)顯示一個(gè)空狀態(tài),提示用戶沒(méi)有搜索結(jié)果。關(guān)于空狀態(tài)如何設(shè)計(jì)可以看我之前寫的一篇文章——如何做好「空狀態(tài)」設(shè)計(jì)?來(lái)看資深設(shè)計(jì)師的總結(jié)!詳細(xì)分析了空狀態(tài)的設(shè)計(jì)方法。

▲ 相比于直接顯示搜索無(wú)結(jié)果的狀態(tài),拼多多的搜索結(jié)果首先會(huì)標(biāo)明相關(guān)商品較少,然后將搜索內(nèi)容拆分成不同的標(biāo)簽進(jìn)一步引導(dǎo)用戶來(lái)發(fā)現(xiàn)內(nèi)容。

文章來(lái)源:站酷  作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

掌握這20條用戶體驗(yàn)設(shè)計(jì)原則,助力設(shè)計(jì)成長(zhǎng)!

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

文章整理了20條用戶體驗(yàn)設(shè)計(jì)原則,希望通過(guò)這份簡(jiǎn)潔易懂的合集能夠讓你對(duì)用戶體驗(yàn)領(lǐng)域有一個(gè)初步的概覽和了解。

1.以用戶為中心 

這是最常被提及的用戶體驗(yàn)設(shè)計(jì)基礎(chǔ),當(dāng)涉及到產(chǎn)品設(shè)計(jì)決策時(shí),提醒我們要學(xué)會(huì)使用同理心,而不是僅憑個(gè)人的想法或意見(jiàn)。

真正好的用戶體驗(yàn)設(shè)計(jì)是為用戶量身打造的,用戶的意見(jiàn)、痛點(diǎn)、愿望、偏好和需求對(duì)產(chǎn)品來(lái)說(shuō)至關(guān)重要,所以在項(xiàng)目初始階段需要投入大量的時(shí)間和精力去了解用戶。

用戶體驗(yàn)研究重點(diǎn)是了解用戶,為接下來(lái)的產(chǎn)品設(shè)計(jì)做準(zhǔn)備。以用戶為中心的設(shè)計(jì)理念是設(shè)計(jì)師迎合用戶的需求,區(qū)分了設(shè)計(jì)任何人都可以使用的產(chǎn)品和為目標(biāo)用戶設(shè)計(jì)的產(chǎn)品。


一款特定的產(chǎn)品需要面對(duì)不同的目標(biāo)群體,前期研究中需要了解目標(biāo)人群需要什么并在產(chǎn)品中反映出來(lái),這是針對(duì)性很強(qiáng)的設(shè)計(jì)研究。 


2.了解信息架構(gòu)

可能很多人對(duì)信息架構(gòu)的定義很模糊,這里舉個(gè)例子來(lái)具象說(shuō)明一下信息架構(gòu)的含義。

例如在一款產(chǎn)品中,如果把所有內(nèi)容都堆到一個(gè)列表或頁(yè)面中,可能我們將無(wú)法使用這款產(chǎn)品,所以我們看到大多數(shù)的App和網(wǎng)站都包含很多的導(dǎo)航和頁(yè)面結(jié)構(gòu),按照內(nèi)容重要程度有序地來(lái)組織內(nèi)容。

信息體系結(jié)構(gòu)的最終目標(biāo)是幫助用戶理解他們?cè)诳词裁矗椭麄冋业叫枰獙ふ业膬?nèi)容。

信息架構(gòu)在制作線框圖或原型之前完成,因?yàn)樗钱a(chǎn)品的基礎(chǔ),有助于設(shè)計(jì)師考慮什么功能是最重要的,哪些是用戶最需要的以及哪些次要內(nèi)容可以隱藏起來(lái)等。

這種結(jié)構(gòu)與產(chǎn)品的導(dǎo)航設(shè)計(jì)密切相關(guān),有助于將用戶引導(dǎo)到正確的位置。導(dǎo)航和信息架構(gòu)都試圖讓用戶以最少的認(rèn)知努力來(lái)完成操作。


信息架構(gòu)的設(shè)計(jì)不當(dāng)會(huì)造成重大故障甚至可能危及整個(gè)產(chǎn)品。如果用戶在使用產(chǎn)品時(shí)找不到任何想要的內(nèi)容,點(diǎn)擊任何元素都沒(méi)有反應(yīng),會(huì)給用戶帶來(lái)很糟糕的使用體驗(yàn)。 


3.考慮使用場(chǎng)景

沒(méi)有場(chǎng)景,任何設(shè)計(jì)都很難生效。設(shè)計(jì)師在項(xiàng)目開(kāi)始時(shí)會(huì)投入時(shí)間去了解用戶面臨的問(wèn)題以及圍繞這些問(wèn)題的背景。


這條原則有助于設(shè)計(jì)師考慮還有哪些因素會(huì)影響用戶和產(chǎn)品,很多產(chǎn)品設(shè)計(jì)會(huì)為用戶提供一些有助于消除使用摩擦的操作提示。 
例如在設(shè)計(jì)表單時(shí),會(huì)盡可能的添加 輸入提示,最大程度地減少用戶出錯(cuò)的機(jī)會(huì)。 


4.了解一致性及其重要性

保持一致性是用戶體驗(yàn)設(shè)計(jì)的關(guān)鍵原則。擁有一致設(shè)計(jì)的產(chǎn)品可以更快地被新用戶接受,因?yàn)橛脩舨恍枰俅螌W(xué)習(xí)如何操作,他們會(huì)回憶起之前的操作習(xí)慣并將其作為指導(dǎo),這也解釋了為什么同類型的產(chǎn)品例如電商類App頁(yè)面設(shè)計(jì)的很相似。

保持一致意味著在需要時(shí)可以重復(fù)使用某些UI組件,并在整個(gè)產(chǎn)品中保持一致的行為。例如當(dāng)點(diǎn)擊或懸停在按鈕上面時(shí),所以按鈕的狀態(tài)應(yīng)該是一致的。


從邏輯上講,產(chǎn)品越大,這種一致性會(huì)變得越來(lái)越有挑戰(zhàn)性,這促使許多設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建自己的設(shè)計(jì)系統(tǒng)。一款產(chǎn)品的學(xué)習(xí)曲線越長(zhǎng)越陡,放棄的用戶就會(huì)越多,在市場(chǎng)營(yíng)銷中,這通常被稱為銷售漏斗中的漏洞。 


5.給予用戶適當(dāng)?shù)目刂茩?quán)

這條原則意味著用戶希望能控制產(chǎn)品,無(wú)論是完成任務(wù)還是定制滿足他們需求的內(nèi)容。

在設(shè)計(jì)過(guò)程中一直試圖給用戶盡可能多的控制權(quán),例如允許用戶撤消操作、更改設(shè)置、自定義UI外觀、創(chuàng)建快捷方式等中。


需要注意的是,當(dāng)提供太多選項(xiàng)或用戶太依賴于自己的選擇時(shí),用戶可能會(huì)不知所措,造成所謂的 選擇悖論。所以在設(shè)計(jì)時(shí)要了解用戶樂(lè)于掌控的余地,不能讓用戶感到使用壓力。 


6.把可用性放在首位

在整體上看,建立高標(biāo)準(zhǔn)的可用性是為用戶做的最好的事情,有助于檢查用戶是否能夠輕松地完成任務(wù)、產(chǎn)品是否正常運(yùn)行以及是否完成工作。


可用性的重要之處在于要理解可用性的靈活性和重要性。 


7.了解用戶測(cè)試

結(jié)合可用性的概念,我們還要進(jìn)行用戶測(cè)試,這是設(shè)計(jì)師對(duì)工作進(jìn)行測(cè)試的方式,對(duì)新的產(chǎn)品來(lái)說(shuō)至關(guān)重要。

當(dāng)設(shè)計(jì)思想和理念被轉(zhuǎn)化為有形的原型時(shí),設(shè)計(jì)師要觀察真實(shí)的用戶是如何與之交互的,可以通過(guò)許多不同的方式例如簡(jiǎn)單的A/B測(cè)試到全面的審核測(cè)試等來(lái)實(shí)現(xiàn)。


測(cè)試通常分幾輪進(jìn)行,團(tuán)隊(duì)在向原型添加更多細(xì)節(jié)之前驗(yàn)證每個(gè)步驟。隨著測(cè)試結(jié)果的出現(xiàn),設(shè)計(jì)也隨之發(fā)生了變化。 
如果發(fā)生更改,將會(huì)進(jìn)行新一輪的測(cè)試,通過(guò)這個(gè)過(guò)程,設(shè)計(jì)團(tuán)隊(duì)可以改進(jìn)他們的工作,直到達(dá)到可用性標(biāo)準(zhǔn)。 


8.少即是多

在創(chuàng)造力和創(chuàng)造獨(dú)特事物的渴望中,很多設(shè)計(jì)師很容易無(wú)意中弄亂產(chǎn)品界面甚至產(chǎn)品本身。

功能過(guò)多的產(chǎn)品可能會(huì)失去焦點(diǎn)并削弱吸引力。具有太多元素的頁(yè)面會(huì)變得充滿視覺(jué)沖擊,但也會(huì)給用戶帶來(lái)負(fù)面體驗(yàn),在設(shè)計(jì)時(shí)要學(xué)會(huì)克制并優(yōu)先考慮真正關(guān)鍵的部分很重要。


另外手機(jī)端的屏幕空間非常小,創(chuàng)建一個(gè)有效的布局,想出巧妙的方法來(lái)隱藏次要元素并創(chuàng)建一個(gè)令人愉悅的界面需要付出很大的努力和創(chuàng)造力。 


9.視覺(jué)層次

視覺(jué)層次是向用戶傳達(dá)產(chǎn)品中元素重要性的方式。良好的層次結(jié)構(gòu)有助于用戶視線在界面上移動(dòng),并立即了解最重要的內(nèi)容以及這些內(nèi)容與其他部分的關(guān)系。

視覺(jué)層次結(jié)構(gòu)與布局設(shè)計(jì)緊密相連,幫助用戶消化所接觸到的信息。


創(chuàng)建層次結(jié)構(gòu)從概念的草圖開(kāi)始,一直持續(xù)到完成設(shè)計(jì)。例如發(fā)送按鈕通常會(huì)用綠色而是不紅色,而次要按鈕會(huì)顯示為灰色或與背景混合,并顯示“撤消”或“返回”。 


10.了解用戶的心智模型

為用戶創(chuàng)建心智模型是嘗試使用同理心的一種方式,是幫助設(shè)計(jì)師從用戶的角度看待問(wèn)題的工具。

正確使用意味著用戶無(wú)需投入精力就可以使用的直觀產(chǎn)品,而錯(cuò)誤的思維模型會(huì)導(dǎo)致一些問(wèn)題,例如界面混亂、高昂的交互成本。


為了匹配用戶的心智模型,可以采用多種不同類型的研究方法,常見(jiàn)的方法包括 卡片分類、決策樹(shù)、對(duì)用戶行為的密切觀察,或者使用大量的數(shù)據(jù)來(lái)建立關(guān)鍵用戶的心理模型。 


11.設(shè)計(jì)中的講故事

講故事的方式更加直觀,利用圖像、視頻、動(dòng)畫和文本等元素讓整個(gè)頁(yè)面與用戶對(duì)話。用戶體驗(yàn)設(shè)計(jì)中的視覺(jué)敘事是為了喚起用戶的情感,給用戶留下持久的印象。


想出一種可視化的方式來(lái)傳達(dá)復(fù)雜的內(nèi)容具有挑戰(zhàn)性,但同時(shí)也是有益的,可以更好地接近用戶并將其作為提高產(chǎn)品可學(xué)習(xí)性的方法。 


12.不要直接跳到高保真原型上

高保真原型是設(shè)計(jì)項(xiàng)目的最終目標(biāo),但是直接使用原型軟件不斷添加各種頁(yè)面細(xì)節(jié)是錯(cuò)誤的操作。


避免直接出高保真的主要原因是因?yàn)檫@樣做的成本會(huì)更高。在沒(méi)有任何用戶研究和測(cè)試的情況下,一款產(chǎn)品無(wú)論具有多少的細(xì)節(jié)都有可能面臨不符合用戶使用的情況。 


13.可訪問(wèn)性測(cè)試很重要

不僅要檢查關(guān)鍵用戶是否可以流暢地使用產(chǎn)品,還應(yīng)該檢查其他所有用戶例如少數(shù)群體等是否都能夠正常使用產(chǎn)品。


事實(shí)上,殘疾人和其他用戶一樣需要數(shù)字產(chǎn)品,但很多產(chǎn)品在設(shè)計(jì)時(shí)并沒(méi)有考慮到這些群體,但這也提供了一個(gè)機(jī)會(huì),為所有用戶提供一個(gè)可以依賴的好產(chǎn)品。 


14.熟悉并在用戶體驗(yàn)設(shè)計(jì)中使用

我們知道為用戶提供一致的設(shè)計(jì)有助于克服學(xué)習(xí)曲線,同時(shí)為用戶提供熟悉的東西也有助于縮短學(xué)習(xí)曲線。

例如,大多數(shù)用戶都會(huì)立即識(shí)別某些UI組件(漢堡菜單/單選按鈕),這意味著他們會(huì)本能地知道這些組件代表什么意思或者如何操作。

使用用戶已經(jīng)熟悉的東西并不一定會(huì)讓產(chǎn)品的獨(dú)特性消失,有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)利用這種熟悉性來(lái)來(lái)創(chuàng)造一些獨(dú)特的設(shè)計(jì),同時(shí)也是直觀的,不需要太多努力就可以使用。


設(shè)計(jì)一個(gè)完全不依賴熟悉度的產(chǎn)品可能是具有風(fēng)險(xiǎn)的行為,因?yàn)樗苋菀鬃屇切┎皇煜ぎa(chǎn)品的用戶超負(fù)荷,形成巨大的學(xué)習(xí)曲線,增加用戶負(fù)擔(dān)。 


15.了解交付成果的力量

可交付成果是可以在整個(gè)團(tuán)隊(duì)中交付的內(nèi)容,包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等,是一種有形和具體的表現(xiàn)。

可交付成果是用戶體驗(yàn)設(shè)計(jì)原則,可以幫助設(shè)計(jì)團(tuán)隊(duì)和其他利益相關(guān)者理解和交流概念。

▲ 用戶畫像可以捕捉理想用戶,并提供可以相關(guān)聯(lián)的真實(shí)面孔,是一種指導(dǎo)設(shè)計(jì)的工具。用戶旅程圖幫助設(shè)計(jì)師了解用戶完成任務(wù)需要的具體步驟,有助于確保這些步驟確實(shí)可以輕松執(zhí)行,并且整個(gè)過(guò)程很流暢。


這些交付成果服務(wù)于關(guān)鍵功能,設(shè)計(jì)師需要在整個(gè)項(xiàng)目中都依賴它們,不斷轉(zhuǎn)換為用戶可以與之交互的真實(shí)有形的設(shè)計(jì)。 


16.專業(yè)的原型設(shè)計(jì)工具

用戶體驗(yàn)設(shè)計(jì)的過(guò)程不是線性的,而是一個(gè)循環(huán)。無(wú)論創(chuàng)建什么樣的產(chǎn)品,都需要專業(yè)的原型工具,將基本框架放在一起,然后添加可能需要的所有細(xì)節(jié)。


從邏輯上講,設(shè)計(jì)團(tuán)隊(duì)的具體需求會(huì)因團(tuán)隊(duì)而異,但一些關(guān)鍵功能例如團(tuán)隊(duì)協(xié)作、需求管理、交互設(shè)計(jì)和開(kāi)發(fā)移交等,對(duì)于大多數(shù)團(tuán)隊(duì)來(lái)說(shuō)是必要的。 


17.精心管理產(chǎn)品需求

一切都從收集需求開(kāi)始,然后慢慢創(chuàng)建關(guān)鍵列表。雖然簡(jiǎn)單地列出一個(gè)列表聽(tīng)起來(lái)很容易,但隨著項(xiàng)目的進(jìn)展,要保持列表的條理性確實(shí)是一個(gè)挑戰(zhàn)。


除了創(chuàng)建需求和檢查復(fù)選框之外,還有一個(gè)問(wèn)題就是調(diào)整需求,需要從 設(shè)計(jì)、技術(shù)和業(yè)務(wù)各個(gè)方面來(lái)處理各種需求,還要確保這些需求之間沒(méi)有相互矛盾。  


18.了解移動(dòng)和網(wǎng)絡(luò)產(chǎn)品之間的差異

網(wǎng)頁(yè)端和移動(dòng)端產(chǎn)品最明顯的區(qū)別是屏幕尺寸,這意味著所有的視覺(jué)層次結(jié)構(gòu)和信息架構(gòu)都將將從Web到App發(fā)生變化。


移動(dòng)端產(chǎn)品會(huì)有更多影響設(shè)計(jì)決策的因素,例如設(shè)備的操作系統(tǒng)、使用產(chǎn)品的環(huán)境等。了解移動(dòng)端產(chǎn)品在 導(dǎo)航設(shè)計(jì)、用戶流程等關(guān)鍵方面的差異是至關(guān)重要的用戶體驗(yàn)設(shè)計(jì)原則。 


19.利用UX設(shè)計(jì)模式

幾乎所有的產(chǎn)品都專注于設(shè)計(jì)模式,它們可靠、易于查找并通過(guò)減少設(shè)計(jì)時(shí)間來(lái)為項(xiàng)目增加實(shí)用性。


▲ 當(dāng)用戶在谷歌搜索中輸入的內(nèi)容有問(wèn)題時(shí),谷歌會(huì)提供一個(gè)相關(guān)的搜索提示,輔助用戶進(jìn)行精確地搜索,解決用戶使用不同方式在搜索欄中傳達(dá)他們正在尋找的內(nèi)容的問(wèn)題。 


20.使用合適的工具才能有效

擁有單一的內(nèi)容來(lái)源可以為團(tuán)隊(duì)帶來(lái)清晰性和高效性,如果線框和原型分散在多個(gè)渠道中,這種內(nèi)容的集合就會(huì)變得很難達(dá)成。


通過(guò)合適高效的工具能夠避免產(chǎn)品在到達(dá)終點(diǎn)時(shí)遇到各種各樣的可用性問(wèn)題,防止產(chǎn)品細(xì)節(jié)沒(méi)有表現(xiàn)出來(lái)或者被忽略。 


最后

通過(guò)這份用戶體驗(yàn)設(shè)計(jì)原則的合集希望能夠讓你對(duì)這個(gè)領(lǐng)域有一個(gè)大致的了解。

沒(méi)有人知道用戶體驗(yàn)設(shè)計(jì)在未來(lái)會(huì)引領(lǐng)我們走向哪里,不過(guò)我們可以確定,無(wú)論它帶給我們什么,肯定都會(huì)很有趣。

慢慢來(lái)比較快,希望對(duì)你有所幫助~

文章來(lái)源:站酷  作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

5個(gè)方面改善用戶體驗(yàn)

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

當(dāng)你在一個(gè)既定的服務(wù)領(lǐng)域工作,但想要進(jìn)行革新時(shí)


1.詳細(xì)研究當(dāng)前的用戶體驗(yàn)


分析當(dāng)前的服務(wù)體驗(yàn),解讀用戶旅程中涉及到的行為,接觸點(diǎn),出現(xiàn)的痛點(diǎn)。構(gòu)建現(xiàn)有的體驗(yàn)旅程圖可以捕捉到服務(wù)體驗(yàn)的全貌,立即發(fā)現(xiàn)需要重新設(shè)計(jì)的關(guān)鍵問(wèn)題,促進(jìn)組織內(nèi)部的一致性。對(duì)于這種復(fù)雜的服務(wù),根據(jù)分析結(jié)果建立服務(wù)藍(lán)圖也大有好處,可以捕捉到流程中的關(guān)鍵問(wèn)題還有不同接觸點(diǎn)的關(guān)系中的重要方面。

建議:
自己進(jìn)行嘗試,能夠有效地發(fā)現(xiàn)細(xì)節(jié),涵蓋分析中的所有步驟。


2.分析服務(wù)構(gòu)建


體驗(yàn)和過(guò)程只是服務(wù)的一部分:在分析現(xiàn)有服務(wù)時(shí),我們也要考慮底層系統(tǒng)是如何搭建組件和動(dòng)態(tài)結(jié)構(gòu)的。只有對(duì)系統(tǒng)進(jìn)行全面理解,我們才能發(fā)現(xiàn)連接缺失,精力和資源的潛在浪費(fèi)和重復(fù)。創(chuàng)建一個(gè)系統(tǒng)地圖有助于讓團(tuán)隊(duì)成員明確這些問(wèn)題,討論潛在的改善機(jī)會(huì)。

建議:
我們需要將系統(tǒng)中的所有行為者聯(lián)系在一起,全面理解系統(tǒng)過(guò)程,減少重復(fù),彌補(bǔ)差距。


3.設(shè)定具體的目標(biāo),指導(dǎo)設(shè)想


在開(kāi)始構(gòu)思之前,花些時(shí)間來(lái)思考系統(tǒng)和體驗(yàn)的分析結(jié)果,并通過(guò)重新設(shè)計(jì)確定自己達(dá)到的關(guān)鍵目標(biāo)。目標(biāo)可以是橫向的(比如 “優(yōu)化整個(gè)旅程中的信息流”),也可以是非常具體的(比如 “入職:從填寫表格到熱情的歡迎會(huì)”)。最重要的是,我們首先要詳細(xì)了解現(xiàn)狀,才能設(shè)定目標(biāo),制定正確的方法,同時(shí)意識(shí)到急需解決的潛在局限性和障礙。

建議:
我們也可以將期待體驗(yàn)設(shè)定為目標(biāo)旅程,為體驗(yàn)中的每一步設(shè)定一個(gè)具體目標(biāo)。


4.創(chuàng)造新點(diǎn)子和解決辦法


提出新的想法,解決旅程中所有已知痛點(diǎn)或系統(tǒng)中的差距,以及抓住有趣的機(jī)會(huì)。這些想法包括既稍微改進(jìn)一些特定功能,也可以影響整個(gè)服務(wù)模式的寬泛概念。在這個(gè)階段,不要限制自己的想法數(shù)量,更不用考慮可行性:捕捉每一個(gè)想法,與其他團(tuán)隊(duì)成員分享,并在彼此的思考之上建立一個(gè)新想法。

建議:
快速構(gòu)思是一種頭腦風(fēng)暴的練習(xí),團(tuán)隊(duì)中的每個(gè)人都寫下他們心中的每一個(gè)想法,然后再進(jìn)行小組討論。


5.確定最有可能實(shí)現(xiàn)的概念


收集所有想法,確定下一步的行動(dòng)計(jì)劃。如果項(xiàng)目很簡(jiǎn)單,我們可以簡(jiǎn)單地將所有的想法整合成一個(gè)重新設(shè)計(jì)方案,逐步發(fā)展。在其他情況下,你可能最終得到50多個(gè)想法,對(duì)當(dāng)前的服務(wù)體驗(yàn)進(jìn)行創(chuàng)新,但顯然我們不能訴諸于每個(gè)想法,那么……從哪著手呢?我們可以建立一個(gè)評(píng)估矩陣,確定標(biāo)準(zhǔn),分析每個(gè)概念(例如,對(duì)用戶的價(jià)值,實(shí)施成本,獨(dú)特性等),并對(duì)它們進(jìn)行相應(yīng)的評(píng)分。這樣我們就可以篩選出最有可能實(shí)現(xiàn)的想法,創(chuàng)造較大的價(jià)值(這些想法可能是最先開(kāi)發(fā)的)。簡(jiǎn)略的概念可以很好地改善部分服務(wù),但不會(huì)產(chǎn)生較大的影響(容易實(shí)現(xiàn)的目標(biāo));而較復(fù)雜的概念從長(zhǎng)遠(yuǎn)來(lái)看會(huì)對(duì)服務(wù)體驗(yàn)產(chǎn)生更積極影響,但需要投入大量的時(shí)間和精力。

建議:
我們需要考慮的最核心內(nèi)容是新概念給用戶和組織帶來(lái)的價(jià)值,而不是實(shí)施的可行性或復(fù)雜性-但這可以根據(jù)具體環(huán)境而改變。

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

文章來(lái)源:站酷  作者:馬克筆設(shè)計(jì)留學(xué)

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

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

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

日歷

鏈接

個(gè)人資料

存檔