AV免费播放一区二区三区_亚洲综合网第三页_日本一 中文字幕久久综合伊人_麻豆久久久9性大片_日韩av

首頁

我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?

天宇 B端ui設(shè)計(jì)文章及欣賞

今天主要是和大家分享一下我們公司內(nèi)部建立設(shè)計(jì)體系的方法和實(shí)踐案例,希望大家能指正與交流~
我們團(tuán)隊(duì)就是最可愛滴~~~
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
B+Design System是以當(dāng)前互聯(lián)網(wǎng)主流B端框架為基礎(chǔ),并結(jié)合合公司特定業(yè)務(wù)場(chǎng)景而打造的具有"公司品牌特色的B端后臺(tái)設(shè)計(jì)體系"(以下簡(jiǎn)稱為"B+Design"),包含了有關(guān)顏色、字體、icon、柵格、版式、間距、數(shù)據(jù)可視化等設(shè)計(jì)規(guī)范指南,組件層提供 30+ 不同的組件,包括它們的不同狀態(tài),形成的模式,以及應(yīng)用的產(chǎn)品。
 
 
一、為什么要建立 B+Design 設(shè)計(jì)體系?
隨著公司快速發(fā)展,目前公司用于業(yè)務(wù)支撐的后臺(tái)管理系統(tǒng)"品類繁多且零散獨(dú)立",需構(gòu)建一套"靈活、專業(yè)"的設(shè)計(jì)體系來統(tǒng)一設(shè)計(jì)生態(tài)風(fēng)格及交付標(biāo)準(zhǔn)。
 
當(dāng)前痛點(diǎn):
溝通時(shí)間成本高
:跨部門的項(xiàng)目實(shí)施過程中流程混亂,產(chǎn)品、設(shè)計(jì)、開發(fā)、測(cè)試等崗位在工作對(duì)接時(shí)溝通低效且問題耦合度高;
 
交付質(zhì)量差
:無項(xiàng)目統(tǒng)一交付標(biāo)準(zhǔn),不同項(xiàng)目質(zhì)量產(chǎn)出不穩(wěn)定,項(xiàng)目質(zhì)量高度依賴于各個(gè)環(huán)節(jié)負(fù)責(zé)人的個(gè)人能力;
 
做不好設(shè)計(jì)協(xié)同
:各個(gè)系統(tǒng)級(jí)頁面架構(gòu)、組件、樣式野蠻生長(zhǎng),缺少規(guī)范范導(dǎo)致樣式及體驗(yàn)不統(tǒng)一;
 
研發(fā)效率低
:組件重復(fù)開發(fā),維護(hù)成本也高,無基礎(chǔ)沉淀能力;
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
 
二、構(gòu)建 B+Design 的思路
1、設(shè)計(jì)目標(biāo)
伴著公司業(yè)務(wù)發(fā)展,開源的組件庫(kù)已無法滿業(yè)務(wù)需要,搭建一套更適合公司業(yè)務(wù)的UI組件庫(kù),勢(shì)在必行;設(shè)計(jì)系統(tǒng)承載著作為一個(gè)沉淀基礎(chǔ)能力的支持平臺(tái),同時(shí)也具有賦能多多邊業(yè)務(wù)、多種角色的重要作用和價(jià)值;
 
標(biāo)準(zhǔn)統(tǒng)一:
重新定義標(biāo)準(zhǔn)化的產(chǎn)品用戶體驗(yàn),統(tǒng)一品牌形象、設(shè)計(jì)標(biāo)準(zhǔn),降低決策成本,提高產(chǎn)品迭代效率及質(zhì)量;
 
降本增效:
基礎(chǔ)能力沉淀,規(guī)范設(shè)計(jì)元素,減少重復(fù)性設(shè)計(jì),且提高代碼可復(fù)用性,避免重復(fù)開發(fā),降低時(shí)間及人力成本;
 
高效協(xié)同:
降低不同設(shè)計(jì)師或上下游同事之間的溝通成本,提高團(tuán)隊(duì)之間的協(xié)作力,提升團(tuán)隊(duì)整體效率;
 
設(shè)計(jì)延展:
通過設(shè)計(jì)規(guī)范建立,滿足組件在不同場(chǎng)景及業(yè)務(wù)中的延展和擴(kuò)充,從而實(shí)現(xiàn)全鏈路、多場(chǎng)景的高效輸出;
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
2、設(shè)計(jì)原則
為了更適用于企業(yè)級(jí)產(chǎn)品的開發(fā)和使用,通過大量中后臺(tái)場(chǎng)景的的實(shí)踐,B+Design設(shè)計(jì)系統(tǒng)提煉出以下設(shè)計(jì)原則:
清晰:
效率提升是務(wù)實(shí)之基。設(shè)計(jì)應(yīng)減少不確定因素,降低用戶判斷次數(shù),明確信息層級(jí)導(dǎo)向,使操作目的更清晰;清晰的設(shè)計(jì)體系讓產(chǎn)品操作直觀、流程一步到位;信息傳達(dá)清晰表意明確,助用戶短時(shí)間內(nèi)快速理解并作出判斷。
 
高效
設(shè)計(jì)效率:可快速生成效果圖,也可使用Sketch,組件庫(kù),頁面模板等快速生成效果圖和業(yè)務(wù)解決方案來提高產(chǎn)品體驗(yàn)一致性;
開發(fā)效率:組件均已代碼封裝;并提供體驗(yàn)評(píng)估標(biāo)準(zhǔn)以供參考,保證產(chǎn)品質(zhì)量;
使用效率:系統(tǒng)常用組件(如批量搜索和操作)提高用戶工作效率;
工作協(xié)同:減少產(chǎn)品開發(fā)流程中各個(gè)角色之間的溝通成本;
 
標(biāo)準(zhǔn)化:
樣式規(guī)范、操作流程、呈現(xiàn)高度一致的設(shè)計(jì)標(biāo)準(zhǔn),能體現(xiàn)產(chǎn)品的品牌感與信賴感,實(shí)現(xiàn)品牌感的系統(tǒng)傳達(dá),還能降低用戶反復(fù)學(xué)習(xí)成本,給用戶帶來品牌信賴。
 
創(chuàng)新:
通過對(duì)當(dāng)前市場(chǎng)主流設(shè)計(jì)系統(tǒng)開展競(jìng)品分析,結(jié)合FS業(yè)務(wù)場(chǎng)景對(duì)各個(gè)組件進(jìn)行統(tǒng)一規(guī)范,打造符合FS品牌特性的產(chǎn)品設(shè)計(jì)體系;
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
3、原子化組件思維
原子最早是由英國(guó)化學(xué)家/物理學(xué)家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論?;瘜W(xué)元素由不可分的微粒(原子)構(gòu)成的,它在一切化學(xué)變化中是不可再分的最小單位。
原子理論同樣適用于我們的設(shè)計(jì)系統(tǒng)中:我們的頁面是由原子(最小單位設(shè)計(jì)元素)、分子(基礎(chǔ)控件)、組織(基礎(chǔ)功能組件)、模版(業(yè)務(wù)定制組件)、頁面構(gòu)成的;
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
注意:設(shè)計(jì)組件不是把UI元素堆積到一個(gè)地方,然后各處集中引用用這么簡(jiǎn)單。組件化的工作方式信奉獨(dú)立、完整、自由組合,目標(biāo)就是盡可能把設(shè)計(jì)與開發(fā)中的元素獨(dú)立化,使它具備完完整的局部功能,通過特定規(guī)則自由組合來構(gòu)成整個(gè)產(chǎn)品。
 
 
三、構(gòu)建 B+Design 的步驟
基于前期的思考,接下來我們的任務(wù)是對(duì)整個(gè)體系的制定進(jìn)行任務(wù)規(guī)劃,以下是四大步驟:
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
第一步:現(xiàn)狀分析
通過現(xiàn)狀所有系統(tǒng)進(jìn)行設(shè)計(jì)走查及用戶問卷調(diào)研,收集用戶建議及觀點(diǎn),明確規(guī)范需要優(yōu)化的方向。
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
第二步:框架梳理
通過三大競(jìng)品設(shè)計(jì)體系(阿里,字節(jié),騰訊)框架的梳理,結(jié)合現(xiàn)有設(shè)計(jì)頁面,分析業(yè)務(wù)場(chǎng)景和競(jìng)品框架,確定FS的最小元素,整理和歸類自己的組件框架。
最終B+Design組件框架主要分為八大板塊,分別為:基礎(chǔ)樣式、通用、布局、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其他,共50+組件;
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
第三步:設(shè)計(jì)組件和規(guī)范指南
針對(duì)已梳理好的框架展開組件設(shè)計(jì)工作,同時(shí)為每個(gè)組件編寫相應(yīng)的規(guī)范指南,為使用者提供場(chǎng)景參考。
1、設(shè)計(jì)組件
組件設(shè)計(jì)是設(shè)計(jì)規(guī)范中最核心,工作量最大的一個(gè)環(huán)節(jié)。我們可以將它拆解成幾個(gè)部分,先做出基礎(chǔ)組件,再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計(jì)業(yè)務(wù)組件,最后抽象成頁面模板。
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
  •  
    基礎(chǔ)組件
說到基礎(chǔ)組件,這就是前面所提到的原子化思維,在進(jìn)行設(shè)計(jì)系統(tǒng)的構(gòu)建時(shí),我們期望達(dá)到這樣一種效果:當(dāng)對(duì)任何一個(gè)原子進(jìn)行改動(dòng)時(shí),所有依賴于該原子的部件都能夠全部自動(dòng)更新。唯有滿足這一條件,設(shè)計(jì)系統(tǒng)所設(shè)想的提升效率、解放生產(chǎn)力的目標(biāo)才能真正得以實(shí)現(xiàn)。
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
 
  •  
    業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后,可以根據(jù)業(yè)務(wù)需求,將部門內(nèi)使用頻率較高的組件進(jìn)行評(píng)估,抽象成業(yè)務(wù)組件。
例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
  •  
    頁面模板
完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建工作后,我們可以依照全局說明,通過組件搭建頁面模板。頁面模板不僅能夠切實(shí)提升組件的使用效率,而且能提供出色的組件使用示范作用,增進(jìn)設(shè)計(jì)說明和組件的結(jié)合。
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
2、規(guī)范指南
在后臺(tái)設(shè)計(jì)體系中,“規(guī)范指南”是一套為了確保設(shè)計(jì)的一致性、可用性和可維護(hù)性而制定的規(guī)則和指導(dǎo)原則。將所有的規(guī)范內(nèi)容整理成詳細(xì)的文檔,配以示例和說明,方便團(tuán)隊(duì)成員查閱和參考,此步驟也工作量巨大。主要分為七大模塊:
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
 
第四步:效果驗(yàn)證
“B+Design System”建立成功后在"多個(gè)業(yè)務(wù)系統(tǒng)"中進(jìn)行應(yīng)用,通過實(shí)際業(yè)務(wù)反饋來進(jìn)行效果驗(yàn)證。
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
 
四、升級(jí)迭代機(jī)制
一個(gè)統(tǒng)一的設(shè)計(jì)語言不應(yīng)該僅僅是一組靜態(tài)規(guī)則和單個(gè)組件構(gòu)成成的,它應(yīng)該是一個(gè)不斷發(fā)展的生態(tài)系統(tǒng)。需要我們?cè)诋a(chǎn)品實(shí)踐中不斷優(yōu)化、迭代,讓組件更加貼合場(chǎng)景,更好的服務(wù)業(yè)務(wù)。
我們是如何搭建企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的?
 
 
以上就是我們公司內(nèi)部構(gòu)建整個(gè)設(shè)計(jì)體系的全過程啦~~~~~
 
在完成設(shè)計(jì)規(guī)范的構(gòu)建后,我們聯(lián)合了產(chǎn)品經(jīng)理和前端工程師,幫助每個(gè)環(huán)節(jié)的人員快速搭建產(chǎn)出物。
 
對(duì)于產(chǎn)品經(jīng)理
:我們幫助產(chǎn)品搭建了一套Axure元件庫(kù),該元件庫(kù)與設(shè)計(jì)組件庫(kù)一樣,可以快速搭建原型,提高了產(chǎn)品的工作效率,與設(shè)計(jì)師、開發(fā)的溝通也更加順暢。甚至對(duì)于簡(jiǎn)單的頁面產(chǎn)品可以自己直接出原型給開發(fā),開發(fā)直接沿用寫好了的組件庫(kù)。
 
對(duì)于前端
:輔助前端建立前端組件庫(kù),這樣減少了設(shè)計(jì)走查的問題,對(duì)于以前各種樣式問題需要調(diào)整,現(xiàn)在基本都是寫好了的組件,可以有更多時(shí)間去寫交互和提高系統(tǒng)的性能。
 
 
 


作者:設(shè)計(jì)恐慌癥
鏈接:https://www.zcool.com.cn/article/ZMTYyNzI5Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

小程序尺寸,一篇搞定

天宇 系統(tǒng)UI設(shè)計(jì)文章及欣賞

很多工作了幾年的設(shè)計(jì)師依然搞不懂小程序畫布創(chuàng)建依據(jù)和適配邏輯,所以今天針對(duì)這個(gè)問題,做一篇簡(jiǎn)單的分享,來對(duì)這種基礎(chǔ)知識(shí)點(diǎn)做個(gè)掃盲。
首先小程序之所以叫小程序,因?yàn)樗皇窃谑謾C(jī)、電腦系統(tǒng)上運(yùn)行的應(yīng)用(Native),而是在微信里運(yùn)行的應(yīng)用。也就是說,微信本身有套系統(tǒng),而小程序的設(shè)計(jì)要遵循的是微信的設(shè)計(jì)規(guī)范,而不是蘋果、安卓、微軟的設(shè)計(jì)規(guī)范。
小程序尺寸,一篇搞定
 
 
這么做的原因是為了讓開發(fā)者只用一套代碼,就能在所有平臺(tái)、系統(tǒng)上的微信運(yùn)行,并展示出相同的效果。這個(gè)邏輯和網(wǎng)頁類似,不管你在什么平臺(tái)還是系統(tǒng)只要安裝了瀏覽器,就可以讀取相同的網(wǎng)頁,而不用針對(duì)不同平臺(tái)寫一套全新的代碼出來。
雖然小程序主要在移動(dòng)端運(yùn)行,它的設(shè)計(jì)理念會(huì)盡量貼合原生應(yīng)用,多數(shù)控件、組件、交互的設(shè)計(jì)方式一樣,但系統(tǒng)不同必然會(huì)導(dǎo)致細(xì)節(jié)上的差異,而界面的畫布就是最大的問題。
首先小程序官方創(chuàng)建了一套自己的語言,WXML、WXSS、WXS,分別對(duì)應(yīng)網(wǎng)頁前端的 HTML、CSS、JavaScript。控制尺寸、樣式的語言是 WXSS,而它的使用的尺寸單位是 rpx。
rpx 不是厘米、像素這樣的物理單位,也不是移動(dòng)端會(huì)用的 pt、dp、sp 這樣的矢量單位,而是一個(gè)很特殊的“
變種單位
”。
微信系統(tǒng)在渲染界面時(shí),固定了移動(dòng)端視圖窗口為 750rpx。不管你在蘋果還是安卓系統(tǒng),用的是無劉海小屏 iPhoneSE 還是新款 iPhone15 破兒麥克斯,都使用 750rpx 渲染。
換句話說,
rpx 的長(zhǎng)度即 —— 屏幕的 1/750
。
這是個(gè)比較抽象的概念,移動(dòng)端使用矢量單位,是為了在屏幕變大的同時(shí)擴(kuò)大畫布尺寸,提升顯示容量,所以有了適配原則,組件的應(yīng)用自動(dòng)布局適應(yīng)空間的變化。
但是小程序不一樣,微信采用了最簡(jiǎn)單粗暴的模式 —— 等比縮放。在不同尺寸的屏幕中,直接縮放內(nèi)容來填滿窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截圖的同一個(gè)小程序界面。
小程序尺寸,一篇搞定
 
 
如果我們把它們縮放成一樣的寬相互疊加,會(huì)發(fā)現(xiàn)元素大小是一樣的(Mac 端字體和移動(dòng)端有差異,所以有一定寬度差異,但是字號(hào)相同)。
小程序尺寸,一篇搞定
 
 
但正常的移動(dòng)端應(yīng)用,使用自動(dòng)布局而不是等比放大,覆蓋到一起是不會(huì)重疊的,比如下面 13 和 15promax 中同一張 APP 界面截圖的疊加。
小程序尺寸,一篇搞定
 
 
所以,微信的畫布就是 750rpx 寬適配到所有移動(dòng)端屏幕,但高度會(huì)根據(jù)比例調(diào)整,畢竟不同屏幕的長(zhǎng)寬比不一樣。
小程序尺寸,一篇搞定
 
 
再進(jìn)一步分析,750 這個(gè)數(shù)值哪來的呢?一看就知道是 iPhone 早期和低端設(shè)備的實(shí)際分辨率,即 375 的 2x 數(shù)值。雖然現(xiàn)在移動(dòng)端設(shè)計(jì)已經(jīng)從 375 過渡到 390 再更新到目前的 393,但小程序依舊使用375。
原因和之前響應(yīng)式分享中提到的一樣 ——
往大適配容易,往小適配難
!
現(xiàn)在市場(chǎng)上還保留數(shù)量可觀的 375 設(shè)備,以微信的角色和體量就勢(shì)必要兼容它們。既然兼容它們,那
設(shè)計(jì)和渲染就以兼容的最小畫布為準(zhǔn)向上放大
,而沒有向下縮小的顧慮,這可以最大保證兼容性和可用性。
用 375 規(guī)格的設(shè)備去創(chuàng)建畫布是沒有問題的,不管你是使用 iPhone SE 還是 iPhone Mini 為標(biāo)準(zhǔn)都可以。
小程序尺寸,一篇搞定
 
 
因?yàn)橄到y(tǒng)用的 750rpx,所以原則上使用 750*1334 或 750*1624 畫布創(chuàng)建最佳,但實(shí)際情況還是有出路。因?yàn)楣俜浇M件庫(kù)用的是 375 寬....
小程序尺寸,一篇搞定
 
 
這又涉及到現(xiàn)實(shí)情況的考慮,畢竟設(shè)計(jì)是設(shè)計(jì),開發(fā)是開發(fā)。在設(shè)計(jì)過程中我們往往會(huì)用其它應(yīng)用設(shè)計(jì)好的素材,尤其一些大廠應(yīng)用,小程序就是 APP 的翻版。如果把畫布做成 750 意味著素材得全部重調(diào)一遍,和重做差不多,而且參數(shù)和設(shè)計(jì)師習(xí)慣不同,會(huì)出很多錯(cuò)誤。
所以,正常創(chuàng)建小程序的畫布使用常規(guī)的 375 畫布即可。而在進(jìn)入開發(fā)階段,程序員可以直接在即時(shí)、 Figma、藍(lán)湖的標(biāo)注設(shè)置中使用 2x 的倍率,既可以獲得 rpx 的具體數(shù)值。
這是個(gè)隱患問題,建議盡量在設(shè)計(jì)前和你們的前端程序員核對(duì)一遍懂不懂的如何換算數(shù)值,創(chuàng)建 375 是否有阻力,如果一定強(qiáng)調(diào)要用 750,你再自己展開后續(xù)的對(duì)線,誰贏了聽誰的……
除了標(biāo)準(zhǔn)移動(dòng)端畫布外,還有個(gè)非常鬼畜的地方,就是組件庫(kù)內(nèi)有個(gè) Half-screen Dialog,里面的組件用的是 414 寬。這數(shù)值是 iPhone 8 Plus/ XS Max  的規(guī)格,總不能還特意去支持這些古代大屏吧?
414 是小程序在電腦端啟動(dòng)時(shí)使用的規(guī)格,未經(jīng)適配的小程序在電腦端的窗口就是固定的 414*736 。
小程序尺寸,一篇搞定
 
 
小程序尺寸,一篇搞定
 
 
用 736 這個(gè)高也和兼容小屏幕有關(guān)就不展開了,且小程序在電腦端也可以使用響應(yīng)式的適配,只是這個(gè)需求實(shí)在太少,所以也不在這里多做介紹,感興趣的可以自己研究官方規(guī)范。
 
最后,我自己當(dāng) AI 做總結(jié)
  •  
    小程序使用 rpx 作為寬度單位
  •  
    移動(dòng)端小程序使用 750rpx 渲染
  •  
    rpx 長(zhǎng)度是移動(dòng)端屏幕的 1/750
  •  
    小程序適配不同手機(jī)屏幕的方式是根據(jù)寬度等比縮放
  •  
    創(chuàng)建小程序設(shè)計(jì)畫布使用 375*667 或 375*812
  •  
    小程序在電腦端上會(huì)放大成 414*736
  •  
    電腦端調(diào)用的原生組件和移動(dòng)端不同


作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)

天宇 B端ui設(shè)計(jì)文章及欣賞

從1973年第一代圖形用戶界面的呱呱落地到今天百家爭(zhēng)鳴,圖形用戶界面竟然已經(jīng)走過了50年的發(fā)展歷程,更神奇的是,原來UI設(shè)計(jì)這個(gè)職業(yè)的起源也是因圖標(biāo)的起源而起,后來圖標(biāo)成了UI設(shè)計(jì)中最重要的視覺元素之一,接下來,我們一起走進(jìn)圖標(biāo)的世界,了解它神秘背后的故事。
 
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
目錄
一、 圖標(biāo)的起源
二、 圖標(biāo)設(shè)計(jì)的定義
三、 圖標(biāo)的種類
四、 圖標(biāo)設(shè)計(jì)8大原則
五、 圖標(biāo)的6大作用
六、 提升圖標(biāo)設(shè)計(jì)的4個(gè)小技巧
七、 5個(gè)圖標(biāo)網(wǎng)站推薦
八、圖標(biāo)的命名規(guī)范
 
 
 
一、圖標(biāo)的起源
在計(jì)算機(jī)發(fā)展的早期,用戶界面主要是基于命令行的,由字母和數(shù)字組成,操作復(fù)雜且對(duì)普通用戶不友好,用戶需要記住大量的命令和參數(shù)才能使用計(jì)算機(jī)系統(tǒng)。
 
隨著計(jì)算機(jī)技術(shù)的發(fā)展,為了使計(jì)算機(jī)更易于使用和理解,程序員開始開發(fā)圖形化的元素來代表各種操作和功能,圖標(biāo)概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執(zhí)行任務(wù),而無需記住復(fù)雜的命令。
 
 
1.施樂公司的開創(chuàng)性工作
1973年,美國(guó)施樂公司推出了第一批真正意義上具有圖形用戶界面的個(gè)人電腦——Xerox Alto。雖然這款電腦僅生產(chǎn)了約 2000 臺(tái),但它為后來的計(jì)算機(jī)圖形界面發(fā)展奠定了基礎(chǔ)。它的界面中已經(jīng)出現(xiàn)了一些簡(jiǎn)單的圖標(biāo),如垃圾桶、計(jì)算器、打印機(jī)、文件和文件夾等,這些圖標(biāo)成為了后來圖標(biāo)設(shè)計(jì)的雛形。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2.蘋果公司的推動(dòng)
1979年,史蒂夫·喬布斯參觀了施樂公司的原型機(jī)后,深受啟發(fā),決定開發(fā)自己的圖形界面計(jì)算機(jī)。1983 年,蘋果公司推出了Apple Lisa,這是蘋果首臺(tái)圖形界面計(jì)算機(jī),其界面中的圖標(biāo)設(shè)計(jì)得到了進(jìn)一步的發(fā)展。
在這一時(shí)期,現(xiàn)代圖標(biāo)設(shè)計(jì)之母蘇珊·卡爾擔(dān)任蘋果的創(chuàng)意總監(jiān),她設(shè)計(jì)的像素風(fēng)格圖標(biāo)簡(jiǎn)潔、清晰、易于理解,具有很高的視覺平衡性,即使在今天看來也顯得活潑有趣。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3.微軟的跟進(jìn)與發(fā)展
1985年,微軟發(fā)布了 Windows 1.0操作系統(tǒng),這是微軟在圖形用戶界面領(lǐng)域的重要嘗試。該系統(tǒng)中的圖標(biāo)設(shè)計(jì)也借鑒了蘋果的一些理念,但也有自己的特點(diǎn)。隨著 Windows 操作系統(tǒng)的不斷發(fā)展和普及,圖標(biāo)設(shè)計(jì)也逐漸成為了用戶界面設(shè)計(jì)中不可或缺的一部分。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
二、圖標(biāo)設(shè)計(jì)的定義?
圖標(biāo)設(shè)計(jì)是一種設(shè)計(jì)活動(dòng),主要是創(chuàng)造出用于代表物體、動(dòng)作、概念等各種元素的圖形符號(hào)。
 
這些圖形符號(hào)具有簡(jiǎn)潔性,讓人能快速識(shí)別。比如手機(jī)桌面上的微信圖標(biāo),用兩個(gè)對(duì)話氣泡的簡(jiǎn)單圖案就代表了這個(gè)軟件,讓人一眼就能明白。圖標(biāo)設(shè)計(jì)在很多領(lǐng)域都有應(yīng)用,像軟件界面、網(wǎng)站、移動(dòng)應(yīng)用等,能夠?yàn)橛脩籼峁┮曈X引導(dǎo),方便用戶操作。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
三、圖標(biāo)的種類
圖標(biāo)在提升產(chǎn)品氣質(zhì)上起著不可估量的地位,在界面中往往起著畫龍點(diǎn)睛的作用,無法想象在一個(gè)產(chǎn)品中,沒有圖標(biāo),界面會(huì)顯得多么的無聊和乏味,但是圖標(biāo)也不能總用一種形式的圖標(biāo),這樣也會(huì)百看讓人生厭,因此也就衍生了圖標(biāo)的多樣性,以下是我整理的常見圖標(biāo)類型:
 
1、從視覺表現(xiàn)上,有以下12大類圖標(biāo)
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、從功能上,有以下6大類圖標(biāo)
?工具圖標(biāo)
工具圖標(biāo)在B端項(xiàng)目中應(yīng)用很廣泛,幾乎每個(gè)組件中都會(huì)包含這類圖標(biāo);比方說騰訊文檔上方的文檔編輯圖標(biāo)就是屬于這種類型,它的裝飾性很小,更多是功能的承載。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
?裝飾圖標(biāo)
在一些軟件產(chǎn)品中,會(huì)重點(diǎn)強(qiáng)調(diào)品牌、情感化設(shè)計(jì),大量啟用3D化的裝飾圖標(biāo)來提升界面的質(zhì)感。
比方說騰訊電腦管家下面的這個(gè)界面設(shè)計(jì),它就運(yùn)用了大量具有裝飾性的圖標(biāo)來傳遞信息表達(dá)品牌,并且中央還采用騰訊電腦管家的IP形象作為切入點(diǎn),萌萌的形象無形中拉近了與受眾之間的距離。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
?啟動(dòng)圖標(biāo)
在項(xiàng)目中,當(dāng)用戶想表達(dá)品牌時(shí),經(jīng)常會(huì)把LOGO圖標(biāo)做成動(dòng)態(tài)圖,來更好的傳遞品牌理念,比方說聯(lián)想電腦管家,在啟動(dòng)頁時(shí),就運(yùn)用了動(dòng)態(tài)啟動(dòng)圖標(biāo),同時(shí)下面還附帶了一個(gè)slogan的文字動(dòng)效,很好的向用戶傳遞了安全的理念。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
? 進(jìn)程提示圖標(biāo)
在軟件界面中,經(jīng)常也需要進(jìn)程的提示,這時(shí)候圖標(biāo)就可以起到這樣的作用,比方說騰訊電腦管家在清理垃圾時(shí),圖標(biāo)里面的風(fēng)扇就一直在轉(zhuǎn),寓意當(dāng)前清理工作正在進(jìn)行中。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
? 狀態(tài)提示圖標(biāo)
軟件在運(yùn)行過程中難免會(huì)出現(xiàn)bug或者內(nèi)容為空的時(shí)候,這時(shí)候狀態(tài)提示圖標(biāo)就尤為重要,可以大大減輕人們的焦慮情緒。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
? 增加界面趣味性的圖標(biāo)
圖標(biāo)不僅在理解和使用上給人們提效了,而且有時(shí)添加動(dòng)效的圖標(biāo)還能給人帶來絲絲驚喜和愉悅。
比方說聯(lián)想的這個(gè)動(dòng)態(tài)加載圖標(biāo),看著就很有趣,讓人忍不住多欣賞一下。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
四、圖標(biāo)設(shè)計(jì)8大原則
雖然現(xiàn)在AI盛行,很多酷炫的效果可以用AI實(shí)現(xiàn),但是一些讓圖標(biāo)看起來更加專業(yè)精致、耐看的秘密我們還是需要知道的,了解這些設(shè)計(jì)原則,我們可以事半功倍,當(dāng)AI生產(chǎn)有偏差時(shí),我們自己可以優(yōu)化、修復(fù)和調(diào)整。
 
 
1、大小統(tǒng)一
圖標(biāo)大小統(tǒng)一,就是一組圖標(biāo)放置在一起,圖標(biāo)大小要看起來差不多,不能忽大忽小,比方說這組圖標(biāo)的第三個(gè)圖標(biāo),電腦圖標(biāo)明顯過高,跟其他圖標(biāo)放在一起就顯得不是那么的協(xié)調(diào)美觀和統(tǒng)一。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
在大小統(tǒng)一這方面,我們記得就是幾何圖形它們有視覺差,有的時(shí)候并不是說尺寸一樣,大小就一樣了,比方說下面這組圖形,左邊的這組它們高度一樣,可是看起來大小并不太一樣,明顯中間的三角形顯得??;右邊的這組,三角形比左右兩邊的都要高,可是它們放在一起看起來大小就是差不多的,這就是幾何圖形帶來的視覺差,就是我們?cè)谧鰣D的時(shí)候,要記得多去感受,設(shè)計(jì)中的美很多不是用1+1=2能解釋清楚的,它就是一種感受,放下心中的浮躁,我們還是能感受到它們之間的區(qū)別,這種美也沒那么玄乎,只要用心,一定可以做出大小一致的圖標(biāo)。
 
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
 
2、圓角統(tǒng)一
圓角統(tǒng)一,就是圖標(biāo)之間有相同造型,然后又都有圓角的,那么他們就要保持相同的圓角曲度,比方說下面這組圖標(biāo),圖標(biāo)的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規(guī)范和專業(yè)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、風(fēng)格統(tǒng)一
界面中同樣功能的圖標(biāo),樣式和風(fēng)格需要保持一致,比方說這組圖標(biāo)樣式,風(fēng)格就保持著高度的一致,都是用的玻璃質(zhì)感的磨砂材質(zhì)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4、角度統(tǒng)一
這組扁平化圖標(biāo),在右邊相似的角度都疊加了一個(gè)小色塊,增加了圖標(biāo)的層次感,相同的角度也增加了圖標(biāo)的一致性和系列感。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
5、粗細(xì)統(tǒng)一
圖標(biāo)的粗細(xì)要統(tǒng)一,這樣圖標(biāo)就會(huì)看起來比較精致,比方說下面的這組圖標(biāo),圖標(biāo)外框線都是用的3px,圖標(biāo)里面的線都是用的2px,圖標(biāo)的粗細(xì)都保持一樣的粗細(xì)規(guī)律,這樣的圖標(biāo)看著也是同樣的美觀和一致。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
6、疏密統(tǒng)一
下面是一組類似于插畫風(fēng)格的圖標(biāo),圖標(biāo)的風(fēng)格是布線比較密集飽滿,而三個(gè)圖標(biāo)都遵循了這樣的原則,看起來出奇的統(tǒng)一,所以它們看起來像是一組成套圖標(biāo)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
7、透視統(tǒng)一
當(dāng)設(shè)計(jì)的圖標(biāo)是立體時(shí),要注意它們的透視要統(tǒng)一,就像下面的這組2.5D圖標(biāo),它們的設(shè)計(jì)透視就保持著高度的一致。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
8、易識(shí)別
圖標(biāo)的優(yōu)劣首先取決于其能否讓用戶一目了然地理解其代表的意義,這是很重要的圖標(biāo)設(shè)計(jì)原則。
下面的這組手機(jī)主題圖標(biāo),識(shí)別性就非常的高,簡(jiǎn)潔且好理解。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
五、圖標(biāo)的6大作用
圖標(biāo)在界面設(shè)計(jì)中扮演著至關(guān)重要的角色,它們遍布于應(yīng)用程序的各個(gè)角落。無論是導(dǎo)航欄、工具欄還是標(biāo)簽欄,亦或是首頁、詳情頁、個(gè)人中心頁,功能圖標(biāo)都隨處可見。圖標(biāo)的主要作用在于傳達(dá)信息,相比文字,它們能更直接地傳遞概念,并且能夠?yàn)橛脩舻囊曈X體驗(yàn)增添樂趣。
 
1、提升界面的使用效率
功能圖標(biāo)常以簡(jiǎn)潔的圖形呈現(xiàn),它們便于用戶識(shí)別和記憶。這種設(shè)計(jì)讓用戶能夠迅速定位到所需的功能,無需耗費(fèi)時(shí)間閱讀文字說明或?yàn)g覽冗長(zhǎng)的菜單選項(xiàng),大大提升了界面的使用效率。
 
華為云的這個(gè)界面,文字信息很多,因?yàn)橛辛藞D標(biāo)的存在,人們尋找起來特別高效,能高效定位到想要的信息。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、增加用戶的滿意度
圖標(biāo)不僅可以提升界面使用效率,還能提升用戶的體感和滿意度,精美的圖標(biāo)讓人看著都是賞心悅目的,就像我們?cè)诖蠼稚峡吹揭粋€(gè)美女,都忍不住多駐留一伙一樣。
 
華為云這組精美的圖標(biāo)動(dòng)效就給了我很大的視覺享受,圖標(biāo)設(shè)計(jì)精致,配色舒適,還有動(dòng)效,給足了用戶滿足感。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、減少人們認(rèn)知的成本
圖標(biāo)很多的造型都來源于生活,來源于我們熟悉的事物,在界面中運(yùn)用我們熟悉的圖形會(huì)大大降低人們的認(rèn)知成本,也會(huì)讓更多人產(chǎn)生共鳴,它的傳達(dá)作用不受語言和國(guó)界的束縛,是一種高效的界面表達(dá)語言。
 
華為云的這組圖標(biāo)就是運(yùn)用了人們?nèi)粘I钪蟹浅J煜さ脑兀缠Q感很強(qiáng),人們學(xué)習(xí)和理解的成本很低。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4.提升品牌形象
仔細(xì)觀察會(huì)發(fā)現(xiàn),在生活中有很多的軟件產(chǎn)品,會(huì)把企業(yè)的LOGO融入到日常產(chǎn)品的圖標(biāo)設(shè)計(jì)中,大大提升了品牌的一個(gè)曝光度。
 
騰訊云就有這樣的小心思,它會(huì)把騰訊云LOGO融入到banner圖標(biāo)設(shè)計(jì)中,傳遞了信息,同時(shí)也加強(qiáng)了品牌的曝光。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
5、圖標(biāo)可以增加界面的豐富度
有圖標(biāo)的界面,頁面看起來豐富度更高,層次感更強(qiáng),信息表達(dá)上也會(huì)更加的清晰整潔。
 
360AI辦公這個(gè)界面之所以看起來這么豐富,很大原因是在于圖標(biāo)的應(yīng)用,界面中有大圖標(biāo)、小型面圖標(biāo),還有線性小圖標(biāo),有對(duì)比,整個(gè)頁面就看起來豐盈了不少。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
6、減少界面的枯燥感
千篇一律的文字,難免會(huì)產(chǎn)生枯燥感,讓人不愿多駐留;圖標(biāo)多彩的配色以及Q萌的造型會(huì)讓人心生愉悅。
佐糖的這個(gè)界面,若不是有圖標(biāo)的潤(rùn)色,光只有功能點(diǎn)和文字介紹,估計(jì)會(huì)乏味不少,但是有了多彩圖標(biāo)的加入,瞬間氛圍感都熱鬧了不少。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
六、提升圖標(biāo)設(shè)計(jì)的4個(gè)小技巧
1、大量臨摹,刻意練習(xí)
任何一項(xiàng)技能的獲得,最開始都離不開臨摹,作為剛接觸UI設(shè)計(jì)的職場(chǎng)新人,可以先從臨摹入手,先臨摹簡(jiǎn)單的,然后循序漸進(jìn),臨摹難度大點(diǎn)的,這樣圖標(biāo)設(shè)計(jì)能力也會(huì)慢慢提升。
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、多積累好的樣本
想要繪制好看的圖標(biāo),首先要見過好看的圖標(biāo),所以我們?nèi)粘RB(yǎng)成多收集好圖標(biāo)好設(shè)計(jì)的習(xí)慣,這樣當(dāng)面臨新的需求設(shè)計(jì)時(shí),也不至于手忙腳亂,不知如何下手。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、學(xué)會(huì)分析
看到好看的圖標(biāo)設(shè)計(jì)時(shí),我們要學(xué)會(huì)分析,這組圖標(biāo)好,它好在哪,哪里打動(dòng)了你,你分析了這些,你自己在設(shè)計(jì)的時(shí)候也會(huì)不自覺的運(yùn)用到其中的智慧和思路,這樣我們就可以隨時(shí)原創(chuàng)出符合自己需求的圖標(biāo)設(shè)計(jì)來。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4、明確目標(biāo)與受眾
目標(biāo)受眾不同,他們對(duì)圖形的期望也會(huì)不一樣,比方說在設(shè)計(jì)兒童產(chǎn)品界面和B端產(chǎn)品界面時(shí),所用的顏色和形狀都是有考究的。
 
兒童類產(chǎn)品的圖標(biāo)設(shè)計(jì),形狀會(huì)比較圓潤(rùn),色彩也比較多彩;但是B端類產(chǎn)品的圖標(biāo)設(shè)計(jì)用色就會(huì)很克制,形狀也不會(huì)過于圓潤(rùn)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
七、5個(gè)圖標(biāo)網(wǎng)站推薦
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的圖標(biāo)庫(kù),應(yīng)該也是受眾最多的一個(gè)圖標(biāo)下載網(wǎng)站,給我們平時(shí)工作提效不少,造福了不少的設(shè)計(jì)師。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字節(jié)跳動(dòng)旗下的一款圖標(biāo)下載網(wǎng)站,它可以在線把一個(gè)圖標(biāo)實(shí)現(xiàn)多種風(fēng)格的切換,線性、面線、線面結(jié)合,并且線的粗細(xì)大小可以調(diào)節(jié),非常的方便。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在線編輯的圖標(biāo)網(wǎng)站,涵蓋了常用的一些圖標(biāo),可以調(diào)節(jié)線條的粗細(xì)和大小,導(dǎo)出的格式是SVG。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的優(yōu)點(diǎn),我覺得是造型夠豐富,滿足你有時(shí)候無法腦補(bǔ)的痛點(diǎn)。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的優(yōu)點(diǎn)是有273,858個(gè)免費(fèi)的圖標(biāo)庫(kù)和插畫庫(kù)供大家選擇,儲(chǔ)備夠豐富。
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
八、圖標(biāo)的命名規(guī)范
圖標(biāo)一般有四種狀態(tài),正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態(tài),一個(gè)好的命名習(xí)慣會(huì)給自己的合作搭檔帶來很好的體驗(yàn),通常在寫界面的時(shí)候,前端都是用英文對(duì)元素進(jìn)行命名的,這里我列舉一下我經(jīng)常合作同事的一個(gè)命名規(guī)范,供大家參考:
模塊-類別-功能-狀態(tài)
例如:Nav_button_message_sel
 
一篇文章帶你秒懂圖標(biāo)設(shè)計(jì)
 
 
 
 
 
總結(jié):
在深入探索了圖標(biāo)設(shè)計(jì)的豐富世界之后,我相信大家未來能夠根據(jù)不同的場(chǎng)合挑選出恰當(dāng)?shù)膱D標(biāo)風(fēng)格和樣式。通過持續(xù)的總結(jié)和歸納,我對(duì)圖標(biāo)設(shè)計(jì)的理解也變得更加深刻。雖然這份總結(jié)可能還有待完善之處,請(qǐng)大家多多海涵,期待在下一篇文章中再次與大家相見。
 
 
 
 
 


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

不錯(cuò),這些設(shè)計(jì)讓我開眼啦!

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

有時(shí)候創(chuàng)意就體現(xiàn)在很細(xì)節(jié)的局部,不一定是多么驚人的想法,只要一個(gè)細(xì)微的差異,就能拿捏用戶的情緒。一些簡(jiǎn)單的設(shè)計(jì)處理,只要讓用戶多看幾眼,就能實(shí)現(xiàn)設(shè)計(jì)目的。
 
本期黑馬哥繼續(xù)為大家分享一些不錯(cuò)的設(shè)計(jì)案例,希望這些設(shè)計(jì)思路可以給你開眼,帶給你更多創(chuàng)作靈感。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
一、情感化的打卡設(shè)計(jì)
通過線上打卡已經(jīng)成為眾多業(yè)務(wù)方向的選擇,在便利性的同時(shí)也方便管理與追溯。為了提高用戶的打卡參與度,產(chǎn)品設(shè)計(jì)師也在不斷挖掘更有趣、體驗(yàn)更好的解決方案。
 
作為上班族和家長(zhǎng)們會(huì)用到一些打卡軟件來輔助完成工作或者學(xué)習(xí)等,平時(shí)我也會(huì)經(jīng)常使用釘釘給小孩進(jìn)行課業(yè)打卡。在完成打卡后“我的成果”展示設(shè)計(jì)中,打卡標(biāo)記的設(shè)計(jì)中嵌入系列 IP 形象或者圖形,通過情感化的設(shè)計(jì)提升了成果展示的趣味性,更能激發(fā)小朋友參與打卡的熱度。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
二、底部標(biāo)簽欄的二級(jí)導(dǎo)航設(shè)計(jì)
底部標(biāo)簽欄更便于用戶操作頻繁切換的功能,通常 3~5 個(gè)為最佳,如果遇到超過極限值時(shí)就需要在交互形式上面思考解決方案。
 
在洋蔥學(xué)園 APP 中,體驗(yàn)到一個(gè)底部標(biāo)簽欄帶有二級(jí)導(dǎo)航的設(shè)計(jì)方案,很好的解決了超過極限值的情況。在二級(jí)導(dǎo)航設(shè)計(jì)中強(qiáng)化了字體和添加了圖片背景區(qū)分狀態(tài),以差異化的視覺表現(xiàn)吸引用戶關(guān)注度,以此增加二級(jí)導(dǎo)航的操作率。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
三、圖標(biāo)設(shè)計(jì)的背景化運(yùn)用
圖標(biāo)在產(chǎn)品中主要分為功能性和修飾性,對(duì)產(chǎn)品的操作體驗(yàn)和感官體驗(yàn)都起到了非常重要的作用,圖標(biāo)的運(yùn)用也被深挖到各種業(yè)務(wù)場(chǎng)景中。
 
在嗶哩嗶哩任務(wù)中心欄目中,展示紅包、獎(jiǎng)勵(lì)、積分、獎(jiǎng)品的設(shè)計(jì)中,除了量化的數(shù)字結(jié)合以外,在各自數(shù)據(jù)背景中還添加了圖標(biāo)設(shè)計(jì)。相較于單純的數(shù)據(jù)展示而言,圖標(biāo)背景化的運(yùn)用不僅提升了設(shè)計(jì)的感官度,也助力了業(yè)務(wù)屬性的差異化。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
四、品牌化的彈窗設(shè)計(jì)
彈窗設(shè)計(jì)在圖形創(chuàng)意、視覺表現(xiàn)和造型等方面都有更多發(fā)揮空間,為了提升轉(zhuǎn)化率和降低阻力設(shè)計(jì)帶來的負(fù)面情緒,提升彈窗設(shè)計(jì)的體驗(yàn)感也是至關(guān)重要的。
 
在使用我愛我家 APP 時(shí),發(fā)現(xiàn)新版本的彈窗設(shè)計(jì)造型結(jié)合品牌和業(yè)務(wù)性質(zhì)進(jìn)行設(shè)計(jì),區(qū)別于常規(guī)造型的彈窗表達(dá)。品牌化的探索可以強(qiáng)化用戶對(duì)產(chǎn)品的品牌記憶度,深化用戶粘性。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
五、色彩豐富的卡片式設(shè)計(jì)
卡片式設(shè)計(jì)是近些年非常流行的 UI 趨勢(shì)之一,卡片式設(shè)計(jì)無論在視覺表現(xiàn)力還是造型層面都呈現(xiàn)出了眾多案例,簡(jiǎn)單的形式被賦予了各式各樣的表達(dá)。
 
最近發(fā)現(xiàn)了一個(gè)色彩豐富的卡片式設(shè)計(jì)案例,相較于常規(guī)的白色卡片而言,嘀嗒出行的設(shè)計(jì)中給帶有描邊的卡片添加了局部突出部位作為背景。在色彩漸變的強(qiáng)化中,不僅使得卡片結(jié)構(gòu)化,也體現(xiàn)出了青春活潑的感官氛圍。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
六、動(dòng)態(tài) IP 強(qiáng)化功能關(guān)注度
品牌 IP 在產(chǎn)品設(shè)計(jì)中的運(yùn)用已經(jīng)逐步普及,提升情感化設(shè)計(jì)的同時(shí),也是助力品牌化的關(guān)鍵。
 
在掌上生活 APP 設(shè)計(jì)中,為了突出“服務(wù)大廳”入口的曝光度,采用動(dòng)態(tài) IP 來強(qiáng)化該功能的關(guān)注度。動(dòng)態(tài)化的小招喵更有吸引力,強(qiáng)化功能的同時(shí)也讓用戶感受到輕松愉悅,提升了產(chǎn)品設(shè)計(jì)的情感化體驗(yàn)值。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
七、情感化的用戶反饋設(shè)計(jì)
用戶反饋是提高忠誠(chéng)度和采集數(shù)據(jù)的關(guān)鍵,為了提高用戶反饋的意愿度,從情感化設(shè)計(jì)或者互動(dòng)性等方面都在不斷探索。
 
通過餓了么訂餐之后,當(dāng)配送員完成送達(dá)時(shí),會(huì)彈窗提示用戶是否已收到商品。通過表情化的圖標(biāo)配合文案設(shè)計(jì),情緒化的表達(dá)使得反饋更清晰,更能提升用戶的反饋意愿。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
八、人性化的導(dǎo)向設(shè)計(jì)
地圖軟件的出現(xiàn)改變了大家的出行方式,再也不會(huì)擔(dān)心迷路,可以盡情地走南闖北。隨著產(chǎn)品體驗(yàn)的不斷升級(jí),地圖軟件也越來越人性化,帶給用戶優(yōu)質(zhì)的導(dǎo)航體驗(yàn)。
 
對(duì)于駕駛的用戶來說,如果使用高德地圖提前開始導(dǎo)航會(huì)進(jìn)行人性化的導(dǎo)向,方便導(dǎo)航時(shí)間預(yù)估得更加精準(zhǔn)。點(diǎn)擊“我已上車”即可開始導(dǎo)航,讓導(dǎo)航體驗(yàn)變得更加人性化。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
九、動(dòng)態(tài)頭像設(shè)置
為了提升預(yù)設(shè)內(nèi)容的體驗(yàn)度,針對(duì)一些默認(rèn)的內(nèi)容也在逐步走向情感化設(shè)計(jì)的方向,可以讓用戶感受到更加真實(shí)的操作體驗(yàn)。
 
針對(duì)頭像設(shè)置也從默認(rèn)的灰色人物剪影演變?yōu)閭€(gè)性化的 IP 形象、人偶、真實(shí)人物形象等,為了提升互動(dòng)性,也在提供動(dòng)態(tài)化的解決方案。比如豆包 APP 在給豆包設(shè)置頭像時(shí),設(shè)計(jì)了不同性別的動(dòng)態(tài)頭像,使得頭像表達(dá)更加生動(dòng)形象。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
十、個(gè)性化的界面設(shè)計(jì)
產(chǎn)品設(shè)計(jì)的風(fēng)格越來越多樣化,為了體現(xiàn)差異化的體驗(yàn),個(gè)性化的界面設(shè)計(jì)也是層出不窮。
 
最近在點(diǎn)餐時(shí)體驗(yàn)到一個(gè)設(shè)計(jì)風(fēng)格非常個(gè)性化的小程序,名字叫:WHAT TO EAT。區(qū)別于別的點(diǎn)餐類產(chǎn)品,該產(chǎn)品設(shè)計(jì)風(fēng)格以線性插畫風(fēng)結(jié)合,非常有個(gè)性化。不僅強(qiáng)化了自身品牌感,也深化了用戶的記憶點(diǎn)。
不錯(cuò),這些設(shè)計(jì)讓我開眼啦!
 
 
 
 
小結(jié)
優(yōu)秀的設(shè)計(jì)細(xì)節(jié)可以幫助我們打開禁錮的思維,創(chuàng)作出更優(yōu)秀的設(shè)計(jì)方案。描述的觀點(diǎn)屬于個(gè)人經(jīng)驗(yàn)總結(jié),不足之處我們繼續(xù)努力改進(jìn)。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY0MDAyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

界面設(shè)計(jì)中【浮標(biāo)】的思考與探索

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

界面設(shè)計(jì)中【浮標(biāo)】的思考與探索
結(jié)合設(shè)計(jì)原則與“智能伴學(xué)助手”項(xiàng)目應(yīng)用浮標(biāo)實(shí)踐展開
-------------
 
目錄:
背景
浮標(biāo)的本質(zhì)與價(jià)值
浮標(biāo)設(shè)計(jì)
一、功能定位與場(chǎng)景適配
二、視覺與交互設(shè)計(jì)
三、技術(shù)實(shí)現(xiàn)優(yōu)化
四、無障礙與倫理考量
五、創(chuàng)新方向探索
結(jié)語
 
-------------
背景:
在教育類移動(dòng)端中接入了大模型AI智能應(yīng)用,為保證這個(gè)應(yīng)用入口可長(zhǎng)期保持并隨時(shí)可見,提高使用率,為用戶提供便利。筆者通過“智能伴學(xué)助手”浮標(biāo)實(shí)踐應(yīng)用,對(duì)后續(xù)制作浮標(biāo)在界面設(shè)計(jì)中思考與探索。
 
浮標(biāo)的本質(zhì)與價(jià)值
1)空間維度突破  
作為界面中的「第三層空間」,浮標(biāo)通過視覺懸浮感打破平面限制(如iOS 的3D視差效果); 在信息過載時(shí)代,提供「隨時(shí)在場(chǎng)」的核心功能入口(如美團(tuán)外賣的懸浮購(gòu)物車,左右動(dòng)效:進(jìn)縮)。
「第三層空間」并「隨時(shí)在場(chǎng)」,也是很好的廣告位和優(yōu)惠營(yíng)銷,一些浮標(biāo)的“小巧思”。
「第三層空間」并「隨時(shí)在場(chǎng)」,也是很好的廣告位和優(yōu)惠營(yíng)銷,一些浮標(biāo)的“小巧思”。
 
2) 認(rèn)知心理學(xué)應(yīng)用
利用格式塔原則中的「閉合性」設(shè)計(jì)半透明遮罩,暗示可交互區(qū)域;通過菲茨定律優(yōu)化點(diǎn)擊熱區(qū),圓形浮標(biāo)直徑建議≥48dp(Android 規(guī)范)。
 
 ---------------------
浮標(biāo)設(shè)計(jì)
就項(xiàng)目中“智能伴學(xué)助手”為例,一個(gè)教育類的應(yīng)用入口,結(jié)合功能定位、用戶體驗(yàn)與技術(shù)實(shí)現(xiàn)浮標(biāo)在界面中的作用。通常浮標(biāo)是一個(gè)懸浮的按鈕或圖標(biāo),用于快速訪問某些功能,從多個(gè)維度探索其在移動(dòng)端界面中的合理呈現(xiàn)方式:
 
 
一、功能定位與場(chǎng)景適配
 
浮標(biāo)的設(shè)計(jì)規(guī)范:
比如尺寸、顏色、位置。通用的設(shè)計(jì)規(guī)范,教學(xué)工具類App的界面設(shè)計(jì),可能涉及圖標(biāo)和布局。
1)尺寸與網(wǎng)格系統(tǒng)
 ◇ 圖標(biāo)尺寸需適配不同屏幕分辨率,常見規(guī)范包括128x128px、96x96px、64x64px等,需根據(jù)界面層級(jí)選擇合適尺寸。
◇ 尺寸一般用1:1比較好或者成倍數(shù),先做大再導(dǎo)出所需要的不同大小比例。
◇ 使用網(wǎng)格系統(tǒng)(如微軟Fluent的24px基礎(chǔ)網(wǎng)格)確保視覺一致性,留出安全邊距(如2px內(nèi)邊距)避免元素溢出。
2)造型與風(fēng)格
◇ 遵循簡(jiǎn)約易懂原則,優(yōu)先采用象形圖或表意符號(hào)增強(qiáng)識(shí)別性。
◇ 保持系列圖標(biāo)風(fēng)格統(tǒng)一,包括線條粗細(xì)(建議1.5px)、圓角弧度(微軟Fluent定義大/中/小三級(jí)圓角)及視覺平衡。
3)適配性
◇ 導(dǎo)出格式需與開發(fā)協(xié)作,推薦PNG序列或SVGA文件以兼顧清晰度與性能。
◇自適應(yīng)考慮不同平臺(tái)的顯示情況。
 
核心功能聚合:
語言學(xué)習(xí)工具類界面將高頻功能(如首頁入口、作業(yè)評(píng)論、學(xué)習(xí)提問)通過浮標(biāo)動(dòng)態(tài)整合,支持長(zhǎng)按展開二級(jí)菜單或滑動(dòng)切換功能模式,吸附于屏幕邊緣。
根據(jù)學(xué)習(xí)階段智能變化:
課前(預(yù)習(xí)):浮標(biāo)展示課程試學(xué)入口或?qū)W習(xí)目標(biāo)設(shè)定;
課中(口語輸出):提供實(shí)時(shí)筆記懸浮窗或標(biāo)記工具;
課后(點(diǎn)評(píng)):將課后作業(yè)及鞏固語言習(xí)得情況的評(píng)價(jià)和自我精進(jìn)。
(外語語言口語學(xué)習(xí)一般模式:盲聽,然后根據(jù)自己的話復(fù)述,理解語言并有效使用語言)
  
首頁入口、作業(yè)評(píng)論、學(xué)習(xí)提問通過浮標(biāo)智能解答點(diǎn)評(píng),通過二級(jí)頁面展開細(xì)則
首頁入口、作業(yè)評(píng)論、學(xué)習(xí)提問通過浮標(biāo)智能解答點(diǎn)評(píng),通過二級(jí)頁面展開細(xì)則
 
二、視覺與交互設(shè)計(jì)
 
以”智能伴學(xué)助手“為例,浮標(biāo)主色是藍(lán)色,企業(yè)主題色也是藍(lán)色,而”智能伴學(xué)助手“浮標(biāo)使用背景一般也以藍(lán)色為主,App主題色也是藍(lán)色,多場(chǎng)景使用適配藍(lán)色背景的靜態(tài)浮標(biāo),又要使浮標(biāo)可以在背景中脫穎而出,在其過程中嘗試藍(lán)+藍(lán)搭配的存在局限性,本身藍(lán)色系較統(tǒng)一。
在同為藍(lán)色后,產(chǎn)生不同「空間」,通過將界面元素分層(如前景圖標(biāo)與背景圖像),營(yíng)造深度感。在浮標(biāo)進(jìn)行描邊隔層,現(xiàn)在很多表情包就是這種模式操作。
微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì),強(qiáng)調(diào)了用戶需求分析、界面簡(jiǎn)潔和交互設(shè)計(jì),這可能對(duì)浮標(biāo)的功能定位有幫助。智能伴學(xué)助手來浮標(biāo)快速訪問。在不同背景下的浮標(biāo)呈現(xiàn)視覺形式,只要點(diǎn)擊即可進(jìn)入應(yīng)用。
微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì),強(qiáng)調(diào)了用戶需求分析、界面簡(jiǎn)潔和交互設(shè)計(jì),這可能對(duì)浮標(biāo)的功能定位有幫助。智能伴學(xué)助手來浮標(biāo)快速訪問。在不同背景下的浮標(biāo)呈現(xiàn)視覺形式,只要點(diǎn)擊即可進(jìn)入應(yīng)用。
 
思考與探索:
浮標(biāo)需要特色,用戶在使用過程中視覺明顯,提高交互。
浮標(biāo)既顯眼又不干擾學(xué)習(xí),所以需要平衡可見性和沉浸感。
浮標(biāo)可以移動(dòng),用戶可以根據(jù)需要調(diào)整位置,避免遮擋內(nèi)容。
現(xiàn)浮標(biāo)是靜態(tài)的,如何嘗試動(dòng)態(tài)浮標(biāo),與用戶有更好的交互體驗(yàn),參與感。
顏色和動(dòng)效方面,冷色調(diào)營(yíng)造學(xué)習(xí)氛圍,浮標(biāo)可以用品牌色,如藍(lán)色或綠色,加上微動(dòng)效吸引注意。樣式用了藍(lán)色圓形浮標(biāo),可能適合教育類應(yīng)用,賦予科技感設(shè)計(jì)。
不同狀態(tài)或者不同頁面下的浮標(biāo)呈現(xiàn)方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮標(biāo)呈現(xiàn),在不同頁面呈現(xiàn)一“系列”
白色背景或者透明背景下的浮標(biāo)呈現(xiàn),在不同頁面呈現(xiàn)一“系列”
 
藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺”糊“,可用白邊的形式將背景和浮標(biāo)的”空間“區(qū)分開
藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺”糊“,可用白邊的形式將背景和浮標(biāo)的”空間“區(qū)分開
 
思考與探索:
配色方案
1)主色選擇
明亮色系:如紅色、橙色、黃色等,能快速吸引用戶注意,適用于促銷活動(dòng)入口。
品牌色融合:在特殊場(chǎng)景中融入品牌LOGO或主色,代表企業(yè)形象和IP,增強(qiáng)品牌認(rèn)知。
2)色彩心理學(xué)應(yīng)用
藍(lán)色:傳遞信任感,適合金融或工具類應(yīng)用。
黑金/黑黃組合:營(yíng)造神秘或高端感,常見于娛樂或奢侈品領(lǐng)域。
紫色+粉紅:適用于美容、女性向產(chǎn)品,傳遞溫柔與創(chuàng)意。
控制色彩平衡,用戶色彩感官可適應(yīng)。
3)對(duì)比與背景
使用中性色(如米色、白色)作為背景,提升信息可讀性。
避免沖突色搭配(如藍(lán)色用于食品類浮標(biāo)易抑制食欲)。
 
思考與探索:
個(gè)性化推薦和交互設(shè)計(jì),可以結(jié)合AI預(yù)測(cè)用戶行為,動(dòng)態(tài)調(diào)整浮標(biāo)的出現(xiàn)時(shí)機(jī),比如在需要提醒作業(yè)時(shí)顯示。主色選用品牌色(如教育藍(lán)/科技紫)強(qiáng)化識(shí)別性。
 
如何設(shè)計(jì)浮標(biāo)會(huì)更好?
如何設(shè)計(jì)浮標(biāo)會(huì)更好?
 
 
創(chuàng)新交互模式思考探索:
1)壓力感知交互  
?安卓壓感屏實(shí)現(xiàn)「輕按預(yù)覽/重按觸發(fā)」分層交互(如華為懸浮球壓感菜單);配合觸覺反饋(Haptic Engine)增強(qiáng)操作確認(rèn)感。
2)動(dòng)態(tài)語義變形
-生物擬態(tài)動(dòng)畫:
?呼吸感懸?。耗M水母游動(dòng)節(jié)奏(振幅0.5-1.2px,頻率0.8Hz)  ;
?點(diǎn)擊時(shí)觸發(fā)粒子擴(kuò)散動(dòng)畫(模擬知識(shí)傳遞意象);
?拖拽時(shí)產(chǎn)生彈性形變(阻尼系數(shù)0.6-0.8),邊緣碰撞后回彈。
- 根據(jù)場(chǎng)景智能改變形態(tài):  
? 閱讀類App中展開為「書簽浮標(biāo)+進(jìn)度條」復(fù)合控件  ;
? 音樂播放器浮標(biāo)可拉伸成波形可視化界面。
 通過多模態(tài)反饋,聽覺,視覺,觸覺多種情感交互。
3) 空間布局策略:
?默認(rèn)位置:置于屏幕右下側(cè)(符合右手持機(jī)習(xí)慣),預(yù)留10%邊距防止誤觸;
?智能避讓:通過內(nèi)容識(shí)別算法,在視頻播放或文本輸入時(shí)自動(dòng)偏移避開核心內(nèi)容區(qū)域;
?AR場(chǎng)景中的空間投影浮標(biāo)(如IKEA Place家具預(yù)覽浮窗)。
位置多為屏幕右下側(cè)
位置多為屏幕右下側(cè)
 
 三、技術(shù)實(shí)現(xiàn)優(yōu)化
 
1)跨端一致性
  •  
    使用React等框架封裝可復(fù)用浮標(biāo)組件,通過響應(yīng)式設(shè)計(jì)適配不同設(shè)備尺寸(如折疊屏展開態(tài)需重新計(jì)算定位錨點(diǎn));
  •  
    采用SVGA格式實(shí)現(xiàn)高性能動(dòng)效,控制幀率在30fps以內(nèi)以降低功耗。
2)AI驅(qū)動(dòng)個(gè)性化
  •  
     基于LSTM模型預(yù)測(cè)用戶行為: 檢測(cè)到長(zhǎng)時(shí)間未操作時(shí),浮標(biāo)縮小并展示激勵(lì)標(biāo)語; 識(shí)別到錯(cuò)題高峰時(shí)段,主動(dòng)彈出知識(shí)點(diǎn)講解入口;
  •  
     支持語音指令交互(如“浮標(biāo)移到左上角”)。
 
四、無障礙與倫理考量
 
1)包容性設(shè)計(jì)
◇為色弱用戶提供高對(duì)比度模式(浮標(biāo)輪廓增加動(dòng)態(tài)描邊,對(duì)比度≥4.5:1);
◇支持頭部追蹤控制浮標(biāo)移動(dòng)(iOS Switch Control技術(shù)適配)。
2)防沉迷機(jī)制(適合未成年類App)
◇連續(xù)使用1小時(shí)后,浮標(biāo)漸變灰色并觸發(fā)休息提醒;
◇家長(zhǎng)端可遠(yuǎn)程設(shè)置浮標(biāo)功能禁用時(shí)段。(未成年學(xué)習(xí)類工具考慮優(yōu)化)
 
五、創(chuàng)新方向探索
 
1)多模態(tài)融合:
◇AR場(chǎng)景中浮標(biāo)投射為3D虛擬助手,支持手勢(shì)交互與空間定位;
◇結(jié)合眼動(dòng)追蹤技術(shù),實(shí)現(xiàn)注視區(qū)域自動(dòng)呼出上下文菜單。
2)情感化表達(dá):
◇根據(jù)學(xué)習(xí)成就解鎖浮標(biāo)皮膚(如連續(xù)打卡7天變?yōu)楠?jiǎng)杯形態(tài));
◇錯(cuò)誤率過高時(shí),浮標(biāo)呈現(xiàn)“鼓勵(lì)模式”(配色變暖+微震動(dòng)反饋)。
學(xué)習(xí)類智能伴學(xué)助手的浮標(biāo)既能作為高效的功能樞紐,又可成為情感化學(xué)習(xí)伴侶。實(shí)際落地時(shí)建議結(jié)合A/B測(cè)試持續(xù)優(yōu)化,例如對(duì)比分析「固定浮標(biāo)」與「場(chǎng)景自適應(yīng)浮標(biāo)」的點(diǎn)擊轉(zhuǎn)化率差異。
 
----------------
 
結(jié)語:
浮標(biāo)不應(yīng)僅是功能載體,更應(yīng)成為:  
- 空間敘事者:通過動(dòng)態(tài)變化講述產(chǎn)品故事;
- 情感連接器:建立用戶與數(shù)字世界的溫度觸點(diǎn);
- 場(chǎng)景預(yù)言家:預(yù)判需求并提供恰到好處的服務(wù)。
 
設(shè)計(jì)師需在「顯性價(jià)值」與「隱形干擾」間找到精妙平衡,讓浮標(biāo)成為提升體驗(yàn)的優(yōu)雅解決方案而非視覺負(fù)擔(dān)。未來可探索腦機(jī)接口的意念控制浮標(biāo)、量子動(dòng)畫渲染等突破性方向。
技術(shù)實(shí)現(xiàn)上,探究代碼示例展示了如何控制浮標(biāo)的移動(dòng),確保不超出屏幕,這可以作為技術(shù)參考應(yīng)用實(shí)際案例中。同時(shí),性能優(yōu)化方面,使用SVGA格式或減少幀數(shù),可能對(duì)動(dòng)效設(shè)計(jì)有幫助。
浮標(biāo)設(shè)計(jì)需要結(jié)合功能定位、用戶行為、視覺設(shè)計(jì)、交互體驗(yàn)和技術(shù)實(shí)現(xiàn),可多進(jìn)行參考不同案例,搜索現(xiàn)有項(xiàng)目,對(duì)比借鑒然后對(duì)新型B端界面有所創(chuàng)新,確保既實(shí)用又不干擾用戶。
還可以利用Ai創(chuàng)新思維,設(shè)計(jì)師可以更快速、高效地生成多種設(shè)計(jì)方案,結(jié)合項(xiàng)目開發(fā)滿足消費(fèi)者對(duì)個(gè)性化、時(shí)尚化的需求。
 


作者:啊海包船打魚
鏈接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

從混沌到有序:設(shè)計(jì)規(guī)范全方位指南

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

從零開始,打造設(shè)計(jì)規(guī)范:設(shè)計(jì)原則、流程與工具的全方位指南
整個(gè)文章我們會(huì)講
 
  •  
    為什么建立設(shè)計(jì)規(guī)范?
  •  
    什么時(shí)候建立設(shè)計(jì)規(guī)范
  •  
    以及具體的設(shè)計(jì)規(guī)范怎么做
 
一、設(shè)計(jì)規(guī)范的目標(biāo)?
首先需要明確設(shè)計(jì)規(guī)范的目標(biāo),也就是為什么建立設(shè)計(jì)規(guī)范,這里包括提高用戶體驗(yàn)、降低開發(fā)成本、提高團(tuán)隊(duì)協(xié)作斜率等。這些目標(biāo)將為后續(xù)的規(guī)范制定提供方向。
還有就是大家都知道,在做項(xiàng)目時(shí)如果沒有明確的目標(biāo)和價(jià)值,是很難推動(dòng)的。
從混沌到有序:設(shè)計(jì)規(guī)范全方位指南
 
 
二、什么時(shí)候建立設(shè)計(jì)規(guī)范?
在項(xiàng)目全面進(jìn)入ui設(shè)計(jì)之前,先設(shè)計(jì)幾個(gè)核心頁面的demo
,確立整體的基礎(chǔ)規(guī)范和設(shè)計(jì)風(fēng)格,把一些基礎(chǔ)的設(shè)計(jì)規(guī)范定義出來,例如
命名、尺寸、間距、顏色、字體、核心控件
等、這樣在開展設(shè)計(jì)的過程中保持一致性和統(tǒng)一性,當(dāng)然,在項(xiàng)目設(shè)計(jì)過程中,UI設(shè)計(jì)規(guī)范也需要根據(jù)實(shí)際情況去調(diào)整補(bǔ)充。
從混沌到有序:設(shè)計(jì)規(guī)范全方位指南
 
 
三、設(shè)計(jì)規(guī)范具體要怎么做?
這里先講一些基礎(chǔ)通用的規(guī)范
3.1、間距
在間距部分我們需要把一些
頁面間距、模塊間距、元素間距
,這些要定義出來
像我平時(shí)在工作中
通常以8px作為基數(shù)
,以此衍生出
8、16、24、32、48、64
,這6個(gè)間距數(shù)值,完全能夠滿足絕大多數(shù)的使用場(chǎng)景。當(dāng)然,針對(duì)信息較少的頁面也會(huì)使用到
120、160、200...其他間距數(shù)值,例如缺省頁、登錄頁面等。出去這些特殊頁面,基本上通用的就上面那6個(gè)就足夠了
從混沌到有序:設(shè)計(jì)規(guī)范全方位指南
 
 
 
3.2、顏色規(guī)范
我們要先把主色調(diào)和輔助色,通常主色都是根據(jù)
品牌形象和目標(biāo)用戶
的需求選擇。
拿在顏色的定義中需要注意以下幾點(diǎn)
1、使用色彩心理學(xué):
根據(jù)不同的顏色和情感聯(lián)想,選擇適合的顏色來傳達(dá)品牌形象和用戶體驗(yàn)。例如,藍(lán)色通常被認(rèn)為具有專業(yè)、信任和穩(wěn)定的感覺,而紅色則具有激情、活力和創(chuàng)新的聯(lián)想。
 
2、建立層次結(jié)構(gòu):
使用顏色的飽和度和明度來建立層次結(jié)構(gòu)。將重要的設(shè)計(jì)元素設(shè)置為高飽和度和明亮的顏色,使其在頁面上突出顯示,而將次要的設(shè)計(jì)元素設(shè)置為低飽和度和較暗的顏色。
3、避免使用過多的顏色:
過多的顏色可能會(huì)使頁面顯得混亂和難以聚焦。在設(shè)計(jì)過程中,盡量使用有限的顏色組合,并且要避免使用過多的對(duì)比色或互補(bǔ)色。
從混沌到有序:設(shè)計(jì)規(guī)范全方位指南
 
 
3.3、文字規(guī)范
我們需要把
字體、字號(hào)、顏色、行距
、這些給定義清楚,有規(guī)律的大小字號(hào)更有利于閱讀,(另外要注意一些特殊字體的版權(quán)問題)
常用的字體大小
20px、24px、28px、32px、36px,44px,48px,且都是間隔4px
,設(shè)計(jì)師需要根據(jù)具體場(chǎng)景去決定字體大小,以確保用戶能夠輕松閱讀和理解界面信息層級(jí)比重。
 
3.4、UI圖標(biāo)規(guī)范
圖標(biāo)是UI設(shè)計(jì)的重要組成部分,它可以使圖標(biāo)看起來更加
美觀、易用、統(tǒng)一和有吸引力
。也傳達(dá)著整個(gè)UI視覺風(fēng)格調(diào)性,和系統(tǒng)功能的作用。
在圖標(biāo)設(shè)計(jì)上一定要簡(jiǎn)單清晰,定義規(guī)范時(shí)要對(duì)
圖標(biāo)的大小、圓角、線條粗細(xì)、等有明確的指示
,在繪制的時(shí)候我們可以制定自己的
網(wǎng)格規(guī)范
,以便參考。
從混沌到有序:設(shè)計(jì)規(guī)范全方位指南
 
 
3.5、按鈕
按鈕尺寸:
一般來說,按鈕的尺寸應(yīng)該能夠適應(yīng)不同的屏幕尺寸和分辨率,并且應(yīng)該能夠突出顯示。
按鈕形狀:
應(yīng)該具有清晰的輪廓和圓潤(rùn)的邊角,圓角大小是多少
按鈕顏色:
按鈕的顏色應(yīng)該與整體UI設(shè)計(jì)風(fēng)格相協(xié)調(diào),并且應(yīng)該能夠突出主題和重點(diǎn)信息。一般主按鈕大多使用主題色。
按鈕文本:
按鈕的文本應(yīng)該簡(jiǎn)短明了,并且應(yīng)該能夠清晰地表達(dá)按鈕的功能。還需要定義清楚按鈕中限制的字?jǐn)?shù)。
按鈕內(nèi)邊距:
按鈕的內(nèi)邊距應(yīng)該能夠擴(kuò)大按鈕的可點(diǎn)擊范圍,并且應(yīng)該能夠提高用戶點(diǎn)擊按鈕的準(zhǔn)確性。需要考慮極限情況下,最小應(yīng)該保持多少內(nèi)邊距。
按鈕狀態(tài):
按鈕的狀態(tài)應(yīng)該能夠表達(dá)按鈕的狀態(tài)和功能。一般來說,按鈕的狀態(tài)包括正常狀態(tài)、點(diǎn)擊狀態(tài)等。
從混沌到有序:設(shè)計(jì)規(guī)范全方位指南


作者:考思考
鏈接:https://www.zcool.com.cn/article/ZMTYxMjA4OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

 
在ui設(shè)計(jì)中,卡片是不可避免需要用到的東西。那么什么是卡片?卡片有哪些類型?
本次就以此問題為出發(fā)點(diǎn),為大家詳細(xì)介紹ui設(shè)計(jì)中的卡片設(shè)計(jì)。
 
 
一、設(shè)計(jì)基礎(chǔ)
在開始設(shè)計(jì)之前,我們需要先了解卡片的定義、特點(diǎn)以及應(yīng)用原則。
 
 
1.卡片的定義:
卡片設(shè)計(jì)是一種界面設(shè)計(jì)模式,其作用是使用卡片來作為界面信息展示的基本單元。卡片設(shè)計(jì)通過將信息分割成獨(dú)立的、可管理的部分,使整個(gè)界面看起來更加簡(jiǎn)潔,讓用戶能夠更容易在瀏覽時(shí)理解內(nèi)容,找到自己需要的信息及商品。
 
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
2.卡片的特點(diǎn):
在ui的設(shè)計(jì)卡片的過程中,我們要合理的將卡片的特點(diǎn)發(fā)揮出來,卡片主要有三個(gè)特點(diǎn)。
 
 
01.瓷片信息模塊化:
ui卡片的作用是將信息呈現(xiàn)為獨(dú)立的卡片單元,方便用戶理解和管理信息。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
02.視覺吸引力:
視覺吸引力,顧名思義就是通過精心設(shè)計(jì)的視覺元素和顏色,讓用戶眼前一亮吸引用戶注意,以此提升用戶的使用體驗(yàn)。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
03.強(qiáng)交互性:
一個(gè)合格的ui卡片在設(shè)計(jì)時(shí)需要具有豐富的交互功能,如點(diǎn)擊、滑動(dòng)等和用戶實(shí)現(xiàn)“交流”的操作,增強(qiáng)信息傳達(dá)效果和用戶滿意度。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
 
3.卡片的應(yīng)用原則:
在應(yīng)用卡片時(shí),我們要按照卡片的應(yīng)用原則來保證卡片不會(huì)在運(yùn)用時(shí)出現(xiàn)違和感。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
01.一致性:
保持卡片的一致性,包括樣式布局和交互方式。
 
02.信息層級(jí):
信息的重要性和層級(jí)設(shè)計(jì)讓重要的信息更加顯眼。
 
03.簡(jiǎn)潔清晰:
卡片內(nèi)容簡(jiǎn)潔明了,用戶易于理解和消化。
 
04.可交互性:
提供一定的交互功能,增加用戶的使用體驗(yàn)。
 
05.響應(yīng)式設(shè)計(jì):
適應(yīng)不同的設(shè)備和屏幕尺寸,確保好的顯示效果。
 
06.視覺吸引力:
通過顏色和設(shè)計(jì)吸引人的視覺效果。
 
 
 
 
二、卡片分類
正所謂人以類聚,物以群分??ㄆ部梢苑譃椴煌念愋?,大致來分,卡片可以分為三個(gè)類型。
 
 
 
1.封面卡片:
一本書,好的封面就可以吸引讀者。封面卡片作為用戶接觸到的第一個(gè)卡片,自然是非常重要。
 
封面卡片可以根據(jù)不同的項(xiàng)目軟件來改變,比方實(shí)景類,如商品、風(fēng)景等;或者是影視類,如動(dòng)漫、影視、直播等。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
2.普通卡片:
普通卡片比較常用的三種設(shè)計(jì)形式分別為圓角卡片、破形卡片、多張重疊。這樣設(shè)計(jì)可以形成差異化,增加設(shè)計(jì)感。
 
 
 
01.圓角卡片:
一般普通的卡片大多數(shù)為直角,而圓角卡片的出現(xiàn)則是為了適用不同的屏幕,同時(shí)圓角的大小不一,可以增強(qiáng)視覺沖擊力,形成差異化,吸引注意力。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
02.破形卡片:
破形卡片是在界面中,用不規(guī)則的形狀做出來的卡片,能夠更好的突出重要信息。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
03.多張疊加:
在設(shè)計(jì)過程中,如果想要卡片看起來更加立體,設(shè)計(jì)感更強(qiáng)可以用到多張疊加。這樣一來,整個(gè)卡片的層次感也更加強(qiáng)烈。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
 
 
 
 
 
3.真實(shí)物體轉(zhuǎn)化成的卡片:
在設(shè)計(jì)過程中,設(shè)計(jì)師可以根據(jù)現(xiàn)實(shí)中存在的物體將其轉(zhuǎn)化成卡片。通過這樣的轉(zhuǎn)變,可以讓用戶有更加真實(shí)的使用體驗(yàn)。
 
 
01.優(yōu)惠券類卡片:
在日常生活中,優(yōu)惠券隨處可見,人們對(duì)于優(yōu)惠券的作用也心知肚明。那么將優(yōu)惠券轉(zhuǎn)化成卡片,則能讓用戶更直觀的體驗(yàn)到優(yōu)惠力度。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
02.銀行卡類卡片:
當(dāng)今社會(huì)銀行卡幾乎是每個(gè)成年人必備的物品,將銀行卡轉(zhuǎn)化成卡片,用戶在使用手機(jī)銀行時(shí)會(huì)多一點(diǎn)舒心。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
 
 
03.音樂類卡片:
將現(xiàn)實(shí)中的cd唱片轉(zhuǎn)化成卡片,能夠讓用戶有更好的體驗(yàn)。
身為一個(gè)ui設(shè)計(jì)師,為什么我連一個(gè)卡片設(shè)計(jì)都設(shè)計(jì)不好!
 
 
總的來說,將現(xiàn)實(shí)中習(xí)以為常的物品轉(zhuǎn)化為卡片,能夠更好的和用戶產(chǎn)生共情。
天下沒有不散的宴席,來到這里,又到了再見的時(shí)候。
 
今天的卡片分享就到此結(jié)束,為了下一次的重逢不在遙遠(yuǎn),關(guān)注我,下次再見!



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

為什么我沒有這樣的設(shè)計(jì)思維呢?

天宇 設(shè)計(jì)思維

設(shè)計(jì)能力的強(qiáng)弱取決于設(shè)計(jì)思維,技能操作層面的不足可以通過反復(fù)訓(xùn)練,在短時(shí)間內(nèi)即可彌補(bǔ);而設(shè)計(jì)思維需要通過長(zhǎng)時(shí)間的熏陶,還要找對(duì)學(xué)習(xí)的方法和途徑。很多設(shè)計(jì)師工作五年甚至十年,但是設(shè)計(jì)能力依然比較普通,很大程度上還是設(shè)計(jì)思維能力的缺失。
 
我們也可以通過體驗(yàn)和分析優(yōu)秀的案例來提升,學(xué)習(xí)優(yōu)秀設(shè)計(jì)師的設(shè)計(jì)思路和處理技巧,以此來強(qiáng)化自我專業(yè)思維。今天黑馬哥繼續(xù)給大家分享一些優(yōu)秀的設(shè)計(jì)案例,希望可以助力提高大家的設(shè)計(jì)思維。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
體驗(yàn)?zāi)夸?/div>
 
一、不一樣的返回設(shè)計(jì)
二、可以切換大小的設(shè)計(jì)布局
三、做減法的設(shè)計(jì)表達(dá)
四、品牌動(dòng)態(tài)渲染春節(jié)氛圍
五、品牌插畫表現(xiàn)界面置底
六、動(dòng)態(tài)刷新紅包設(shè)計(jì)
七、涂鴉風(fēng)格的流程設(shè)計(jì)
八、情感化閃屏設(shè)計(jì)
九、圖標(biāo)設(shè)計(jì)的翻轉(zhuǎn)動(dòng)效
十、蛇年主題圖標(biāo)設(shè)計(jì)
 
 
 
一、不一樣的返回設(shè)計(jì)
 
進(jìn)入層級(jí)界面可以通過返回回到上一級(jí)操作場(chǎng)景,通常都是以箭頭圖標(biāo)、返回文字組合設(shè)計(jì)或者獨(dú)立設(shè)計(jì)。
 
最近在體驗(yàn)喵喵記賬 App 時(shí),其返回設(shè)計(jì)以“門”作為創(chuàng)意元素,進(jìn)入層級(jí)界面時(shí)門會(huì)打開,點(diǎn)擊返回時(shí)會(huì)有關(guān)門的動(dòng)作。以開關(guān)門的方式表達(dá)進(jìn)入和返回狀態(tài),形象化的表達(dá)了不一樣的返回設(shè)計(jì),呈現(xiàn)出不同的設(shè)計(jì)解決方案。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
二、可以切換大小的設(shè)計(jì)布局
 
為了滿足更多用戶的體驗(yàn)需求,設(shè)計(jì)布局的靈活性變得越來越重要,需要提供多種選擇便于操作。
 
在藏書館 App 中,針對(duì)書庫(kù)分類的展示設(shè)計(jì),用戶可以通過點(diǎn)擊切換呈現(xiàn)不同大小的樣式。文字和書籍封面圖都會(huì)隨著切換而縮放,方便滿足不同用戶的瀏覽需求,提升用戶對(duì)產(chǎn)品的操作體驗(yàn)度。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
三、做減法的設(shè)計(jì)表達(dá)
 
隨著互聯(lián)網(wǎng)環(huán)境的發(fā)展,提供給大家的產(chǎn)品選擇越來越豐富,而產(chǎn)品設(shè)計(jì)也從最初的功能性服務(wù)擴(kuò)展到綜合性服務(wù)。功能變得越來越多,商業(yè)氛圍也十分濃厚,有種眼花繚亂的感覺。
 
最近在使用美團(tuán)外賣柜小程序時(shí),其簡(jiǎn)約的設(shè)計(jì)印象深刻。存取功能一目了然,沒有多余的設(shè)計(jì)干擾體驗(yàn),操作指引也是簡(jiǎn)單易懂。有時(shí)候減法的設(shè)計(jì)才是最好的用戶體驗(yàn),與其布局一堆功能或者服務(wù),反而增加了用戶的操作成本。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
四、品牌動(dòng)態(tài)渲染春節(jié)氛圍
 
春節(jié)氛圍感營(yíng)造對(duì)于品牌來說至關(guān)重要,是渲染春節(jié)主題和增強(qiáng)用戶親和力的關(guān)鍵,營(yíng)造方式也是豐富多樣。
 
其中夸克 App 通過品牌 LOGO 結(jié)合春節(jié)主題進(jìn)行動(dòng)態(tài)設(shè)計(jì),不僅突出春節(jié)氛圍,動(dòng)效過渡也非常流暢。夸克經(jīng)常會(huì)以品牌動(dòng)態(tài)化的形式表現(xiàn)節(jié)日或者特殊活動(dòng)主題,設(shè)計(jì)融合性處理得十分細(xì)致。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
五、品牌插畫表現(xiàn)界面置底
 
界面設(shè)計(jì)過程中,對(duì)于到達(dá)底部的處理方式通常有品牌表達(dá)、公司名稱、版權(quán)信息、情感化內(nèi)容表達(dá)等。
 
最近在體驗(yàn)我要做計(jì)劃 App 時(shí),界面設(shè)計(jì)底部以品牌 IP 形式的插畫進(jìn)行表達(dá),不僅符合整體設(shè)計(jì)風(fēng)格,也使得界面設(shè)計(jì)更有趣味性。整個(gè)產(chǎn)品設(shè)計(jì)也以插畫風(fēng)格為主,是一個(gè)很有個(gè)性化的產(chǎn)品。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
六、動(dòng)態(tài)刷新紅包設(shè)計(jì)
 
結(jié)合刷新設(shè)計(jì)賦予更多功能或者服務(wù),已經(jīng)成為二層樓設(shè)計(jì)的首選。
 
最近在體驗(yàn)美團(tuán)外賣時(shí),首頁下拉刷新會(huì)出現(xiàn)紅包樣式的動(dòng)效表達(dá),隨著下拉的程度不同,紅包金額會(huì)隨之增加或者減少。動(dòng)態(tài)刷新紅包設(shè)計(jì)更能吸引用戶繼續(xù)體驗(yàn),進(jìn)而進(jìn)入二層樓參與活動(dòng),趣味性的表達(dá)方式很有吸引力,也以此方式促進(jìn)了用戶參與感。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
七、涂鴉風(fēng)格的流程設(shè)計(jì)
 
隨著同質(zhì)化設(shè)計(jì)的現(xiàn)象,產(chǎn)品設(shè)計(jì)也在不斷嘗試更具差異化的風(fēng)格。結(jié)合插畫風(fēng)格表達(dá)界面設(shè)計(jì),變得越來越普及。
 
在我要做計(jì)劃 App 設(shè)計(jì)中,整體風(fēng)格以涂鴉插畫風(fēng)為主,完善做計(jì)劃流程設(shè)計(jì)也以涂鴉風(fēng)格進(jìn)行設(shè)計(jì)。不僅風(fēng)格特征更突出,也能吸引用戶的關(guān)注度,促進(jìn)完善計(jì)劃流程。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
八、情感化閃屏設(shè)計(jì)
 
閃屏設(shè)計(jì)分為品牌感方向和營(yíng)銷廣告等方向,其中閃屏廣告較為常見,不過也有品牌啟動(dòng)頁和閃屏廣告相結(jié)合的方式。
 
閃屏設(shè)計(jì)的形式也非常多樣,其中情感化的方向以 IP 形象和情感故事性插畫為主。比如喜馬拉雅閃屏設(shè)計(jì)便以 IP 形象的各種動(dòng)態(tài)化形式呈現(xiàn),畫面非固定表達(dá)形式,每次重新打開都會(huì)有所不同,IP 動(dòng)態(tài)也非常俏皮可愛。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
九、圖標(biāo)設(shè)計(jì)的翻轉(zhuǎn)動(dòng)效
 
圖標(biāo)動(dòng)效的運(yùn)用非常普及,以往見過的案例都是動(dòng)效的形式表達(dá)圖標(biāo)的不同形式感,但是圖標(biāo)的含義不會(huì)受到影響。
 
最近在體驗(yàn)盒馬 App 時(shí),首頁金剛區(qū)圖標(biāo)以翻轉(zhuǎn)動(dòng)效進(jìn)行表達(dá),既突出春節(jié)氛圍也賦予圖標(biāo)兩層含義。在保留圖標(biāo)本身功能含義的同時(shí),通過翻轉(zhuǎn)另一面表達(dá)出不同的意思,也是一個(gè)新的圖標(biāo)動(dòng)效表達(dá)思維。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
十、蛇年主題圖標(biāo)設(shè)計(jì)
 
蛇年春節(jié)主題設(shè)計(jì)在產(chǎn)品中的運(yùn)用很豐富,其中在圖標(biāo)設(shè)計(jì)中的運(yùn)用是最普遍的,廣泛運(yùn)用于應(yīng)用圖標(biāo)、金剛區(qū)圖標(biāo)、底部標(biāo)簽欄圖標(biāo)和其他功能圖標(biāo)等。
 
圖標(biāo)設(shè)計(jì)的運(yùn)用形式很多,比如蛇年主題文案嵌入、生肖蛇相關(guān)元素設(shè)計(jì)、春節(jié)元素設(shè)計(jì)等。表現(xiàn)形式以立體質(zhì)感居多,配色以突出春節(jié)氛圍為主。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
小結(jié)
 
設(shè)計(jì)思維除了依靠自身專業(yè)基礎(chǔ)以外,通過不斷學(xué)習(xí)分析優(yōu)秀的案例也能不斷提升,希望本期的案例分享可以帶給大家更多靈感。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDc0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

在你的設(shè)計(jì)中營(yíng)造“愉悅感”

天宇 用戶研究

引言:
當(dāng)我們談及用戶體驗(yàn)的時(shí)候,“
愉悅
”這個(gè)詞是最常聽到的一個(gè)形容詞。讓用戶愛上一個(gè)產(chǎn)品,“愉悅”的用戶體驗(yàn)就是核心要素,這也是設(shè)計(jì)力圖達(dá)到的效果。
在一個(gè)產(chǎn)品的體驗(yàn)中,使用戶在情感上感到愉悅的時(shí)間節(jié)點(diǎn)是不固定的(large or small),合理的設(shè)計(jì)能夠滿足用戶在情感上的需求。
恰到好處的成就感和讓人感到驚喜的細(xì)節(jié)能夠喚起人們內(nèi)心的幸福。
我們總會(huì)對(duì)那些體現(xiàn)著愉悅性的設(shè)計(jì)細(xì)節(jié)贊賞有加
我們總會(huì)對(duì)那些體現(xiàn)著愉悅性的設(shè)計(jì)細(xì)節(jié)贊賞有加
 
分享目錄:
一、深度愉悅與表面愉悅
二、了解 Kano 模型
三、只有滿足基本期望才能讓用戶產(chǎn)生愉悅情感
四、時(shí)機(jī)
五、負(fù)面效應(yīng)
六、總結(jié)
 
一、深度愉悅與表面愉悅
愉悅分類
愉悅分類
 
從根本上來說,創(chuàng)造卓越的用戶體驗(yàn)是獲得深度愉悅的先決條件。
而現(xiàn)在僅僅聚焦于產(chǎn)品功能、實(shí)用性和特色已經(jīng)遠(yuǎn)遠(yuǎn)不夠了,我們要在這之上考慮更多東西。為了能夠在市場(chǎng)上實(shí)現(xiàn)差異化并進(jìn)行自我提升來超越競(jìng)爭(zhēng)對(duì)手,我們需要專注于提升用戶滿足感、興奮感與參與感。這事先就應(yīng)該被考慮進(jìn)設(shè)計(jì)過程中,而不應(yīng)該擱置到過程結(jié)束之后再考慮。
這對(duì)于整個(gè)體驗(yàn)是非常特別的部分,就像招牌菜的秘方,故事的反轉(zhuǎn)。
  1.  
    深度愉悅是你創(chuàng)造終身客戶價(jià)值的方式。
  2.  
    深度愉悅是你讓你的產(chǎn)品融入用戶日常生活的方式。
  3.  
    深度愉悅是你與客戶建立心理安全的方式。
 
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
二、了解 Kano 模型
東京理工大學(xué)狩野紀(jì)昭(Noriaki Kano)教授于1979年發(fā)表了《質(zhì)量的保健因素和激勵(lì)因素》,并與1984年1月18日正式發(fā)表《魅力質(zhì)量與必備質(zhì)量》,標(biāo)志著KANO模式的確立。
因?yàn)樵诨ヂ?lián)網(wǎng)圈內(nèi)貼合度很高,可以對(duì)需求進(jìn)行分類、優(yōu)先排序。也就變成了產(chǎn)品經(jīng)理的方法論之一。
五大需求類型
五大需求類型
 
1、基本型需求
基本型需求也稱為必備性需求、理所當(dāng)然需求,是用戶對(duì)企業(yè)提供的產(chǎn)品或服務(wù)因素的基本要求。它是用戶認(rèn)為產(chǎn)品“必須有”的屬性或功能,當(dāng)基本性需求滿足時(shí),用戶不一定會(huì)很滿意;但如果沒有被滿足,用戶就會(huì)很不滿意。
對(duì)于這類需求,企業(yè)的做法就是注重不要在這方面失分,不斷地調(diào)查和了解用戶需求,并通過合適的方法在產(chǎn)品中體現(xiàn)這些要求。
2、期望型需求
期望型需求也稱為意愿型需求。是指用戶的滿意狀況與需求程度成比例關(guān)系的需求,即這類需求做的越好,用戶的滿意度就會(huì)越高。雖然期望型需求沒有基本型需求那樣苛刻,要求提供的產(chǎn)品或服務(wù)比較優(yōu)秀,在互聯(lián)網(wǎng)圈內(nèi),也成為“癢點(diǎn)”,即體現(xiàn)企業(yè)競(jìng)爭(zhēng)能力的表現(xiàn)。企業(yè)能通過這類需求來提升產(chǎn)品的獨(dú)特性與質(zhì)量,超過競(jìng)爭(zhēng)對(duì)手。
3、魅力型需求
魅力型需求也稱興奮型需求,是指提供給用戶的完全出乎意料的產(chǎn)品功能或服務(wù),使用戶產(chǎn)生驚喜感的需求。雖然沒有這個(gè)功能不受影響,但是提供之后會(huì)讓用戶非常的興奮和滿意。與期望型需求區(qū)別之處在于,魅力型需求是指數(shù)型的曲線,而期望型需求是線性曲線。
4、無差異型需求
無差異型需求是指就是你有沒有這個(gè)功能用戶都不太在意,對(duì)用戶沒有影響。
5、魅力型需求
反向型需求又稱逆向型需求,指引起強(qiáng)烈不滿的、導(dǎo)致滿意度降低的需求功能。提供了反向型需求反而會(huì)使用戶滿意度降低。
KANO模型-四象限圖
KANO模型-四象限圖
 
Kano發(fā)現(xiàn),如果你不滿足基本需求,客戶就不會(huì)對(duì)體驗(yàn)和性能感到滿意,而愉悅感則毫無意義。他還指出,隨著時(shí)間的推移和曝光度的提高,愉悅感可以成為性能需求,而性能需求可以成為基本需求。 想想 Twitter 的下拉刷新模式,或者 Slack 或 Discord 中的斜線命令。這些功能已經(jīng)從令人興奮的功能迅速轉(zhuǎn)變?yōu)榛A(chǔ)的UI模式,當(dāng)它們不存在(或無法按預(yù)期工作)時(shí),會(huì)讓人不滿意。
 
 
三、只有滿足基本期望才能讓用戶產(chǎn)生愉悅情感
我們把 “令人沮喪”和 “令人愉悅”作為一個(gè)維度的兩端來評(píng)估一個(gè)設(shè)計(jì)。而這個(gè)維度的中點(diǎn),意味著設(shè)計(jì)既不令人感到沮喪但也不令人感到愉悅,它還好,它可以正常運(yùn)行,它能用,它實(shí)用,它并沒有令人難忘或者脫穎而出。它提供的是表現(xiàn)一般 平平無奇的用戶體驗(yàn)。
把一個(gè)設(shè)計(jì)從令人沮喪移動(dòng)到維度的中點(diǎn), 意味著我們需要了解我們的用戶并達(dá)到他們的預(yù)期和需求。要去掉任何能夠讓用戶產(chǎn)生“難用”和“困惑”的因素,解決導(dǎo)致處理工作任務(wù)變慢。
Aaron Walter-用戶需求的5個(gè)等級(jí)
Aaron Walter-用戶需求的5個(gè)等級(jí)
 
1、解決用戶的失敗操作
我們經(jīng)常會(huì)遇到類似的問題,項(xiàng)目里的每一個(gè)人都急于想設(shè)計(jì)出“理想”的視覺界面。然而,想要達(dá)到所謂的“完美”效果,往往癡人說夢(mèng)。我們都知道,人與人之間存在極大的差異,即使我們的產(chǎn)品功能再完美,用戶在使用產(chǎn)品的時(shí)候,哪怕只是遇到一個(gè)小小的障礙或斷層,就會(huì)對(duì)產(chǎn)品的印象大打折扣。因此,我們應(yīng)該將重點(diǎn)關(guān)注在解決用戶的痛點(diǎn),這一點(diǎn)很重要,可以讓我們避免陷入“理想”設(shè)計(jì)和“完美”產(chǎn)品的漩渦之中,可以將影響面降到最低。
 
2.簡(jiǎn)化用戶的復(fù)雜操作
過度密集是設(shè)計(jì)的最大阻礙。過多的元素會(huì)讓用戶感受到困擾,極大破壞用戶體驗(yàn)。過度密集的設(shè)計(jì)涉及到界面中元素的數(shù)量,也涉及到視覺特征的多樣性。過多的顏色和形狀組合肯定會(huì)產(chǎn)生混亂。堅(jiān)持美學(xué)的連貫、整體表達(dá),形成讓用戶易于理解的設(shè)計(jì)語言。
互聯(lián)網(wǎng) 30 年,桌面和移動(dòng)界面的解決方案都已經(jīng)標(biāo)準(zhǔn)化。符合用戶習(xí)慣,就能夠加速產(chǎn)品的學(xué)習(xí)周期。例如,用戶習(xí)慣右上角看到個(gè)人資料或登錄按鈕。移動(dòng)端搜索欄應(yīng)該在列表的頂部。
這個(gè)規(guī)則不僅適用于單個(gè)界面元素以及元素的位置,也適用于整個(gè)頁面或功能。如果忽略這些用戶行為模式,出乎尋常的設(shè)計(jì)可能會(huì)延長(zhǎng)用戶的學(xué)習(xí)曲線,通常也會(huì)導(dǎo)致失敗。
所有界面元素都可以根據(jù)用戶的優(yōu)先級(jí)來定位??紤]界面元素在用戶執(zhí)行任務(wù)時(shí)的作用,通過強(qiáng)調(diào)不同視覺的手法,我們可以在每一屏中確定界面元素的優(yōu)先級(jí)。字體、顏色、形狀、圖標(biāo)。這能夠幫助用戶遵循流程和界面邏輯行動(dòng)。適當(dāng)?shù)膶⒔缑娣謪^(qū),這能夠幫助用戶劃分關(guān)鍵場(chǎng)景。
當(dāng)用戶使用產(chǎn)品時(shí),就會(huì)在腦海中構(gòu)建一張心智地圖。能夠及時(shí)的提示用戶操作某些特定的場(chǎng)景,提示尋找某些信息和服務(wù)等等。
 
四、時(shí)機(jī)
引起用戶愉悅的體驗(yàn)一般都會(huì)由一個(gè)特殊場(chǎng)景或者特定的客戶觸點(diǎn)觸發(fā),比如等待時(shí)間、消費(fèi)數(shù)據(jù)、升級(jí)過程等等。然而沒有一種通用觸發(fā)情緒手段適用于所有情況。我們所在的市場(chǎng)競(jìng)爭(zhēng)激烈,我們要尋找新的方式使自己在一眾競(jìng)爭(zhēng)者中脫穎而出,同時(shí)為用戶增加價(jià)值是我們一直努力的目標(biāo)。我們都在為同一個(gè)目標(biāo)而努力,即創(chuàng)造有意義的設(shè)計(jì)和用戶體驗(yàn)來和產(chǎn)品建立深層聯(lián)系。
讓用戶看到意料之外的結(jié)果能讓沮喪的情緒轉(zhuǎn)化成愉悅
有許多種方法和途徑可以激活產(chǎn)品的“情緒愉悅”。而 第一步通常都是花費(fèi)時(shí)間去真正了解用戶痛點(diǎn)——找出什么對(duì)用戶來講很重要,并找機(jī)會(huì)填補(bǔ)這些空缺。
1、品牌個(gè)性
在眾多不同的行業(yè)中,你需要一個(gè)能讓你的產(chǎn)品在眾多同類產(chǎn)品里 脫穎而出的品牌命名。
2、微互動(dòng)
關(guān)注用戶的情緒在 UI 交互中有非常重要的作用。我們都知道產(chǎn)品中的 微動(dòng)畫 有多么重要,我們可以利用這些動(dòng)畫來回應(yīng)人們?cè)谄聊磺白龀龅姆磻?yīng)。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
在開發(fā)產(chǎn)品時(shí),把 UI 界面體驗(yàn)變得 更感性,讓用戶覺得屏幕另一端運(yùn)行程序的是 真實(shí)的人類 而不是冰冷的計(jì)算機(jī)。在用戶完成一項(xiàng)個(gè)人目標(biāo)時(shí)給予他們 獎(jiǎng)勵(lì)。例如,即便用戶的收件箱沒有新增郵件時(shí),可以利用動(dòng)畫讓用戶在體驗(yàn)上有更多的 參與感 。
觸感反饋就能體現(xiàn)應(yīng)用軟件在用戶進(jìn)行界面操作時(shí)給予了積極反饋。這樣的舉動(dòng)會(huì)讓頁面加載時(shí)間變得更加有趣,不那么難以忍受。
Twitter 為用戶改進(jìn)了下滑刷新界面。就是這樣簡(jiǎn)單而有效的產(chǎn)品反饋,讓其他數(shù)千款 app 都不約而同地使用了同種交互語言,因?yàn)檫@讓數(shù)據(jù)刷新體驗(yàn)更加流暢。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
3、在用戶沒有抱有期待時(shí)提供幫助
讓用戶感到愉悅的瞬間并不需要高度可視化元素或動(dòng)畫。我們的目的是尋找這樣一個(gè)機(jī)會(huì),當(dāng)他們沒有意識(shí)到或者沒有期待被幫助時(shí),給予用戶幫助。在這個(gè)案例中,正要輸入繁雜冗長(zhǎng)的 Wi-fi 密碼時(shí),界面跳出了“分享密碼”的彈窗。這一舉動(dòng)使用戶分享私密信息變得更安全,更簡(jiǎn)單,同時(shí)用戶體驗(yàn)變得更輕松。
蘋果:分享Wi-Fi密碼
蘋果:分享Wi-Fi密碼
 
4、實(shí)時(shí)追蹤反饋
實(shí)時(shí)追蹤反饋是另一個(gè)行業(yè)變革技術(shù)應(yīng)用。
Uber 的司機(jī)分享應(yīng)用讓用戶在等車的同時(shí),了解更多當(dāng)前情景里的實(shí)時(shí)信息,例如你的司機(jī)是誰、接車車型、該司機(jī)的乘客評(píng)價(jià)等。有了這個(gè)功能,用戶會(huì)認(rèn)為自己有被很好的關(guān)心到。據(jù)我們了解,很多公司也在他們的應(yīng)用產(chǎn)品上使用了這一策略和服務(wù)?,F(xiàn)在你可以在手機(jī)上看到你訂的披薩外賣已經(jīng)走到哪里,大概什么時(shí)候會(huì)被送到。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
5、自動(dòng)填充
驗(yàn)證碼發(fā)送后可以選擇自動(dòng)填入,不需要手動(dòng)輸入操作。
這是另外一個(gè)用戶無需輸入完整信息就可以達(dá)到目的,從而讓用戶的生活變得更加輕松的設(shè)計(jì)。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
五、采取行動(dòng)
設(shè)計(jì)能夠愉悅用戶體驗(yàn)的關(guān)鍵是什么呢?
我該如何在我的產(chǎn)品或者服務(wù)上實(shí)現(xiàn)這些呢?
愉悅用戶情緒需要為體驗(yàn)中的某一關(guān)鍵時(shí)刻而設(shè)計(jì),但是功能性又是放在第一位的。在設(shè)計(jì)過程中,你需要仔細(xì)并系統(tǒng)地處理用戶情緒,而不是事后才考慮到這一點(diǎn)。
 
1、做好調(diào)研,從情緒板開始入手:
從外部和內(nèi)部尋找靈感,不要局限于類似的產(chǎn)品,靈感可以以任何形式出現(xiàn)。
2、確定你所定義產(chǎn)品的使用案例:
找出你的產(chǎn)品能夠讓人感到意料之外驚喜的時(shí)刻。在建立的這種情感聯(lián)系里,你的產(chǎn)品可以在哪些方面獲利?
3、專注于一個(gè)目標(biāo),細(xì)節(jié)很重要:
讓自己專注在一件事上,或者一個(gè)時(shí)刻。如果你同時(shí)想實(shí)現(xiàn)很多事,結(jié)果可能就是和愉悅用戶背道而馳,還可能導(dǎo)致一屏信息過載,并且會(huì)讓你的用戶處于認(rèn)知超載的狀態(tài)。
你可以從以下 3 個(gè)層次入手對(duì)用戶的情感做出反饋:
  •  
    本能層
    (外觀,視覺語言,基調(diào))
  •  
    行為層
    (如何運(yùn)作,表現(xiàn),回應(yīng))
  •  
    反思層
    (如何解釋和理解)
4、傳達(dá)意義即輸出結(jié)果:
為情緒愉悅而設(shè)計(jì)的意義就是為了達(dá)成某一目的。你應(yīng)該為了意義(達(dá)成目的)而做設(shè)計(jì),二者應(yīng)該是因果關(guān)系而非包含關(guān)系。這里的意義比情感更有力量,超越了本身的價(jià)值。
5、設(shè)計(jì)和演示:
和產(chǎn)品設(shè)計(jì)的其他過程一樣,我們應(yīng)該不停的測(cè)試、設(shè)計(jì)、測(cè)試、設(shè)計(jì)。讓“愉悅情緒驅(qū)動(dòng)的設(shè)計(jì)”變得有意義,就是一個(gè)不斷迭代的過程,需要持續(xù)不斷的實(shí)驗(yàn)和改進(jìn)。
 
六、負(fù)面效應(yīng)
當(dāng)然,具有愉悅性的事物在某些情況下同樣會(huì)帶來負(fù)面效應(yīng)。某些笑話可能冒犯到他人,溫馨的廣告可能誤導(dǎo)部分觀眾,即便是可愛的音效也會(huì)因?yàn)檫\(yùn)用不當(dāng)而使人抓狂。
在UX領(lǐng)域,我們總會(huì)對(duì)那些體現(xiàn)著愉悅性的設(shè)計(jì)細(xì)節(jié)贊賞有加;而另一方面,對(duì)其負(fù)面效應(yīng)的了解也將有助于我們更好、更全面的掌握這一設(shè)計(jì)原則,避開陷阱。
1、增加認(rèn)知負(fù)荷與交互成本
一旦運(yùn)用不當(dāng),意在愉悅用戶的界面元素反而可能破壞可用性,增加界面的認(rèn)知負(fù)荷及交互成本。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
這是一個(gè)第一次見會(huì)被驚艷到,但實(shí)際上用起來可能沒這么好的配色網(wǎng)站,界面排版視覺上非常舒服。
當(dāng)隨機(jī)換顏色的時(shí)候,背景會(huì)適配顏色變化,且有一個(gè)顏色漸變過度的效果。網(wǎng)站有個(gè)“顏色動(dòng)態(tài)”的開關(guān),點(diǎn)開后顏色數(shù)據(jù)旋轉(zhuǎn),由于中心旋轉(zhuǎn)的緣故,使用時(shí)會(huì)產(chǎn)生眩暈、不適的感受。
過度追求視效及愉悅性,置可用性而不顧,窮極所能在每一個(gè)元素當(dāng)中體現(xiàn)著“設(shè)計(jì)感”,最終結(jié)果便是信息難以獲取,操作難以進(jìn)行。
視覺表現(xiàn)層面的愉悅性可以為產(chǎn)品賦予生命與性格,使品牌形象更加生動(dòng)飽滿。然而一旦處理不當(dāng),愉悅性反而會(huì)破壞產(chǎn)品最基本的可用性,阻礙用戶獲取信息、完成任務(wù)。
2、審美疲勞
“驚喜”是構(gòu)建愉悅體驗(yàn)的關(guān)鍵要素。新鮮的、不期而遇的美好事物總會(huì)讓人感到開心。
通常情況下,愉悅感都會(huì)隨著時(shí)間而漸漸淡化,你能想到的最為精彩出奇的細(xì)節(jié)表現(xiàn)也只會(huì)在最初的一段時(shí)間內(nèi)給人以新鮮感,而維系的方式似乎只有在情感化的方向上一遍又一遍的重設(shè)計(jì)。
3、愉悅的定義是主觀的
見過那些試圖融入幽默元素的出錯(cuò)頁面?本質(zhì)上講,這種做法相當(dāng)于在很壞的狀況下通過開玩笑來緩解尷尬。通常,在人們?cè)噲D獲取信息、保存數(shù)據(jù)或完成任務(wù)卻遭遇意外狀況而導(dǎo)致失敗的時(shí)候,任何帶有“搞笑”味道的反饋信息都會(huì)顯得缺乏同情心,用戶很可能感到被冒犯,甚至因此被激怒。
此外,“愉悅”的定義也因人而異。在一部分人看來十分新鮮有趣的東西,對(duì)另一部分人可能會(huì)很糟。普遍適用的愉悅標(biāo)準(zhǔn)幾乎是不存在的,“情感化”是一個(gè)復(fù)雜地帶,良好的設(shè)計(jì)初衷未必如愿帶來正面的結(jié)果。
令人不適的缺省設(shè)計(jì)
令人不適的缺省設(shè)計(jì)
 
4、安全的愉悅性策略
對(duì)愉悅性的負(fù)面效應(yīng)了解后,我們知道,挑戰(zhàn)和風(fēng)險(xiǎn)確實(shí)存在,但這并不意味著你需要徹底規(guī)避這個(gè)概念,關(guān)鍵在于識(shí)別一些適合承載愉悅體驗(yàn)的時(shí)間點(diǎn)。
在那些用戶不常見到的界面當(dāng)中嘗試愉悅性元素是最為安全的
譬如:
  •  
    app啟動(dòng)頁面
  •  
    帳號(hào)設(shè)置成功頁面
  •  
    新功能游歷
  •  
    用戶初次完成某個(gè)重要操作之后的反饋頁面
  •  
    空狀態(tài)頁面
這些狀態(tài)通常只會(huì)被體驗(yàn)一次,情境都以正面情緒為主,無需擔(dān)心反復(fù)無趣或是惱人一類的問題。
所以我們時(shí)常在新手引導(dǎo)流程當(dāng)中看到一些有意思的表現(xiàn)形式,例如改版后的Google Sites。這類產(chǎn)品環(huán)境當(dāng)中的多數(shù)頁面都很簡(jiǎn)單直白,高度聚焦于任務(wù),沒有多余的元素干擾流程,只有在這些“一次性”的環(huán)節(jié)當(dāng)中給人以驚喜,通過引發(fā)情感共鳴來促進(jìn)信息的傳遞。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
當(dāng)下對(duì)于愉悅性的運(yùn)用方式大家都在摸索,因?yàn)檫@是一個(gè)很主觀的概念,任何絕對(duì)化的規(guī)則都難以成立。 對(duì)于如此抽象和感性的概念,恐怕每個(gè)人心中都會(huì)有著不同的定義。
 
七、總結(jié)
永遠(yuǎn)不要低估“愉悅”在優(yōu)化用戶體驗(yàn)方面能夠發(fā)揮的作用。我們應(yīng)該對(duì)它持有積極的態(tài)度并找到機(jī)會(huì)讓“用戶情感愉悅”在我們的產(chǎn)品里發(fā)揮作用。同時(shí)我們要牢記,制造“愉悅”情緒的根本是,我們要為用戶提供從未期待過的獎(jiǎng)勵(lì),而不是僅僅是為用戶開發(fā)一個(gè)產(chǎn)品。
我們的最終目標(biāo)一直都是功能性、穩(wěn)定性、實(shí)用性,而追求“愉悅”并不應(yīng)該成為限制這些目標(biāo)的枷鎖。每一個(gè)要實(shí)現(xiàn)的目標(biāo)都應(yīng)該能夠相互銜接融洽互不干擾。我們需要移除科技術(shù)語,遵循自然語言,在產(chǎn)品里添加“有趣”“幽默”的特性,最重要的一點(diǎn):你的設(shè)計(jì)和產(chǎn)品需要?jiǎng)e有用心。
不要一味的注重產(chǎn)品的功能,同時(shí)還要考慮用戶的情緒。我們需要為用戶提供一個(gè)有趣味性的使用體驗(yàn)。
在你的設(shè)計(jì)中營(yíng)造“愉悅感”
 
 
 


作者:拒不背鍋女士
鏈接:https://www.zcool.com.cn/article/ZMTY0NzExNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

這些提升用戶體驗(yàn)的小技巧,你知道嗎?

天宇 設(shè)計(jì)思維

為了幫助大家更輕松地提升設(shè)計(jì)水平,這里整理了一些簡(jiǎn)單實(shí)用的小貼士。希望這些小技巧不僅能夠助力您優(yōu)化當(dāng)前的設(shè)計(jì)項(xiàng)目,還能在未來的設(shè)計(jì)之旅中為您提供參考價(jià)值。
 
 
 
21.將不相關(guān)的字段隱藏
在設(shè)計(jì)表單時(shí),建議不要一次性展示所有信息和步驟,而是在用戶真正需要的時(shí)候再呈現(xiàn),這樣可以更好地管理復(fù)雜性。如果用戶一打開表單就看到大量的內(nèi)容,可能會(huì)感到壓力很大,甚至?xí)艞壧顚憽?/div>
因此,我們可以隱藏那些不相關(guān)的信息,去掉不必要的字段。通過合理地簡(jiǎn)化表單內(nèi)容,可以減輕用戶的心理負(fù)擔(dān),確保只有在他們需要的時(shí)候才顯示必要的信息,從而減少他們?cè)谔顚懫渌韱雾?xiàng)時(shí)的干擾。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
22.統(tǒng)一風(fēng)格的圖片更有高級(jí)感
在選擇圖片時(shí),我們的目標(biāo)是實(shí)用性和一致性,而不是過分追求華麗的效果。如果只是一味地追求美觀,可能會(huì)導(dǎo)致圖片風(fēng)格各異,從而破壞整體的視覺統(tǒng)一性,影響用戶的體驗(yàn)。因此,設(shè)計(jì)師在挑選圖片時(shí),需要對(duì)風(fēng)格進(jìn)行精確的把控,或者在后期進(jìn)行適當(dāng)?shù)奶幚恚源_保所有圖片都能呈現(xiàn)出一致的視覺效果。
圖片的風(fēng)格對(duì)整個(gè)App的整體感覺和用戶的情緒有著重要的影響。風(fēng)格一致的圖片不僅能帶來愉悅的視覺享受,還能激發(fā)美好的聯(lián)想。我們可以從以下幾個(gè)方面來控制圖片的風(fēng)格:
● 類型:如位圖、插畫或形狀;
● 視角:如平視、仰視或俯視;
● 背景:如簡(jiǎn)約、復(fù)雜或純色;
● 呈現(xiàn)區(qū)域:如堆積、局部或特寫;
● 構(gòu)圖:如中心、水平線、對(duì)稱或?qū)蔷€。
此外,還有很多其他抽象的方式來調(diào)整圖片,雖然這些方法不是絕對(duì)的,但我們可以通過多角度的嘗試,力求讓每一張圖片都達(dá)到最佳的視覺效果。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
23.在中性色中融入色相
在上一期的內(nèi)容中,我們探討了如何設(shè)置中性色。當(dāng)飽和度(S值)為0時(shí),通過調(diào)整亮度(B值)4到5個(gè)等級(jí),可以很好地表達(dá)信息的層次結(jié)構(gòu)。這種方法雖然有助于保證設(shè)計(jì)不出錯(cuò),并能滿足最基本的需求,但在追求更高層次創(chuàng)意的設(shè)計(jì)項(xiàng)目中,可能會(huì)顯得有些單一。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
在更為成熟和全面的產(chǎn)品中,設(shè)計(jì)師們往往不會(huì)僅僅依靠純灰色作為唯一的中性色調(diào)。通常會(huì)在基礎(chǔ)的灰色調(diào)中加入一些微妙的色相變化。這樣做不僅可以讓整體視覺效果更加豐富,而且還能有效避免畫面因過于依賴灰色而顯得僵硬或缺乏活力。
常用的方法是在中性色中融入少量藍(lán)色調(diào)。藍(lán)色能夠傳遞出一種平靜、穩(wěn)重的感覺,給界面帶來柔和而不突兀的變化,同時(shí)保持良好的清晰度。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
需要注意的是,在加入新色相時(shí),我們的目標(biāo)是創(chuàng)造顏色間的細(xì)微差別,幾乎達(dá)到難以察覺的程度,而不是讓這些差異成為用戶注意力的焦點(diǎn),這樣才更有利于提升界面的整體質(zhì)感。因此,對(duì)于較淺的顏色來說,所添加的色相強(qiáng)度應(yīng)當(dāng)控制得很低,反之,顏色越深則添加的色相越多,類似下面的這種曲線:
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
24.第三方圖標(biāo)風(fēng)格應(yīng)保持一致
大多數(shù)應(yīng)用程序都支持通過第三方平臺(tái)登錄,這種方式可以顯著降低用戶在登錄注冊(cè)時(shí)所需花費(fèi)的時(shí)間成本。這種便捷的登錄方式一般在登錄頁面的底部提供多個(gè)(如微信、QQ、微博等)圖標(biāo)入口。然而,很多設(shè)計(jì)師會(huì)忽略一個(gè)細(xì)節(jié),就是直接將第三方平臺(tái)提供的官方圖標(biāo),簡(jiǎn)單地調(diào)整大小使之統(tǒng)一,然后整齊排列在一起,并沒有進(jìn)一步針對(duì)整體視覺效果進(jìn)行專門的設(shè)計(jì)優(yōu)化。
對(duì)于追求高品質(zhì)用戶體驗(yàn)的產(chǎn)品來說,任何不起眼的小細(xì)節(jié)都不應(yīng)該被忽略。在處理第三方圖標(biāo)時(shí),應(yīng)以自己產(chǎn)品的圖標(biāo)風(fēng)格為基礎(chǔ),對(duì)所使用的第三方登錄圖標(biāo)進(jìn)行重新設(shè)計(jì)或適當(dāng)調(diào)整。這不僅能夠確保整個(gè)界面風(fēng)格的一致性,提升美觀度,還能增強(qiáng)品牌識(shí)別度,讓用戶在整個(gè)使用過程中感受到更加連貫且專業(yè)的體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
25.可視化密碼比輸入兩次更直觀
為了提升您的使用體驗(yàn),并確保密碼的安全性,可以讓用戶在輸入密碼時(shí)自由選擇顯示或隱藏密碼內(nèi)容。這種方式替代了傳統(tǒng)的雙次輸入驗(yàn)證方式,尤其有助于創(chuàng)建有效的密碼。用戶可以直接看到自己設(shè)置的密碼是否滿足安全標(biāo)準(zhǔn),同時(shí)也減少了因重復(fù)輸入而造成的錯(cuò)誤。
另外,系統(tǒng)應(yīng)當(dāng)明確地展示密碼的具體要求,并為用戶提供即時(shí)反饋,幫助他們了解如何構(gòu)建更安全的密碼。例如,在用戶開始輸入密碼時(shí),界面下方可以實(shí)時(shí)更新密碼強(qiáng)度(如弱、中等、強(qiáng))及已滿足的安全條件(比如長(zhǎng)度、包含數(shù)字/符號(hào)/大小寫字母等)。這樣做不僅能讓用戶更好地理解什么是好的密碼實(shí)踐,還能激勵(lì)他們遵循這些建議,從而提高賬號(hào)的整體安全性。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
26.使用合適的表單錄入控件
在設(shè)計(jì)表單時(shí),選擇合適的輸入控件可以幫助用戶更好地理解每個(gè)字段需要填寫的信息量。
  •  
    能通過選擇來完成的操作就不要讓用戶手動(dòng)輸入,這樣不僅方便了用戶操作,也減少了錯(cuò)誤的發(fā)生。
  •  
    對(duì)于那些內(nèi)容較短的輸入項(xiàng),比如姓名或電話號(hào)碼,可使用單行輸入框,前提是確保讓所有輸入的內(nèi)容都能清晰可見。
  •  
    像評(píng)論、反饋或這種可能包含較多文字的地方,應(yīng)使用多行文本框。這樣用戶能更輕松地查看和編輯文本內(nèi)容。同時(shí),我們還可以通過一些視覺提示,例如滾動(dòng)瀏覽、輸入框右下角的高度調(diào)整等,這樣更便于用戶操作。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
27.提供解決方案助力轉(zhuǎn)化
在UI設(shè)計(jì)過程中,當(dāng)用戶嘗試進(jìn)行某項(xiàng)操作時(shí),因未滿足特定條件或出現(xiàn)操作失誤而無法繼續(xù),這可能會(huì)對(duì)轉(zhuǎn)化率產(chǎn)生負(fù)面影響。為了改善這種情況,在設(shè)計(jì)時(shí)可以采取更加貼心的做法:明確告知用戶為何無法進(jìn)入下一步,并提供具體的解決建議。這樣做對(duì)于提升轉(zhuǎn)化率非常有幫助。
比如,在用戶打算用賬戶余額購(gòu)買服務(wù)的情況下,如果僅僅提示“余額不足”,用戶可能會(huì)感到困惑,甚至需要多次嘗試不同的路徑來完成充值和購(gòu)買過程。一個(gè)更佳的解決方案是直接向用戶展示當(dāng)前賬戶余額,并提供快速充值鏈接。這樣一來,用戶可以直接通過這個(gè)鏈接輕松完成充值,隨后順利購(gòu)買所需服務(wù)。這樣的設(shè)計(jì)不僅簡(jiǎn)化了操作流程,也大大提升了用戶體驗(yàn)的流暢度。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
28.標(biāo)簽欄的高級(jí)感
大多數(shù)標(biāo)簽欄設(shè)計(jì)都傾向于簡(jiǎn)潔風(fēng)格,主要通過選中和未選中的狀態(tài)來區(qū)分不同的選項(xiàng)。狀態(tài)的變化依靠文字顏色的變換或在選中的標(biāo)簽下方添加一個(gè)小橫條來實(shí)現(xiàn)。盡管這樣的設(shè)計(jì)看起來簡(jiǎn)單,但要想讓它脫穎而出卻并不容易。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
很多產(chǎn)品從其品牌的獨(dú)特性中汲取靈感,利用品牌作為用戶熟悉且喜愛的形象作為設(shè)計(jì)的基礎(chǔ),這樣做不僅能夠建立一種視覺上的連貫性,讓用戶感受到內(nèi)外一致的美好體驗(yàn),同時(shí)也能加深他們對(duì)品牌形象的記憶。除此之外,加入一些有趣味性的圖案也是一個(gè)不錯(cuò)的選擇,它們能以獨(dú)特的方式吸引用戶的注意力,為用戶提供更加愉悅的視覺感受。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
29.合理的規(guī)范輸入格式
在表單設(shè)計(jì)過程中,雖然大多數(shù)輸入項(xiàng)可以采用通用的處理方式,無需特別干預(yù),但一些特殊類型的表單項(xiàng),設(shè)定合理的格式約束顯得尤為重要。這樣做不僅有助于系統(tǒng)更準(zhǔn)確地收集數(shù)據(jù),還能有效減少用戶填寫錯(cuò)誤的可能性,提升整體數(shù)據(jù)質(zhì)量。
對(duì)于某些特定信息如地址、手機(jī)號(hào)碼以及銀行卡號(hào)等,可通過技術(shù)手段自動(dòng)為這些長(zhǎng)串文字自動(dòng)添加分隔符,如空格或短橫線,這樣做能夠使信息更加直觀易讀,便于用戶檢查自己所填內(nèi)容是否正確無誤;同時(shí),也使得后續(xù)的數(shù)據(jù)處理工作變得更加簡(jiǎn)單高效。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
30.頁面加載中,提前展示布局
在眾多產(chǎn)品中,用戶界面的數(shù)據(jù)或內(nèi)容在完全加載之前通常僅顯示空白頁面。這種處理方式可能導(dǎo)致用戶困惑,因?yàn)樗麄儫o法確定當(dāng)前狀態(tài)是正在加載、已加載完畢但無內(nèi)容可展示,還是遇到了錯(cuò)誤。
實(shí)際上,用戶界面的布局往往是相對(duì)固定的。因此,在實(shí)際內(nèi)容加載完成前,提前向用戶展示界面的基本結(jié)構(gòu)是一種更為友好的設(shè)計(jì)策略。因?yàn)樵诘却龜?shù)據(jù)加載的過程中,用戶能夠預(yù)覽即將呈現(xiàn)的內(nèi)容框架,從而減少了不確定性帶來的焦慮感。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
此外,這一做法符合人機(jī)交互設(shè)計(jì)中的一個(gè)重要原則——系統(tǒng)狀態(tài)可見性。根據(jù)該原則,產(chǎn)品應(yīng)當(dāng)清晰地告知用戶當(dāng)前發(fā)生了什么,并提供足夠的反饋信息以幫助其理解系統(tǒng)的現(xiàn)狀及后續(xù)步驟。通過預(yù)先展示UI布局,應(yīng)用程序不僅表明了正在處理請(qǐng)求的狀態(tài),還為用戶構(gòu)建了一個(gè)對(duì)未來操作環(huán)境的心理預(yù)期模型,進(jìn)而提升了用戶體驗(yàn)的整體滿意度與效率。
 
 
31.表單頁內(nèi)容過長(zhǎng),適當(dāng)進(jìn)行分頁
在對(duì)表單內(nèi)容進(jìn)行了精簡(jiǎn)處理后,依然顯得很長(zhǎng),應(yīng)該避免一次性向用戶展示所有信息。過長(zhǎng)的表單不僅會(huì)增加用戶的填寫時(shí)間,還可能引發(fā)用戶的困惑與不滿情緒,最終導(dǎo)致放棄填寫。為此,建議根據(jù)邏輯關(guān)系及屬性將表單項(xiàng)合理地分配到多個(gè)頁面中,且清晰展示整個(gè)流程進(jìn)度情況。這樣可以使用戶感受到填寫過程更加簡(jiǎn)便流暢,同時(shí)也能幫助他們更好地理解整個(gè)表單結(jié)構(gòu),從而專注于當(dāng)前的任務(wù)。
值得注意的是,在采用分頁策略時(shí),需謹(jǐn)慎平衡分頁的數(shù)量與步驟的復(fù)雜度。過度細(xì)分會(huì)無謂地增加操作環(huán)節(jié),反而可能引起用戶的反感,進(jìn)而產(chǎn)生新的問題。因此,在規(guī)劃分頁方案時(shí),應(yīng)當(dāng)綜合考慮簡(jiǎn)潔性和易用性原則,確保最終方案既能有效簡(jiǎn)化任務(wù)又能保持良好的用戶體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
32.有時(shí)候,背景色比分割線更顯高級(jí)感
在過去,設(shè)計(jì)師們常常使用線條來清晰地劃分不同組件之間的界限。然而,在當(dāng)今流行的扁平化設(shè)計(jì)理念中,這樣的做法有時(shí)會(huì)讓頁面顯得有些擁擠,并且缺乏層次感。一個(gè)非常有效的替代方案是為相鄰元素選擇僅有細(xì)微差異的背景色來進(jìn)行區(qū)分。這種方式不僅能保持界面的整體美觀與簡(jiǎn)潔,還能夠讓用戶更加自然流暢地識(shí)別出不同的信息區(qū)域。這樣在確保了內(nèi)容的可讀性和易用性的同時(shí),也能為用戶提供更加舒適的視覺體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
33.適當(dāng)加大觸控?zé)釁^(qū)
你是否有過這樣的體驗(yàn):在使用某個(gè)應(yīng)用程序或網(wǎng)站時(shí),對(duì)著界面上的按鈕一頓亂點(diǎn),卻發(fā)現(xiàn)要么完全沒有反應(yīng),要么系統(tǒng)反饋特別慢。你可能會(huì)懷疑是手機(jī)卡頓了或者網(wǎng)絡(luò)連接不穩(wěn)定,感覺非常糟糕。其實(shí),很多時(shí)候這種情況并不是因?yàn)樵O(shè)備性能差或網(wǎng)絡(luò)問題,而是用戶界面設(shè)計(jì)上存在一些小缺陷。
設(shè)計(jì)師們都知道,在進(jìn)行UI設(shè)計(jì)時(shí)面臨著一個(gè)挑戰(zhàn):如何在美觀性和實(shí)用性之間找到最佳平衡點(diǎn)?特別是對(duì)于像按鈕、超鏈接以及單選/復(fù)選框這樣的交互元素來說,它們的實(shí)際顯示大小往往很難達(dá)到人類手指接觸區(qū)域的理想尺寸。如果這些控件設(shè)計(jì)得太小,用戶就很難準(zhǔn)確點(diǎn)擊到目標(biāo)位置,導(dǎo)致操作效率降低甚至失敗。
從視覺效果考慮,當(dāng)某些功能性組件需要保持較小外觀時(shí),我們可以確??捎|發(fā)區(qū)域足夠大。這樣即使用戶視線不那么集中,也能輕松完成任務(wù),避免因誤觸或其他原因造成的不便。值得注意的是,無論該元素本身看起來有多小,它所關(guān)聯(lián)的觸控?zé)釁^(qū)都不應(yīng)低于標(biāo)準(zhǔn)值。例如,在iOS平臺(tái)上,推薦的最小可點(diǎn)擊區(qū)域大小為44x44 pt;而Android操作系統(tǒng)中,則建議至少保持48x48 pt。這樣保持了界面的美觀性,還能大大提升用戶的操作體驗(yàn)。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
34.為圖片添加色彩層營(yíng)造氛圍感
在圖片上添加色彩層或?qū)⑵滢D(zhuǎn)換為單一色調(diào),可以創(chuàng)造出類似黑白照片的效果,這樣能顯著增強(qiáng)圖像中物體或人物的形態(tài)感。通過簡(jiǎn)化色彩,觀眾的注意力更容易集中在圖像的核心內(nèi)容上,從而提升了視覺主體的表現(xiàn)力。
此外,選擇不同的單色調(diào)不僅能突出主題,還能有效營(yíng)造特定的情感氛圍。比如,藍(lán)色調(diào)可能會(huì)給人帶來一種寧?kù)o、平和的感覺;而暖色調(diào)如紅色或橙色,則可能激發(fā)溫暖、活力甚至是緊張的情緒。通過精心挑選和運(yùn)用色彩,我們可以極大地豐富視覺語言,提高圖像傳遞信息的能力。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
35.使用前端驗(yàn)證,提升信息的有效性
前端驗(yàn)證是一種在用戶輸入信息時(shí)即時(shí)檢查數(shù)據(jù)有效性的方法,無需將數(shù)據(jù)發(fā)送到服務(wù)器。這項(xiàng)技術(shù)基于預(yù)先設(shè)定的規(guī)則,在用戶離開輸入框時(shí)自動(dòng)啟動(dòng),能夠快速檢測(cè)諸如格式、長(zhǎng)度或類型是否正確等問題。這樣做的好處在于,它能夠在用戶完成整個(gè)表單之前就發(fā)現(xiàn)并指出潛在錯(cuò)誤,從而提升了用戶體驗(yàn)和數(shù)據(jù)準(zhǔn)確性,避免了等到最后提交才發(fā)現(xiàn)問題所帶來的不便。
在設(shè)置前端驗(yàn)證時(shí),請(qǐng)記得不要過早開始校驗(yàn)過程,以免造成持續(xù)不斷的錯(cuò)誤提示,給用戶帶來困擾。最佳實(shí)踐是在用戶完全填寫完當(dāng)前項(xiàng)之后再進(jìn)行驗(yàn)證。這樣做既能保證及時(shí)給出反饋,又能避免因頻繁出現(xiàn)提示而打斷用戶的操作流程,讓整個(gè)體驗(yàn)更加順暢愉快。
02期 | 這些提升用戶體驗(yàn)的小技巧,你知道嗎?
 
 
 
 
結(jié)語
創(chuàng)造既美觀又高效且易于使用的UI界面確實(shí)需要投入不少時(shí)間和精力,還可能要經(jīng)歷多次的迭代與改進(jìn)。不過,正是通過這一系列細(xì)致入微的調(diào)整過程,我們才能打磨出一款讓客戶、用戶以及我們自己都感到滿意的優(yōu)秀作品。



作者:大漠飛鷹CYSJ
鏈接:https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

 

 

 

蘭亭妙微(www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔