<tr id="rtdfe"></tr>
我們平常會使用很多APP，久而久之我們會發(fā)現(xiàn)一些APP的設(shè)計(jì)非常的相似；一個(gè)有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響，對產(chǎn)品的形象也有一定的幫助；本文由蘭亭妙微UI設(shè)計(jì)公司分享了關(guān)于如何提升UI設(shè)計(jì)的高級感的方法，我們一起來看一下。
一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們在進(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動人心的UI設(shè)計(jì)。
本文總結(jié)了12個(gè)簡單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來學(xué)習(xí)。
在對UI 文本進(jìn)行樣式控制的時(shí)候，最常見的錯(cuò)誤莫過于過度依賴字體大小差異來營造對比；單純使用字體大小對比，所營造的對比并不夠，嘗試結(jié)合色彩和字重來營造更好的對比效果。
每種顏色都有一個(gè)視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過使用顏色的深淺，為元素賦予不同的重要性。
如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營造出優(yōu)秀的層次感：
▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400
應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會使得可讀性不佳。
如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識別度較強(qiáng)、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理：
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當(dāng)涉及長篇內(nèi)容時(shí)，大面積的深色粗體字會給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識別。
選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡；設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡單的方式為設(shè)計(jì)增加一致性。
陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。
相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。
陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。
在UI設(shè)計(jì)中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會讓人眼花繚亂。
合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。
我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。
標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。
通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產(chǎn)生輕微的視覺疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會增加用戶的認(rèn)知成本，一般在外賣美食類應(yīng)用中比較常見。
Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。
在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長條來區(qū)分兩者的狀態(tài)；因?yàn)樗唵危瑓s越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。
例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來源。
從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺獨(dú)一無二，又進(jìn)一步強(qiáng)化了用戶對品牌形象的認(rèn)知。
在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法；使用過多會讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。
我們可以通過以下幾個(gè)方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
1）使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內(nèi)容更聚焦。
2）使用不同的背景色來區(qū)分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?/p>
3）增加額外的留白
創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了，通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。
在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。
通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。
如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了，給用戶始終如一的一致感。
選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識。
雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但會出現(xiàn)一個(gè)問題就是——系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢上就變?nèi)趿撕芏唷?/p>
大多數(shù)App都支持三方登陸，他可以減輕用戶注冊的時(shí)間成本。
通常是在注冊登陸頁的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對它們再設(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。
App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計(jì)樣式；為了減少復(fù)雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。
我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設(shè)計(jì)感。
圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會瞬間拉低App的質(zhì)感。
在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢，也是提升設(shè)計(jì)品質(zhì)感的良方。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
讓用戶在使用產(chǎn)品時(shí)不產(chǎn)生混淆、可快速獲取所需信息，是產(chǎn)品設(shè)計(jì)時(shí)應(yīng)當(dāng)考慮的重要層面，而這需要團(tuán)隊(duì)在設(shè)計(jì)時(shí)預(yù)先做好方案，去掉無關(guān)事物，清晰地呈現(xiàn)信息，提升產(chǎn)品的易用性與用戶體驗(yàn)。蘭亭妙微 UI 設(shè)計(jì)公司始終以 “精簡信息、提升信噪比” 為設(shè)計(jì)核心，本篇文章里，作者結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn)，介紹了提高信噪比的設(shè)計(jì)技巧，一起來看一下。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
| 復(fù)雜性類型 | 設(shè)計(jì)應(yīng)對策略 | 典型案例 |
|---|---|---|
| 功能復(fù)雜性 | 模塊化組織、漸進(jìn)式披露 | 金山 WPS 企業(yè)版 |
| 流程復(fù)雜性 | 可視化工作流、狀態(tài)實(shí)時(shí)追蹤 | 明道云 |
| 數(shù)據(jù)復(fù)雜性 | 多維視圖、智能篩選排序 | Tableau |
| 權(quán)限復(fù)雜性 | 角色矩陣、分級授權(quán)管控 | 釘釘 |
| 隱層復(fù)雜性 | 表面簡化設(shè)計(jì) | 最終用戶體驗(yàn) |
|---|---|---|
| 推薦算法 | 無限刷新信息流 | 內(nèi)容精準(zhǔn)匹配，提升使用粘性 |
| 內(nèi)容理解 | 統(tǒng)一的信息卡片樣式 | 不同形式內(nèi)容一致呈現(xiàn)，降低視覺認(rèn)知成本 |
| 興趣預(yù)測 | 個(gè)性化內(nèi)容排序 | 越用越懂用戶，提升體驗(yàn)契合度 |
| A/B 測試系統(tǒng) | 穩(wěn)定的界面與交互 | 產(chǎn)品持續(xù)優(yōu)化，用戶無感知適配 |
| 設(shè)計(jì)維度 | B 端設(shè)計(jì)傾向 | C 端設(shè)計(jì)傾向 |
|---|---|---|
| 信息密度 | 高密度，減少頁面跳轉(zhuǎn)，適配專業(yè)操作 | 低密度，焦點(diǎn)明確，降低認(rèn)知負(fù)荷 |
| 交互模式 | 專業(yè)、高效，標(biāo)準(zhǔn)化流程優(yōu)先 | 直覺、有趣，輕量化體驗(yàn)優(yōu)先 |
| 個(gè)性化程度 | 基于角色定制，匹配企業(yè)組織架構(gòu) | 基于行為偏好，實(shí)現(xiàn)千人千面 |
| 迭代速度 | 穩(wěn)重、兼容性優(yōu)先，保障業(yè)務(wù)連續(xù)性 | 快速、創(chuàng)新優(yōu)先，貼合市場需求 |
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
UI設(shè)計(jì)有設(shè)計(jì)規(guī)范要遵循，同樣的原型圖也有自己的規(guī)范。
任何通過圖形示意的東西一樣，規(guī)范帶來的最大的好處是提高信息傳達(dá)效率。
人是視覺動物，好看的東西總喜歡多看兩眼，混亂的東西給人最直白的感受就是邏輯混亂。
這就是「卷面分」。
這篇文章我們說下原型圖的規(guī)范。
所謂的規(guī)范就是定規(guī)則，按照這一套規(guī)則作為標(biāo)準(zhǔn)進(jìn)行執(zhí)行，這里邊包含元素規(guī)范、布局、顏色等等。
我對畫原型圖對規(guī)范的要求是：盡量向著規(guī)范靠近。
原型圖不像UI圖，不用去到像素級別去摳。
因?yàn)楫嬙臀覀冃枰紤]時(shí)間，考慮效率，我們需要將最大的精力去放到方案的產(chǎn)出，寫需求文檔上。
規(guī)范只是為了讓我們有個(gè)標(biāo)準(zhǔn)，如果你想畫的規(guī)范時(shí)，給你一個(gè)參考。
對于手機(jī)端、PC端、平板、車機(jī)等不同的產(chǎn)品形態(tài)，最大的區(qū)別是尺寸。
在畫原型圖之前，我們要做的就是先把頁面原型尺寸給定下來。
可以參考的規(guī)范有：手機(jī)端首屏的尺寸設(shè)置為 375×667 px。
注：375 × 667 是首屏高度，也就是原型圖的最小高度，并不是原型的固定高度，當(dāng)內(nèi)容很多時(shí)，直接把高度拉長到合適的內(nèi)容即可。下邊提到的PC端尺寸也是這個(gè)道理。
狀態(tài)欄：375 × 20 px
導(dǎo)航欄：375 × 44 px
底部tab：375 × 49 px
這個(gè)規(guī)范的尺寸是使用的 iPhone8 的尺寸，產(chǎn)品經(jīng)理火的那幾年就是這個(gè)尺寸火，所以用這個(gè)尺寸的多。
你同樣的也可以使用其他常用的手機(jī)端尺寸，這沒有固定限制。
我比較建議用這個(gè)尺寸，因?yàn)楹芏郃xure組件也都是按照這個(gè)尺寸去做的，適配的比較好。
對于PC端，尺寸可以按照 1440×900px。
雖然當(dāng)前使用最多的屏幕尺寸是1920×1080。
對于原型圖1440的寬度，如果是左邊是原型圖，右邊寫需求描述的話，在屏幕上可以正好展示出原型圖+需求描述，不用左右滑動去看。
對于平板，建議直接使用 768×1024 px。
對于原型圖的顏色，我們可以分別來看：
1）有UI設(shè)計(jì)師參與的
我們可以考慮使用中性色，中性色是指不強(qiáng)烈的色彩，常見的就是黑白灰。
在選擇黑白灰時(shí)，我很推薦的是Axure色板中自帶的顏色，在畫原型時(shí)直接選取使用就行。
另外一些大廠規(guī)范中，都有自己的中性色定義，你也可以選擇使用。不過我不建議你花費(fèi)太多時(shí)間去處理顏色。
如下圖，左邊是用Axure中的黑白灰，右邊是使用的Arcodesign的中性色，在畫原型時(shí)，整體上影響并沒有那么大。
雖然右邊的更好點(diǎn)，如果你要用其它中性色，可以將顏色收藏進(jìn)Axure的色板中，方便下次使用。
2）沒有UI設(shè)計(jì)參與的
比如說后臺，可以添加一些顏色。
后臺一般都是內(nèi)部使用，對樣式?jīng)]有太高要求，也不會讓UI進(jìn)行設(shè)計(jì)；
因?yàn)楹笈_一般都是使用現(xiàn)成的UI組件進(jìn)行開發(fā)的，比如Antdesign、Element等；
具體什么顏色，可以用萬能的藍(lán)色作為主色調(diào)，使用其他顏色作為輔助即可。
對于語義色，來表達(dá)成功、警告、錯(cuò)誤語義，可以選擇紅綠黃進(jìn)行使用即可。
對于文字，涉及到字體、字號、粗細(xì)、行間距等。
字體
可以使用 Arial，也就是Axure默認(rèn)的字體。
同樣的，也可以使用蘋方、微軟雅黑，這兩個(gè)字體則需要單獨(dú)安裝。
不過當(dāng)你通過Axure打包發(fā)布出去時(shí)，如果對方?jīng)]有安裝對應(yīng)的字體，將則不會展示為蘋方/微軟雅黑字體進(jìn)行展示。
對方查看的效果和你看的效果會不一樣，我正在找處理方案，目前還沒找到。
字號、字重
也就是字體大小、字體粗細(xì)，對于字體大小、粗細(xì)，還有顏色，影響的信息層級關(guān)系。
我們直接看規(guī)范：
一級標(biāo)題：20px、加粗，顏色#000000
主標(biāo)題：18px、選擇性加粗，顏色#000000
次標(biāo)題：16px、選擇性加粗，顏色#000000
小標(biāo)題：14px、選擇性加粗，顏色#000000
正文：14px、選擇性加粗，顏色#000000/#333333
輔助文字：14px/12px，不加粗，顏色#333333/#555555
次級文字：12px/10px，不加粗，顏色#555555/#7F7F7F
注：對于文字的大小，前提是在 375×667、1440×900 的頁面尺寸下的。如果你使用的尺寸過大，對應(yīng)的字號也需要加大。
這個(gè)規(guī)范不用記，可以用字號 14 作為標(biāo)準(zhǔn)，層級高的字號+2，加粗、顏色加重即可，層級低的字號就-2，不加粗，顏色淺一些。
行間距
在原型中不重要，Axure時(shí)會根據(jù)字體大小自動調(diào)整行間距，如果文字內(nèi)容過多時(shí)，可以手動進(jìn)行加大間距。
原型中如果是「圖標(biāo)+文字說明」一起出現(xiàn)，不用管圖標(biāo)，直接使用圓形或矩形代替即可。
占位符太丑，不建議用。
顏色不要使用太深的中性色。如下圖示例：
如果只有「圖標(biāo)」，可以選擇能表達(dá)具體含義的圖標(biāo)。
從iconfont、iconpark中搜索復(fù)制svg格式粘貼到Axure使用即可。
如下圖中的掃一掃、設(shè)置、播放圖標(biāo)。
如果你覺得使用圓形或矩形表達(dá)圖標(biāo)的意思不明顯，或者是不想找圖標(biāo)，就在加個(gè)「icon」文字，或者直接用寫文字。
如下圖的掃一掃、設(shè)置、播放，直接使用文字說明即可。
對于頭像、圖片等，都可以加個(gè)文字說明。
如果是沒有UI介入設(shè)計(jì)，當(dāng)需要確定圖標(biāo)時(shí)，則需要產(chǎn)品經(jīng)理確定，同樣的去iconfont、iconpark中找到圖標(biāo)，按前端要求提供過去即可。
圖片在原型中不需要使用真實(shí)圖片，直接使用矩形代替即可。
Axure中自帶的圖片元件太丑了，不建議用。
可以再加上文字說明，來表達(dá)這是圖片，比如加個(gè)img，或者根據(jù)圖片特性，如封面、頭像，都是可以的。
原型中的圖片規(guī)范可以按照寬高比，比如 4:3，3:2，16:9，1:1。
當(dāng)然這個(gè)沒那么嚴(yán)格，如果你想規(guī)范些，可以這樣用。
圓角在原型中不重要，如果你想使用圓角，可以按照2的倍數(shù)調(diào)整。
圓角在UI中的作用很大，而且規(guī)范還挺多，原型中就無所謂了。
陰影不重要。如果想使用陰影，可以將陰影使用純黑色號000000，透明度30%，模糊5。
對齊是版式設(shè)計(jì)的基本原則，使用工具進(jìn)行對齊即可。
具體采用「左對齊、右對齊、上對齊、底對齊、居中對齊」，你可以按照布局來，比如靠右的元件，使用右對齊。
分布是指將頁面內(nèi)容使用水平分布、垂直分布的方式進(jìn)行平均分布，來保證頁面元素之間的間距相同。
當(dāng)相同的元素多次出現(xiàn)時(shí)，我們可以使用分布快速調(diào)整，讓頁面更規(guī)范。
間距沒有那么重要，但是規(guī)范的原型一定要有會有間距。
間距分為上下左右間距，分為模塊與模塊間的間距，子模塊與子模塊的間距，元素與元素之間的間距。
對于整個(gè)移動端來說，可以使用 5 的倍數(shù)調(diào)整間距。
對于尺寸較大的PC端原型，可以按照 10 的倍數(shù)調(diào)整間距。
也可以直接將元件結(jié)合「對齊、分布」直接調(diào)整，不用關(guān)注具體間距。
根據(jù)我們之前提到的設(shè)計(jì)原則「親密性」，屬于同組的內(nèi)容間距小，不同組的內(nèi)容間距大。
組件是就是可以直接拿過來的元件組合。
對于每個(gè)組件都是通過基礎(chǔ)的形狀、文字、顏色、尺寸、間距等進(jìn)行組合形成的。
就是UI設(shè)計(jì)中的原子化設(shè)計(jì)。
當(dāng)完成基礎(chǔ)的形狀、文字、顏色、尺寸、間距等規(guī)范確定后，進(jìn)行基礎(chǔ)元素的組合即可得到規(guī)范的組件。
你可以基于上邊的規(guī)范去制定自己的產(chǎn)品組件庫，可以快速使用規(guī)范的組件。
在畫原型時(shí)，可以將原型中的內(nèi)容盡量填寫為真實(shí)內(nèi)容，使用極值狀態(tài)，將內(nèi)容最多、數(shù)據(jù)最多的情況畫出來。
規(guī)范建立好是為了使用，我們了解清楚原型的規(guī)范后，可以在畫原型時(shí)往規(guī)范上靠，慢慢的養(yǎng)成好習(xí)慣。
一個(gè)規(guī)范好看的原型圖在求職面試、評審的時(shí)候，會是個(gè)加分項(xiàng)。
當(dāng)然，不要過度遵循規(guī)范，原型圖不是UI圖，重要的是使用原型將功能表達(dá)出來。
對于剛?cè)腴T的產(chǎn)品經(jīng)理來說，原型圖是日常的基本工作。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
既然 AI 已能通過文字直接生成圖片，卻仍無法獨(dú)立完成專業(yè)的 UI 界面設(shè)計(jì)，核心原因在于其在理解復(fù)雜業(yè)務(wù)邏輯、創(chuàng)造性表達(dá)與情感傳遞上存在天然局限性，這也讓我們清晰認(rèn)知到 AI 并非萬能。蘭亭妙微 UI 設(shè)計(jì)公司在實(shí)踐中發(fā)現(xiàn)，AI 雖能針對設(shè)計(jì)中的顯性問題，為優(yōu)化工作提供數(shù)據(jù)化的專業(yè)建議，但在深層設(shè)計(jì)維度仍有明顯短板。以 58 同城商業(yè)地產(chǎn)頁面設(shè)計(jì)稿的評審工作為例，AI 可精準(zhǔn)識別設(shè)計(jì)中的亮點(diǎn)與待優(yōu)化點(diǎn)：
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
編輯導(dǎo)語：在快節(jié)奏的當(dāng)下，金融業(yè)務(wù)的辦理對于金融行業(yè)來說有了更高的要求，在效率為先的基礎(chǔ)上，也要追求服務(wù)體驗(yàn)。本文以某銀行的金融借貸業(yè)務(wù)為例，分析其服務(wù)體驗(yàn)優(yōu)化升級的思路，與蘭亭妙微UI設(shè)計(jì)公司一起來看看。
在追求效率的今天，辦理金融業(yè)務(wù)的消費(fèi)者們對金融行業(yè)有了更高的要求。銀行也在追求服務(wù)效率和服務(wù)精準(zhǔn)度方面不斷提升自己的服務(wù)體驗(yàn)。本文以某銀行金融借貸業(yè)務(wù)流程和產(chǎn)品架構(gòu)優(yōu)化為例，探尋銀行服務(wù)升級之路。
本次服務(wù)升級主要通過神秘人暗訪、競品對比、滿意度調(diào)研和用戶訪談等，對金融借貸業(yè)務(wù)的辦理流程和體驗(yàn)度量進(jìn)行梳理，結(jié)合行方產(chǎn)品特點(diǎn)和發(fā)展方向，以服務(wù)設(shè)計(jì)為核心和驅(qū)動力，在借貸業(yè)務(wù)服務(wù)流程和產(chǎn)品架構(gòu)層面進(jìn)行體驗(yàn)升級，打造更有溫度的金融產(chǎn)品借貸體驗(yàn)。
隨著研究的深入，我們發(fā)現(xiàn)由于借貸產(chǎn)品辦理渠道的多樣性和用戶的多層次性，借貸業(yè)務(wù)在服務(wù)體驗(yàn)層面問題明顯，包括業(yè)務(wù)辦理流程繁瑣、線下線上辦理渠道雜亂、多渠道斷裂、業(yè)務(wù)辦理流程和信息不透明、用戶被動接受等。
在這次的體驗(yàn)升級項(xiàng)目中，我們對現(xiàn)狀問題進(jìn)行了分析和討論。與行方、專家、KOL 用戶進(jìn)行多次腦暴，提煉出“簡單”“快捷”“可視”“個(gè)性”四個(gè)關(guān)鍵詞，并從“產(chǎn)品”和“服務(wù)”兩個(gè)維度進(jìn)行發(fā)散和思考，為后續(xù)體驗(yàn)提升和產(chǎn)品設(shè)計(jì)提供方向和指導(dǎo)。
“簡單”上，我們從業(yè)務(wù)辦理的場景和流程入手，簡化借貸業(yè)務(wù)辦理流程和用戶信息錄入，減少用戶負(fù)擔(dān)；對新老用戶和不同類型的業(yè)務(wù)申請，依靠行方大數(shù)據(jù)能力，實(shí)現(xiàn)服務(wù)的高效簡捷。“快捷”上，打通線下、線上的業(yè)務(wù)流程和信息共享，減少不同渠道的辦理壁壘，縮短用戶的辦理周期。
“可視”上，通過業(yè)務(wù)辦理流程和用戶行為軌跡的可視化設(shè)計(jì)，讓用戶能夠隨時(shí)回溯和感知辦理節(jié)點(diǎn)。
“個(gè)性”上，通過用戶畫像進(jìn)行分層和標(biāo)簽化管理，對用戶進(jìn)行個(gè)性化服務(wù)和業(yè)務(wù)推薦，精準(zhǔn)營銷提升用戶滿意度。
借貸業(yè)務(wù)辦理的每個(gè)節(jié)點(diǎn)都要考慮到用戶最真切的需求和最希望得到的服務(wù)，是服務(wù)設(shè)計(jì)的要點(diǎn)。對應(yīng)到銀行金融借貸業(yè)務(wù)，從一個(gè)借貸用戶的行為路徑來看，可以拆解為獲客觸達(dá)-產(chǎn)品介紹-申請辦理-簽約放款-還款貸后這五個(gè)階段。不同的階段對應(yīng)著不同的用戶心理特征和借貸業(yè)務(wù)的服務(wù)重點(diǎn)。
無論是傳統(tǒng)行業(yè)亦或是新興行業(yè)，拉新永遠(yuǎn)是進(jìn)行時(shí)，獲客觸達(dá)始終是第一步。在這個(gè)階段，企業(yè)要通過不同的渠道和媒介讓產(chǎn)品被用戶看到，即目標(biāo)用戶在哪里產(chǎn)品宣傳就要到哪里。
此時(shí)，要特別注意場景化的運(yùn)用，我們的宣傳和營銷要貼合用戶的實(shí)際場景和需求，通過場景喚醒用戶借貸的某種心理狀態(tài)或需求。簡言之，金融借貸產(chǎn)品在向用戶發(fā)出邀約的當(dāng)下，是否有精準(zhǔn)喚醒用戶“借明天的錢，圓今天的夢”的內(nèi)部動機(jī)和美好期許：
預(yù)支一筆費(fèi)用，為新購置的小家加點(diǎn)裝飾、解決畢業(yè)租房的燃眉之急、添置一套心儀已久的運(yùn)動裝備……
在安全可信的原則之下，合理運(yùn)用場景化的營銷理念，通過口碑傳播、營銷短信/電話、平臺官網(wǎng)/APP/微信公眾號/線下物理網(wǎng)點(diǎn)等觸點(diǎn)、合作商戶等的精準(zhǔn)布控，實(shí)現(xiàn)用戶的成功觸達(dá)。
大多數(shù)情況下，產(chǎn)品介紹環(huán)節(jié)最重要的觸點(diǎn)是人，即行方客戶經(jīng)理。因此，良好的線上/線下客戶經(jīng)理形象、敏銳的需求洞察力，以及較高的業(yè)務(wù)水平?jīng)Q定了產(chǎn)品介紹環(huán)節(jié)的用戶體驗(yàn)高度和滿意度。
在產(chǎn)品介紹階段，需通過客戶經(jīng)理解決用戶在產(chǎn)品認(rèn)知階段遇到的困惑和疑慮，包括用戶不能自主解決的、產(chǎn)品信息簡略、內(nèi)容不夠精確的、產(chǎn)品介紹入口不可尋或詳細(xì)說明不可觸達(dá)的、信息可靠性受客戶經(jīng)理牽制、信息片面等問題。
提升本階段的服務(wù)體驗(yàn)，觸點(diǎn)環(huán)節(jié)需要做好用戶、客戶經(jīng)理、說明文本三方面的體驗(yàn)工作。如賦能用戶自主了解、熟悉產(chǎn)品和解決問題的能力、提升客戶經(jīng)理響應(yīng)速度和服務(wù)態(tài)度、提升產(chǎn)品信息（紙質(zhì)&電子產(chǎn)品文本）透明度。
“申請辦理”這個(gè)階段是需要用戶與客戶經(jīng)理密切配合的、需要用戶高密集的信息確認(rèn)與反饋、申請材料的整理與提交、明確貸款許可（申請額度、貸款類型）、確定權(quán)利與義務(wù)范疇（包括還款期限、利率、還款方式、還款限制與補(bǔ)充說明等）的階段。
該階段業(yè)務(wù)系統(tǒng)（平臺&客戶經(jīng)理）的可用性，及其間接傳遞出的價(jià)值觀，是影響用戶對全流程服務(wù)體驗(yàn)的至關(guān)重要因素。這一階段，用戶存在的痛點(diǎn)包括申請辦理過程缺乏對全流程的掌控感、申請辦理過程安全感差，官方認(rèn)證感覺差、對申請流程及所需材料感知不清晰、申請辦理操作成本高。
為解決“申請辦理”階段各個(gè)觸點(diǎn)用戶的問題，重點(diǎn)需要在流程設(shè)計(jì)上做好提升安全感、加強(qiáng)可視化、確保強(qiáng)反饋三個(gè)方面的工作。
具體而言，首先需要做到申請辦理過程中各渠道對外標(biāo)識一致、統(tǒng)一；線上/線下對接的客戶經(jīng)理能夠提供專業(yè)標(biāo)準(zhǔn)的服務(wù)；申請流程及進(jìn)度可視化；申辦材料簡單易懂、有材料清單和說明幫助方便用戶準(zhǔn)備和提交、提供線下線上多渠道提交窗口；在用戶辦理異常時(shí)有專業(yè)人員及時(shí)跟進(jìn)處理、對用戶的疑問及時(shí)反饋和解答，幫助用戶更好地進(jìn)行申辦。
簽約過程的儀式感、順暢度，簽約人員的禮儀及態(tài)度，貸款合同的可讀性、易保存性，簽署時(shí)給予用戶的主動性等，都影響著用戶的情緒體驗(yàn)（緊張-放松、尷尬-自然、局促-舒緩、擔(dān)憂-平靜），進(jìn)而影響到用戶對整個(gè)機(jī)構(gòu)專業(yè)性和安全性的感知和評價(jià)。
簽約過程需要盡可能避免過度 push 用戶，喚起緊張、被動的不良感知；避免開放環(huán)境，注重用戶隱私保護(hù)；把后續(xù)還款時(shí)間節(jié)點(diǎn)、還款方式、短信提醒等內(nèi)容生成清單轉(zhuǎn)交用戶，并告知注意事項(xiàng)。同時(shí)需要告知用戶簽約結(jié)束并不代表交易地結(jié)束，持續(xù)跟進(jìn)、專業(yè)及時(shí)的咨詢服務(wù)全天候向用戶開放，會有效的提升用戶滿意度。
此階段的用戶，壓力感和緊張感都已降到最低，但在首次還款時(shí)，仍然有可能因還款信息不清晰、客戶經(jīng)理態(tài)度冷淡而產(chǎn)生猶疑、擔(dān)憂和怨懟，并因此回想起前期流程中的體驗(yàn)瑕疵，影響對整個(gè)流程的體驗(yàn)評價(jià)。
作為全流程用戶體驗(yàn)的“終點(diǎn)”環(huán)節(jié)，本階段更要注意用戶服務(wù)的細(xì)節(jié)和方式，包括通過短信、微信和 APP 等方式及時(shí)提醒用戶還款信息、還款途徑，要注意提醒方式的克制，不能過度打擾用戶；貸后關(guān)系的維護(hù)，如首次還款提醒、后續(xù)流程告知、問題咨詢響應(yīng)速度和反饋質(zhì)量等。
還款貸后階段，還款及貸后提醒的專業(yè)性及時(shí)性、客戶回訪及服務(wù)流程告知、逾期管理標(biāo)準(zhǔn)化流程需要重點(diǎn)關(guān)注。
通過分析銀行金融借貸業(yè)務(wù)的“五個(gè)流程+N個(gè)觸點(diǎn)”，我們不難發(fā)現(xiàn)：想要更好的用戶體驗(yàn)，不能只盯在產(chǎn)品有多少功能、種類有多么豐富、幫助手冊有多么詳實(shí)等幾個(gè)片面的服務(wù)孤島上，而是需要基于體驗(yàn)場景，將用戶體驗(yàn)流程串成鏈條，在各個(gè)觸點(diǎn)、各個(gè)階段落實(shí)“以用戶為中心”服務(wù)設(shè)計(jì)理念，讓用戶在鏈路的所有觸點(diǎn)體驗(yàn)到安全、便捷、舒適的服務(wù)。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
2026年的UI設(shè)計(jì)，不再強(qiáng)調(diào)嚴(yán)苛的視覺規(guī)則，而是更注重結(jié)合使用場景做出合理的設(shè)計(jì)選擇。
設(shè)計(jì)師不再默認(rèn)選用極簡或極繁風(fēng)格，而是根據(jù)用戶需求、情感訴求以及產(chǎn)品的實(shí)際使用方式來設(shè)計(jì)。
其中一個(gè)重大變化是，只要設(shè)計(jì)目的明確，人們對復(fù)雜設(shè)計(jì)的接受度大幅提升。
界面可以層次感豐富或富有表現(xiàn)力，只要易于理解就是合理的設(shè)計(jì)。
適配性是塑造2026年UI設(shè)計(jì)的另一核心趨勢。界面的響應(yīng)性不斷升級，不僅能適配屏幕尺寸，還能根據(jù)用戶的行為和偏好做出調(diào)整。
動效、色彩與布局的設(shè)計(jì)，不再只是為了裝飾界面，更是為了傳遞設(shè)計(jì)意圖。
這些變化共同指向了一種更平衡的設(shè)計(jì)思路，讓視覺風(fēng)格與產(chǎn)品易用性同步發(fā)展、相輔相成。
歷經(jīng)多年的扁平化界面設(shè)計(jì)后，2026年UI設(shè)計(jì)在視覺上的一大重要變化，是重新聚焦于設(shè)計(jì)的縱深感與質(zhì)感。
通過分層布局、立體組件和細(xì)膩的三維元素，讓界面重新?lián)碛锌臻g維度。
觸覺極致化并非讓界面變得雜亂無章、令人眼花繚亂，而是讓數(shù)字元素更具物理質(zhì)感和交互反饋感。
按鈕設(shè)計(jì)看起來觸手可及，而非單純的符號；
圖標(biāo)設(shè)計(jì)兼具重量感與質(zhì)感。
這些細(xì)節(jié)能讓用戶無需額外說明，就能理解各元素的使用方式。
渲染技術(shù)、產(chǎn)品性能和瀏覽器支持度的提升，讓設(shè)計(jì)師能輕松為界面添加3D效果，且不會拖慢產(chǎn)品運(yùn)行速度、影響產(chǎn)品的可訪問性。
2026年的排版設(shè)計(jì)不再局限于靜態(tài)布局，為文字賦予動態(tài)效果的動態(tài)排版，正從純粹的裝飾元素，成為界面設(shè)計(jì)的核心組成部分。
用戶滾動頁面時(shí)，標(biāo)題文字可能會拉伸、位移或做出其他響應(yīng)；用戶點(diǎn)擊或懸停時(shí)，標(biāo)簽文字也會產(chǎn)生細(xì)微的動態(tài)變化。
這些動效能清晰傳遞視覺焦點(diǎn)、層級或狀態(tài)的變化，且設(shè)計(jì)的核心是提升文字的可讀性，而非分散用戶注意力。
合理運(yùn)用動態(tài)排版，能為界面賦予情感與韻律，讓產(chǎn)品呈現(xiàn)出更活潑、精致或趣味的氣質(zhì)，同時(shí)也能幫助用戶更輕松地瀏覽復(fù)雜的界面布局。
2026年，排版不再只是承載內(nèi)容的載體，更在塑造整體用戶體驗(yàn)中扮演著主動且關(guān)鍵的角色。
在大膽且富有表現(xiàn)力的界面設(shè)計(jì)成為潮流的同時(shí)，受雜志排版啟發(fā)的柔和、簡約設(shè)計(jì)風(fēng)格也愈發(fā)受青睞。
這一設(shè)計(jì)趨勢借鑒印刷雜志、攝影作品和高端出版物的設(shè)計(jì)思路，并將其適配應(yīng)用于數(shù)字產(chǎn)品設(shè)計(jì)中。
柔和光影風(fēng)格的UI設(shè)計(jì)，通過柔和的漸變、漫射的陰影和細(xì)膩的紋理營造溫暖的氛圍與視覺縱深感，同時(shí)又不會造成視覺雜亂。
配色方案通常以低飽和度的中性色、暖白色為主，搭配少量點(diǎn)綴色，整體呈現(xiàn)出舒緩、簡潔且設(shè)計(jì)感十足的視覺效果。
兼具雜志質(zhì)感的界面布局，注重留白設(shè)計(jì)、視覺韻律與清晰的層級劃分，讓內(nèi)容有足夠的呼吸空間，同時(shí)又能保持精致的設(shè)計(jì)感。
這種設(shè)計(jì)思路特別適用于創(chuàng)意工具、內(nèi)容平臺和生活方式類產(chǎn)品——這類產(chǎn)品的設(shè)計(jì)氛圍與基調(diào)尤為重要。
在設(shè)計(jì)風(fēng)格的另一維度，科幻風(fēng)漸變在2026年的使用頻率大幅提升，尤其適用于科技類和實(shí)驗(yàn)性產(chǎn)品設(shè)計(jì)。
這類界面常運(yùn)用高對比度、大膽的色彩搭配和富有氛圍感的光影效果，打造極具未來感的視覺體驗(yàn)。
未來感漸變設(shè)計(jì)通常以深色為背景，搭配霓虹藍(lán)、亮紫、金屬色等鮮艷的電光色系，營造出極具電影質(zhì)感的視覺效果，現(xiàn)代感與沉浸感拉滿。
合理運(yùn)用這類漸變設(shè)計(jì)，既能凸顯產(chǎn)品的創(chuàng)新屬性，又不會讓整體設(shè)計(jì)顯得雜亂。
這種設(shè)計(jì)風(fēng)格在深色模式下的表現(xiàn)尤為出色，發(fā)光的點(diǎn)綴元素與分層的光影效果，能為界面增添更多縱深感與氛圍感。
漸變的應(yīng)用場景也不再局限于背景，如今還被廣泛運(yùn)用于按鈕、文字和交互元素的設(shè)計(jì)中。
2026年，漸變不再只是裝飾性的設(shè)計(jì)元素，更在品牌塑造與視覺敘事中發(fā)揮著關(guān)鍵作用。
2026年的動態(tài)圖形設(shè)計(jì)已完全融入U(xiǎn)I設(shè)計(jì)體系，不再局限于基礎(chǔ)的懸停效果或加載動畫。
動效設(shè)計(jì)被用于詮釋各界面元素之間的關(guān)聯(lián)、提供清晰的交互反饋，還能讓不同交互場景間的過渡更流暢。
屏幕切換的動效設(shè)計(jì)目標(biāo)明確、銜接自然，動畫效果能根據(jù)用戶的操作做出實(shí)時(shí)且自然的響應(yīng)。微交互動效則無需過多文字說明，就能清晰展示系統(tǒng)狀態(tài)、引導(dǎo)用戶操作。新一代動態(tài)圖形設(shè)計(jì)的核心優(yōu)勢，在于動效的細(xì)膩度與一致性。
動效不會刻意吸引注意力，而是通過讓界面更易懂、更好用，為整體使用體驗(yàn)賦能。
隨著設(shè)計(jì)工具與框架的不斷升級，動態(tài)圖形設(shè)計(jì)已不再是特殊的可選設(shè)計(jì)元素，而是優(yōu)質(zhì)UI設(shè)計(jì)的必備組成部分。
極簡主義在2026年依然是主流設(shè)計(jì)思路，但已進(jìn)化為更具表現(xiàn)力、更以人為本的新極簡主義。
這種設(shè)計(jì)風(fēng)格保留了傳統(tǒng)極簡設(shè)計(jì)的清晰性與簡潔性，同時(shí)融入了溫暖的氛圍、細(xì)膩的質(zhì)感與靈活的設(shè)計(jì)手法。
新極簡主義的界面設(shè)計(jì)摒棄強(qiáng)烈的色彩對比與刻板的網(wǎng)格布局，轉(zhuǎn)而采用柔和的色彩過渡、圓角元素與更具有機(jī)感的留白方式。
字體的選擇經(jīng)過精心考量，不再追求中性化，細(xì)微的視覺細(xì)節(jié)為設(shè)計(jì)增添獨(dú)特個(gè)性，又不會造成視覺雜亂。
這一設(shè)計(jì)趨勢的興起，反映出人們逐漸意識到：極簡主義并非只能營造冰冷、缺乏人情味的視覺效果。
新極簡主義在追求設(shè)計(jì)清晰性的同時(shí)，將使用舒適度放在重要位置，打造出既高效又富有情感溫度的界面。
敘事化設(shè)計(jì)已成為UI設(shè)計(jì)中愈發(fā)重要的組成部分，尤其適用于以教育、啟發(fā)用戶或引導(dǎo)用戶完成復(fù)雜操作為核心目標(biāo)的產(chǎn)品。
2026年的界面設(shè)計(jì)不再追求一次性展示所有內(nèi)容，而是遵循敘事邏輯，隨用戶操作逐步呈現(xiàn)內(nèi)容。
基于滾動的敘事設(shè)計(jì)、漸進(jìn)式信息展示和隨操作變化的視覺效果，讓用戶能以結(jié)構(gòu)化、沉浸式的方式瀏覽內(nèi)容。
動效、色彩與布局的變化，能清晰傳遞內(nèi)容的推進(jìn)節(jié)奏與使用場景，讓用戶的交互過程成為一場連貫的體驗(yàn)之旅。
這種設(shè)計(jì)思路將信息傳遞與用戶自然的探索習(xí)慣相結(jié)合，有效提升用戶對內(nèi)容的理解度與參與度。
主打敘事化設(shè)計(jì)的界面，不會用繁多的選項(xiàng)讓用戶感到無從下手，而是為用戶提供清晰的操作指引與體驗(yàn)節(jié)奏。
懷舊風(fēng)依舊在影響UI設(shè)計(jì)，但在2026年，這種風(fēng)格呈現(xiàn)出更精致、更具設(shè)計(jì)意圖的新形態(tài)。
新復(fù)古風(fēng)格將早期的數(shù)字美學(xué)與現(xiàn)代設(shè)計(jì)標(biāo)準(zhǔn)、技術(shù)相結(jié)合，做出全新的設(shè)計(jì)詮釋。
像素紋理、復(fù)古配色方案和經(jīng)典的界面設(shè)計(jì)元素，通過高分辨率視覺效果、流暢的動效和自適應(yīng)布局被重新演繹，最終呈現(xiàn)的設(shè)計(jì)既帶有熟悉的懷舊感，又不會顯得過時(shí)。
這一設(shè)計(jì)趨勢能引發(fā)用戶共鳴，因?yàn)樗鼘⑶楦杏洃浥c當(dāng)代的產(chǎn)品易用性巧妙結(jié)合。
在致敬經(jīng)典的同時(shí)擁抱現(xiàn)代設(shè)計(jì)，新復(fù)古風(fēng)格的界面營造出一種跨世代的視覺延續(xù)感，能吸引不同年齡段的用戶。
隨著數(shù)字產(chǎn)品的滲透度越來越高，設(shè)計(jì)中對用戶心理舒適度和長期使用體驗(yàn)的重視程度也不斷提升。
舒緩式界面設(shè)計(jì)將可預(yù)測性、可訪問性和情感舒適度放在首位，而非追求持續(xù)的視覺刺激。
這類界面會減少不必要的通知提醒、降低視覺干擾，且謹(jǐn)慎使用動效；配色方案的選擇以提升使用舒適度為核心，布局設(shè)計(jì)則注重一致性與清晰性。
舒緩式界面設(shè)計(jì)對生產(chǎn)力工具、健康類平臺和用戶日常高頻使用的應(yīng)用尤為重要。
2026年，尊重用戶的注意力，已逐漸成為評判設(shè)計(jì)品質(zhì)的重要標(biāo)準(zhǔn)。
隨著觸控技術(shù)、運(yùn)動傳感器和空間計(jì)算技術(shù)的不斷發(fā)展，手勢交互設(shè)計(jì)的應(yīng)用愈發(fā)廣泛。
在許多界面中，滑動、拖拽、長按和多點(diǎn)觸控等手勢操作，正逐步取代傳統(tǒng)的可視化控件。
合理的手勢交互設(shè)計(jì)能減少視覺雜亂，打造更流暢的交互模式，但這需要設(shè)計(jì)師做好新手引導(dǎo)與交互反饋設(shè)計(jì)，確保手勢操作的易發(fā)現(xiàn)性與可訪問性。
2026年，成功的手勢交互界面設(shè)計(jì)，都能在保證直觀易用的同時(shí)，兼顧設(shè)計(jì)的清晰性。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
優(yōu)秀的UI設(shè)計(jì)，能在表現(xiàn)力與克制感、創(chuàng)新性與易用性、美學(xué)設(shè)計(jì)與人文共情之間找到完美平衡。
設(shè)計(jì)師不僅關(guān)注界面的視覺效果，更重視用戶的使用感受，才能打造出超越表面視覺吸引力、引發(fā)用戶深度共鳴的產(chǎn)品體驗(yàn)
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
今天蘭亭妙微UI設(shè)計(jì)公司來和大家聊聊在 B 端設(shè)計(jì)當(dāng)中十分基礎(chǔ)，但是爭議越來越大的組件：步驟條
因?yàn)樵谶^去很長一段時(shí)間里，步驟條幾乎是 B 端復(fù)雜表單的“標(biāo)配”，只要遇到信息量大的任務(wù)，設(shè)計(jì)師的第一反應(yīng)往往是：太長了，用步驟條切分一下吧；產(chǎn)品經(jīng)理設(shè)計(jì)原型也是：邏輯復(fù)雜了，步驟條來一下吧。
但是在 2026 年的今天，我們重新在看很多表單時(shí)，經(jīng)常會出現(xiàn)濫用表單的情況，而很多高效的 SaaS 產(chǎn)品正在讓步驟條退場，取而代之的時(shí)更扁平、直觀的單頁交互。
為什么會出現(xiàn)這種變化？我們在設(shè)計(jì)表單時(shí)，到底該如何抉擇？今天我們就來深入討論一下。
首先，在交互設(shè)計(jì)初期，我們需要承認(rèn)步驟條確實(shí)做出了很多貢獻(xiàn)。在交互設(shè)計(jì)的理論當(dāng)中，步驟條的核心價(jià)值在于“降低認(rèn)知負(fù)荷”。
它利用的就是心理學(xué)中的“組塊化”原理，將一個(gè)龐大的任務(wù)（比如 50 個(gè)填寫項(xiàng)）拆解為若干個(gè)小任務(wù)（Step 1、Step 2、Step 3）。
這種邏輯非常線性，同時(shí)能夠降低用戶的理解成本，通過步驟引導(dǎo)用戶，避免了他們在復(fù)雜的流程中迷路，所以最初在 C 端產(chǎn)品當(dāng)中經(jīng)常使用。
同樣這樣就造成了很多設(shè)計(jì)師的路徑依賴：只要表單長，就用步驟條，產(chǎn)品經(jīng)理的視角也是如此
然而，這種線性邏輯遇到復(fù)雜的 B 端業(yè)務(wù)時(shí)，問題就會出現(xiàn)。
因?yàn)?B 端通常都是專家型用戶，他們在處理業(yè)務(wù)時(shí)，需要的往往不是“保姆式的引導(dǎo)”，而是“全局的掌控感”。
步驟條在 B 端復(fù)雜場景下，存在三個(gè)致命的體驗(yàn)缺點(diǎn)：
這是最嚴(yán)重的問題。想象一下，一個(gè)采購員正在創(chuàng)建一個(gè)復(fù)雜的入庫單，如果使用步驟條，他必須填完基礎(chǔ)信息點(diǎn)擊下一步，才能看到物料明細(xì)。
但在實(shí)際業(yè)務(wù)中，他可能需要看著“物料明細(xì)”的種類，反過來去修改“基礎(chǔ)信息”里的倉庫類型。
步驟條這時(shí)候就是一堵墻，切斷了信息之間的聯(lián)系。用戶被迫在“上一步”和“下一步”之間反復(fù)橫跳，導(dǎo)致使用步驟條表單異常痛苦，極大地降低了錄入效率。
B 端的高效錄入講究的是 連貫、一氣呵成，通常需要高效的無鼠標(biāo)快速操作。
而步驟條的每一次“下一步”點(diǎn)擊，本質(zhì)上都是一次系統(tǒng)級的強(qiáng)打斷，它強(qiáng)制用戶從輸入的心流中抽離出來，停下手中的動作去尋找按鈕、等待頁面校驗(yàn)或刷新。對于每天要處理上百個(gè)表單的業(yè)務(wù)員來說，這種高頻的中斷會成倍放大操作的疲勞感。
在傳統(tǒng)的單頁長表單中，發(fā)現(xiàn)數(shù)據(jù)填錯(cuò)，用戶只需鼠標(biāo)滾動回去修改即可，所見即所得。
但在步驟條模式下，修改成本被無限放大：用戶可能需要連點(diǎn)兩次“上一步”，修改完成后，再連點(diǎn)兩次“下一步”才能回到原位。
更糟糕的是，B 端表單不僅用于“新建”，更常用于數(shù)據(jù)的“二次編輯”。如果是為了修改最后一步的某個(gè)小字段，用戶卻不得不把前面的步驟全部重新點(diǎn)擊過一遍（甚至可能觸發(fā)連環(huán)的必填項(xiàng)校驗(yàn)攔截）。在編輯場景下，步驟條帶來的交互冗余是成倍增加的。
目前我們看到越來越多的系統(tǒng)，正在提出一個(gè)新的要求：“非必要，不步驟”。
B 端產(chǎn)品開始轉(zhuǎn)向“長表單 + 錨點(diǎn)導(dǎo)航”的模式。這種現(xiàn)象我認(rèn)為其實(shí)就是在：把業(yè)務(wù)的處理掌控權(quán)，徹底交還給用戶。
全局視角：目前其實(shí)最常見的做法就是將基礎(chǔ)信息、詳細(xì)配置、關(guān)聯(lián)數(shù)據(jù)等所有模塊，展示到一個(gè)空間當(dāng)中，配合頁面當(dāng)中的 錨點(diǎn)定位，用于告訴用戶頁面的整體情況，這樣就能消除未知的焦慮。
隨機(jī)存取：在表單層面，我們希望徹底解放線性順序的束縛。用戶不再受制于系統(tǒng)，可以根據(jù)手頭掌握的資料靈活決定錄入節(jié)奏，對于很多當(dāng)前信息缺失的情況，我們可以提供更多新增的入口，減少用戶跳轉(zhuǎn)。
同時(shí)需要考慮草稿箱、暫存等功能，給表單提供非線性的操作路徑，才能契合真實(shí)的復(fù)雜業(yè)務(wù)場景。
沉浸式心流： 通過上下翻頁替代步驟跳轉(zhuǎn)，我們發(fā)現(xiàn)在單一頁面中，能夠使用戶更容易沉浸心流，專注填寫。
難道就不能用步驟條了？
作為設(shè)計(jì)師，我們需要明確步驟條的使用決策。
在決定使用哪種組件時(shí)，先問自己兩個(gè)問題：
Q1：后續(xù)步驟的內(nèi)容，是否與前一步內(nèi)容會有依賴？是 → 使用步驟條。（比如：Step 1 選了“企業(yè)”，Step 2 才出現(xiàn)“營業(yè)執(zhí)照”上傳入口；選了“個(gè)人”，Step 2 則是“身份證”。前后有強(qiáng)邏輯耦合。）否 → 使用單頁錨點(diǎn)。（比如：填寫入職信息，基本信息和教育經(jīng)歷之間沒有邏輯依賴，只是信息的類目不同。）
Q2：這個(gè)任務(wù)是否是一次性的、不可逆的？是 → 使用步驟條。（比如：大額轉(zhuǎn)賬匯款、極低頻的系統(tǒng)初始化向?qū)В枰脩舨讲酱_認(rèn)，謹(jǐn)慎操作）否 → 使用單頁錨點(diǎn)。（比如：日常的高頻數(shù)據(jù)錄入、編輯商品詳情信息）
其實(shí)在我看來，很多系統(tǒng)“去步驟條化”，本質(zhì)上是要求設(shè)計(jì)師跳出組件庫的舒適區(qū)，重新深挖業(yè)務(wù)場景。
作為 B 端設(shè)計(jì)師，我們不能成為盲目拖拽組件的執(zhí)行者，而要在業(yè)務(wù)效率與交互心智之間找到最佳平衡點(diǎn)，這才是我們不可替代的價(jià)值。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
作為專注于體驗(yàn)設(shè)計(jì)的創(chuàng)新團(tuán)隊(duì)，蘭亭妙微UI設(shè)計(jì)公司認(rèn)為：一個(gè)好的設(shè)計(jì)，不僅要解決問題，更要撫慰情緒。我們從“不確定感”“壓力”和“關(guān)懷”三種典型情緒出發(fā)，重新拆解航班狀態(tài)頁的設(shè)計(jì)邏輯，讓它不再是冰冷的工具，而是成為用戶旅程中善解人意的“情緒伙伴
你有沒有匆忙趕著去機(jī)場的經(jīng)歷？是否也在航班延誤時(shí)感到過焦慮？ 這些情緒我們都曾體驗(yàn)過——但它們真的被運(yùn)用到設(shè)計(jì)中了嗎？
這一次，我們從“情緒”出發(fā)，重新設(shè)計(jì)了航班狀態(tài)頁，分享 3 個(gè)由用戶情緒驅(qū)動的設(shè)計(jì)決策。
想象一下這個(gè)場景： 用戶可能正坐在趕往機(jī)場的火車上。一邊盯著時(shí)間，一邊核對路線，腦子里不斷計(jì)算著：“我來得及嗎？萬一航班有變化怎么辦？”
這是一種非常典型的不確定時(shí)刻。 不是恐慌，而是那種微妙卻持續(xù)的緊張——用戶此刻只想確認(rèn)一件事：一切是否仍在按計(jì)劃進(jìn)行。
我們的設(shè)計(jì)回應(yīng)在這個(gè)場景中，用戶最需要的，其實(shí)就是航班狀態(tài)信息本身的確定性反饋。 而最常見、也最容易引發(fā)誤解的狀態(tài)之一，就是航班“延誤”。
但延誤并不等于災(zāi)難——航班依然會飛，有時(shí)甚至反而給用戶多出了一點(diǎn)趕往機(jī)場的時(shí)間；起飛延誤，也不一定意味著落地延誤。
而在舊版本中，“延誤”與“取消”使用了同一種紅色。這種表達(dá)，會在第一秒就把“延誤”解讀為一種危險(xiǎn)信號，放大了用戶原本就存在的不確定感。
因此在改版中，我們將“延誤”的顏色調(diào)整為橙色：
一個(gè)顏色的變化，背后對應(yīng)的其實(shí)是一種“風(fēng)險(xiǎn)等級可視化分級設(shè)計(jì)”，而不是簡單的視覺改動——讓信息 既足夠被看見，又不會過度制造恐慌。
也正是在這種細(xì)微的情緒調(diào)節(jié)中，用戶的不確定感被悄悄降低了。
再換一個(gè)場景：用戶已經(jīng)站在值機(jī)柜臺前，一只手拿著護(hù)照，另一只手扶著行李，也許身旁還有一個(gè)小孩正拉著他們的衣角。外部刺激密集、節(jié)奏迅速，這是一種短暫但強(qiáng)烈的壓力時(shí)刻。
在這種狀態(tài)下，用戶最迫切的需求，往往不是“瀏覽”； 而是馬上確認(rèn)關(guān)鍵信息是否齊全——PNR 號、行李額度、值機(jī)所需的任何關(guān)鍵信息。 這不是一個(gè)可以讓用戶慢慢尋找入口的時(shí)刻。
他們只想快速、明確、毫不猶豫地進(jìn)入「我的預(yù)訂」。
我們的設(shè)計(jì)回應(yīng)
航班狀態(tài)頁，往往是用戶走到柜臺前最后查看一次的頁面。 因此在這個(gè)高壓場景中，“我的預(yù)訂”必須是第一時(shí)間被看到的入口。
在這次改版中，我們做了三件小調(diào)整：
這些變化看起來都不大，但它們背后遵循的是同一個(gè)原則：在高壓力狀態(tài)下，為用戶提供「最短決策路徑（Shortest Decision Path）」。
當(dāng)用戶無需思考“我要點(diǎn)哪里”，而是第一眼就知道“這就是我要找的”，壓力，便在這一瞬間被有效削減了。
在旅程的后半段，節(jié)奏逐漸慢了下來。
用戶已經(jīng)通過安檢，買了一杯咖啡，坐下等待登機(jī)。
在這個(gè)相對放松的時(shí)刻，他們偶爾會再次打開航班狀態(tài)頁，然后看到一個(gè)按鈕：“分享航班狀態(tài)”。
也正是在這一瞬間，用戶的情緒，從“關(guān)注自己”，悄然轉(zhuǎn)向了“想到別人”。
他們會想到來接機(jī)的朋友或家人——
是否順利、是否會在機(jī)場焦急地反復(fù)確認(rèn)時(shí)間。 于是，一個(gè)非常真實(shí)、也非常普遍的念頭出現(xiàn)了：“我想讓對方更方便一點(diǎn)。”
我們的設(shè)計(jì)回應(yīng)
為了讓這種“關(guān)懷”更容易被表達(dá)，我們在這次改版中優(yōu)化了“航班分享”的入口： 讓用戶可以一鍵將航班信息發(fā)送給接機(jī)的人， 對方無需再向用戶反復(fù)確認(rèn)，便能直接跟蹤航班的實(shí)時(shí)動態(tài)。
這不是一個(gè)效率型功能，而是一個(gè)典型的“情緒外溢（Emotional Spillover）”場景——用戶所感知到的安心，被自然地傳遞給了另一端的人。
設(shè)計(jì)在這一刻所做的，只是順勢托住了這種善意：讓用戶，幫別人更輕松一點(diǎn)。
如果要總結(jié)這一切，我想說：設(shè)計(jì)不僅是在“做界面”，而是在“進(jìn)入用戶的情緒”。
這有點(diǎn)像演員的“方法派表演（Method Acting）”——他們不是站在外面詮釋角色，而是走進(jìn)角色，成為角色本身。
當(dāng)你也帶著這樣的方式進(jìn)入用戶的情緒場景時(shí)，你會發(fā)現(xiàn)：
很多設(shè)計(jì)決策不再是反復(fù)權(quán)衡的“選擇題”，而會變成一種順理成章、甚至“非這樣不可”的結(jié)果。
因?yàn)榇藭r(shí)你已經(jīng)不再是站在屏幕這一側(cè)為用戶設(shè)計(jì)，你是在用戶的狀態(tài)之中，替他們做出判斷。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.payeee.cn