做到這三點(diǎn)挑戰(zhàn)，產(chǎn)品經(jīng)理只會(huì)不斷升值
<button id="k0igk"></button> 
編輯導(dǎo)語(yǔ)：智能手機(jī)現(xiàn)在對(duì)于大家來(lái)說(shuō)都并不陌生，而“陀螺儀”作為手機(jī)上的一種先進(jìn)硬件，可以增強(qiáng)手機(jī)的使用感，本文作者介紹了一些運(yùn)用陀螺儀讓人身臨其境的設(shè)計(jì)，讓我們一起來(lái)看看吧！
iPhone率先將先進(jìn)硬件（如陀螺儀、重力感應(yīng)等傳感器）引入手機(jī)，讓智能手機(jī)的硬件參數(shù)和升級(jí)成為用戶的重要選購(gòu)參考，設(shè)計(jì)師們也會(huì)在設(shè)計(jì)時(shí)關(guān)注到硬件的應(yīng)用和潛力挖掘。今天我們淺聊一下“陀螺儀”在增強(qiáng)交互體驗(yàn)、豐富交互反饋上的實(shí)際應(yīng)用。
▲ 智能手機(jī)有豐富的硬件能力
在我們的自然交互場(chǎng)景中，視野的變化（如觀察四周）和速度的感受（如拍打搖晃）是和五感非常緊密的體驗(yàn)。手機(jī)中的陀螺儀和加速度傳感器就是這樣的硬件，可以感知我們?cè)谑褂迷O(shè)備時(shí)的角度、位置和速度變化。
▲ 陀螺儀可測(cè)量設(shè)備的方向和角速度
通過(guò)陀螺儀傳感器，手機(jī)應(yīng)用能感知用戶設(shè)備的角度變化并觸發(fā)相應(yīng)的動(dòng)作和交互，拓展平面屏幕空間，實(shí)現(xiàn)更加有空間操縱感的體驗(yàn)。比如，最常見的就是的手機(jī)橫/豎屏自動(dòng)切換、導(dǎo)航指路、手機(jī)搖一搖等功能。
▲ 手機(jī)橫豎自動(dòng)切換
▲ 地圖方向感知
通常背景氛圍圖片的展示區(qū)域最多只有屏幕寬度，但是結(jié)合陀螺儀的角度感知，通過(guò)視差變化可以將視圖延展到原先被限制的空間之外，給用戶更多的視覺(jué)信息，形成類3D的空間效果。淘寶人生的套裝展示頁(yè)中，當(dāng)轉(zhuǎn)動(dòng)手機(jī)時(shí)背景圖和人物模型也會(huì)跟隨變化，讓人物及服裝的展示更加生動(dòng)和有沖擊力。
▲淘寶人生套裝展示
當(dāng)將多幀圖片匹配視角變化時(shí)，甚至能帶來(lái)裸眼3D的效果。
▲類裸眼3D效果
根據(jù)陀螺儀旋轉(zhuǎn)視角，靜態(tài)圖片可以不僅僅固定在單一位置上，還可以升級(jí)為交互性內(nèi)容，模擬現(xiàn)實(shí)空間里物品的拋、彈、跳，讓信息交互更有驚喜感，讓用戶身臨其境更有控制欲，不知不覺(jué)反復(fù)把玩。
▲ 好好住徽章動(dòng)態(tài)交互
很多應(yīng)用中，陀螺儀承載了其核心的能力，給用戶帶來(lái)突破屏幕的360度的全景體驗(yàn)。比如在星圖類APP中，跟隨陀螺儀的變化，可以將浪漫的星空變得可識(shí)別和觸手可及。
▲ 星空APP–即時(shí)星圖體驗(yàn)
陀螺儀在體感類手游游中可以說(shuō)是標(biāo)配，幾乎所有需要感知三維空間變化的游戲都需要用到它。尤其是賽車、飛機(jī)或者體育類游戲，對(duì)角色控制和視角變化有高精準(zhǔn)度要求。通過(guò)調(diào)整手機(jī)姿勢(shì)、上下左右擺動(dòng)，模擬真實(shí)空間的操控性反饋，增強(qiáng)了游戲空間的3D體感，用戶跟隨視角變化在游戲里上下翻飛，有強(qiáng)烈的代入感和沉浸感。
▲ 狂野飆車的鏡頭視角變化
▲ 和平精英體感操作
VR體感游戲中的陀螺儀跟隨用戶肢體的動(dòng)作，實(shí)現(xiàn)虛擬空間物品距離和空間視角的變化。
▲ AR體感游戲
除了可以操控平面元素，在我們使用3D AR交互功能時(shí)，陀螺儀也可以增強(qiáng)與現(xiàn)實(shí)空間交互的真實(shí)感。和現(xiàn)實(shí)世界的自然交互一樣，當(dāng)相機(jī)靠近被跟蹤的3D模型時(shí)，3D形象需按比例放大，并跟隨相機(jī)的視角調(diào)整3D模型的展示視角。
▲ 3D應(yīng)用
▲ AR跟隨并觸發(fā)功能
而且，在有多維空間切換訴求的場(chǎng)景中，可以通過(guò)監(jiān)測(cè)手機(jī)的角度變化，在2D/3D兩種空間中快速輕便切換。比如高德地圖的步行導(dǎo)航，當(dāng)用戶抬起手機(jī)能迅速進(jìn)入AR導(dǎo)航模式，輕松獲得3D實(shí)景指引，讓用戶想迷路都難。
▲抬起喚醒AR導(dǎo)航
▲放下恢復(fù)平面導(dǎo)航
▲高德地圖喚醒AR實(shí)景導(dǎo)航
在智能玩具中也會(huì)用到陀螺儀，例如Smart Car教育機(jī)器人。在它的手勢(shì)控制手表上就裝有陀螺儀，可以根據(jù)手勢(shì)控制機(jī)器人移動(dòng)。
▲ 陀螺儀體感控制
陀螺儀還能植入其他生活用品中，比如在這款潮人喜愛的LED鞋中，它跟隨你腳步的速度和角度，展示炫目的燈光顏色和模式，讓你成為人群的焦點(diǎn)。
▲ 發(fā)光的鞋子通過(guò)陀螺儀
陀螺儀除了可以帶來(lái)視覺(jué)和體感上的空間感和操縱感，在音頻上也能實(shí)現(xiàn)更真實(shí)極致的環(huán)繞聲體驗(yàn)。比如，AirPods Pro內(nèi)置的陀螺儀和加速度傳感器會(huì)對(duì)佩戴者的頭部進(jìn)行追蹤，即使你的位置變化也能使環(huán)繞音效保持在固定位置，讓環(huán)境音會(huì)根據(jù)人的移動(dòng)而移動(dòng)，創(chuàng)造沉浸式的聲音體驗(yàn)。
▲ Airpods環(huán)繞聲定位
Airpods的空間音頻能力，也可以應(yīng)用到界面交互上。通過(guò)把頭部角度變化映射到圖片視角變化，形成視差效果，轉(zhuǎn)動(dòng)頭部就能看到更多內(nèi)容。
▲ Airpods跟隨示例
除了陀螺儀，移動(dòng)設(shè)備還有很多豐富的傳感器硬件能力，如壓力傳感器、光學(xué)傳感器、震動(dòng)傳感器、NFC等，各種令人印象深刻的交互表達(dá)中都有它們的身影。例如，zenly的bump功能通過(guò)近場(chǎng)互動(dòng)快速添加好友和查看信息，字體設(shè)計(jì)網(wǎng)站通過(guò)屏幕多指觸控可以讓設(shè)計(jì)更自由和可控。
▲zenly近場(chǎng)互動(dòng)
▲多指觸屏設(shè)計(jì)字體
在體驗(yàn)設(shè)計(jì)中，我們可以在合適的場(chǎng)景使用硬件能力集成更豐富的功能，創(chuàng)造更加匹配自然行為和有創(chuàng)意的交互和反饋，為用戶帶來(lái)更多直接有趣的體驗(yàn)~
作者：能操縱空間的；
原文鏈接：https://mp.weixin.qq.com/s/qAz5WK9zQ7JPhgpBqmgorw
本文由 @淘寶設(shè)計(jì) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過(guò)程，“如何才能做出合理的B端交互決策”是很多人都在思考的問(wèn)題。在這篇文章里，作者聚焦具體的實(shí)戰(zhàn)場(chǎng)景，分享了一些自己做B端交互設(shè)計(jì)的經(jīng)驗(yàn)，一起看看吧。
這陣子想了想關(guān)于交互知識(shí)的分享，還是應(yīng)該要拓展成一整個(gè)系列的內(nèi)容，包含各類組件、控件和行為的解析。
基于我的分享習(xí)慣，我會(huì)盡量避免使用太過(guò)理論還是空泛的方式進(jìn)行講解，而是聚焦具體的實(shí)戰(zhàn)場(chǎng)景，幫助大家理解如何做出合理的交互決策。
交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過(guò)程，賬號(hào)怎么填寫，表單怎么導(dǎo)出，數(shù)據(jù)怎么篩選，列表怎么排序等等……針對(duì)每個(gè)功能的使用方式，都可以花很長(zhǎng)的時(shí)間去考慮其合理性。一個(gè)項(xiàng)目的交互，就是這個(gè)項(xiàng)目所有功能使用方式的總和。
那設(shè)計(jì)師如何開始項(xiàng)目的交互設(shè)計(jì)？直接進(jìn)入細(xì)節(jié)，開始跟著原型制定輸入框的狀態(tài)，下拉菜單的展開邏輯嗎？
這樣肯定是不行的，項(xiàng)目的交互內(nèi)容又多又雜，設(shè)計(jì)師會(huì)很快陷入這些細(xì)枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳，容易造成項(xiàng)目細(xì)節(jié)缺乏統(tǒng)一性，前后矛盾，體驗(yàn)割裂。
所以，理解項(xiàng)目交互設(shè)計(jì)的正確思路，就要知道在項(xiàng)目中有哪些交互內(nèi)容，它們對(duì)應(yīng)的層級(jí)和設(shè)計(jì)對(duì)象是什么。
在這里，我把需要設(shè)計(jì)的交互對(duì)象拆分成4個(gè)種類，它們從大到小依次為：
我們先圍繞在全局框架這個(gè)類型進(jìn)行解釋，什么是項(xiàng)目的主要模塊排版和布局，以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。
比如大家都用過(guò) Adobe 的軟件，應(yīng)該會(huì)有個(gè)感覺(jué)，就是熟悉了其中一款后用下一個(gè)，立馬就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的軟件，用起來(lái)感覺(jué)就感覺(jué)非常別扭，往往要從頭開始學(xué)起，比如對(duì)標(biāo) PS 的 Affinity Photo、Pixelmator。
為什么會(huì)出現(xiàn)這樣的反差？就是因?yàn)?Adobe 盡可能統(tǒng)一了自己生態(tài)內(nèi)的軟件全局框架，操作方式，讓全家桶用戶可以用最快的方法適應(yīng)不同的軟件。
包括頂部的屬性欄，左側(cè)的工具欄，中間的標(biāo)簽欄、創(chuàng)作區(qū)域，右側(cè)的不同工作窗口排列形式。
除了主要界面的布局框架外，還包含一些二級(jí)窗口的框架結(jié)構(gòu)也是統(tǒng)一和固定的。比如打開 PS 內(nèi)的首選項(xiàng)設(shè)置和屬性設(shè)置窗口，和其它幾個(gè)軟件的屬性設(shè)置窗口幾乎一致。
而在 Affinity 中，軟件首選項(xiàng)設(shè)置就沒(méi)有使用左側(cè)導(dǎo)航，而是類似 Mac 通用設(shè)置的快速入口分層模式，用慣了 Adobe 再換這個(gè)就會(huì)有股說(shuō)不出的別扭。
可能有同學(xué)有疑問(wèn)，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類不一樣嘛？那是因?yàn)榇翱诘目蚣芸隙ㄊ且紤]功能和場(chǎng)景的，即使使用了多種窗口類型，那也是有規(guī)律的應(yīng)用在操作方式相近的場(chǎng)景中。
再回想一下 PhotoShop 的基本操作流程，就是在創(chuàng)建文件以后，通過(guò)左側(cè)工具添加圖層元素到中間畫布區(qū)域進(jìn)行排版，再在右側(cè)屬性欄中調(diào)節(jié)畫布對(duì)象的圖層順序、屬性。
PhotoShop 作為平面領(lǐng)域中的獨(dú)角獸，直接影響了絕大多數(shù)同類設(shè)計(jì)軟件的框架結(jié)構(gòu)和布局方法。因?yàn)榻^大多數(shù)設(shè)計(jì)師學(xué)習(xí)設(shè)計(jì)的入門軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應(yīng)該順著他們已經(jīng)習(xí)慣的方式來(lái)。
所以，從 Sketch 開始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即時(shí)設(shè)計(jì)等，都應(yīng)用了幾乎相同的全局框架，所以你只要掌握其中一個(gè)就能立馬熟悉其它軟件的使用。
而當(dāng)實(shí)際功能和 UI 設(shè)計(jì)軟件高度相似的其它幾個(gè) “辦公應(yīng)用” 結(jié)構(gòu)框架不同時(shí)，上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint，先學(xué)了設(shè)計(jì)軟件再去學(xué)這幾個(gè)軟件的同學(xué)一定深有感觸。
而其它行業(yè)的軟件，如果沒(méi)有一個(gè)具備絕對(duì)主導(dǎo)性的產(chǎn)品作為標(biāo)桿，那么每家公司的產(chǎn)品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛，視頻剪輯工具中的 Pr、Finalcut、達(dá)芬奇，你就是熟練掌握其中一款，對(duì)專業(yè)術(shù)語(yǔ)和必要功能邏輯了如指掌，也需要通過(guò)基本教學(xué)才能掌握其它同類軟件。
這就是框架帶來(lái)的作用，它是軟件使用方式和操作流程的主要依據(jù)，其它細(xì)節(jié)的交互和操作都是附著于全局框架下的子集內(nèi)容。之所以交互設(shè)計(jì)要從全局框架開始，原因就是設(shè)計(jì)師要：
先確定產(chǎn)品整體操作的方式，再去考慮按鈕和表單那些細(xì)節(jié)的處理。
雖然前面舉例的都是軟件案例，但只要仔細(xì)留意，你們就會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)端管理系統(tǒng)的操作框架和一般軟件別無(wú)二致。只不過(guò)相比較五花八門的專業(yè)軟件來(lái)說(shuō)，B 端管理系統(tǒng)的操作框架模式經(jīng)過(guò)了長(zhǎng)期的演化形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例，看起來(lái)只是圍繞幾個(gè)固定的布局翻來(lái)覆去的改顏色和圖標(biāo)。
雖然它們看起來(lái)都很像，但依舊包含很多交互細(xì)節(jié)是需要設(shè)計(jì)師留意和制定的，不是簡(jiǎn)單照搬就能設(shè)計(jì)出符合項(xiàng)目需要的全局框架。
所以，交互的全局框架到底怎么設(shè)計(jì)？
它不是一個(gè)個(gè)體，而是一個(gè)由多個(gè)組件、頁(yè)面類型、適配方式組成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它們的基本特點(diǎn)。
在全局框架的范疇中，包含的組件模塊類型可以分成兩個(gè)大類，全局組件和浮層元素。
全局組件是指在項(xiàng)目多數(shù)頁(yè)面中都會(huì)存在并進(jìn)行交互的組件，功能往往和當(dāng)前頁(yè)面沒(méi)有直接聯(lián)系，比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。
而包含的浮層元素，本質(zhì)上也是全局組件，只是它們的共性是不會(huì)默認(rèn)展示，需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認(rèn)、側(cè)邊抽屜等都是全局化的浮層要素，也是需要在前期做好規(guī)劃的內(nèi)容。
下面就針對(duì)這個(gè)兩種類型的組件一一展開解釋。
（1）全局組件
a. 導(dǎo)航欄
導(dǎo)航欄不僅僅是 B 端管理系統(tǒng)，也是網(wǎng)站設(shè)計(jì)中最重要的組件。優(yōu)秀的導(dǎo)航欄可以清晰的展示項(xiàng)目的頁(yè)面層級(jí)結(jié)構(gòu)，幫助用戶高效的訪問(wèn)目標(biāo)頁(yè)面。全局框架制定的一步，就是根據(jù)項(xiàng)目的具體情況，選擇合適的導(dǎo)航類型。
導(dǎo)航欄主要使用上方、左側(cè)、混合型三種布局形式：
確定導(dǎo)航欄的類型，還需要確定導(dǎo)航的操作邏輯，包含幾級(jí)菜單，默認(rèn)、展開、選中、關(guān)閉的交互。
b. 頂部欄
除了導(dǎo)航外，另一個(gè)基本必備的組件，就是頂部欄，除了放最基礎(chǔ)的用戶和設(shè)置選項(xiàng)外，它的角色定位要根據(jù)需求決定，最常見的包含下方幾種：
當(dāng)然，以上幾種情況并不是絕對(duì)的。設(shè)計(jì)師需要根據(jù)項(xiàng)目的實(shí)際需求出發(fā)，去梳理項(xiàng)目包含哪些全局控件或操作，然后再?zèng)Q定如何分配到導(dǎo)航或者頂部菜單上，而不是先定義菜單的類型再往里面填內(nèi)容和字段。
c. 頁(yè)面標(biāo)簽欄
頁(yè)面標(biāo)簽欄是一個(gè)類似瀏覽器標(biāo)簽欄的組件，用來(lái)展示和關(guān)閉當(dāng)前項(xiàng)目?jī)?nèi)打開的頁(yè)面。
標(biāo)簽欄的使用在遠(yuǎn)古時(shí)期的 B 端項(xiàng)目應(yīng)用非常普遍，因?yàn)橐呀?jīng)入土的 IE 瀏覽在那個(gè)年代是沒(méi)有頁(yè)面標(biāo)簽功能的，導(dǎo)致開啟多個(gè)頁(yè)面的切換非常麻煩。
隨著瀏覽器標(biāo)簽的普及，它已經(jīng)不適用于多數(shù) B 端項(xiàng)目，但依舊有一小部分項(xiàng)目是需要結(jié)合它的優(yōu)勢(shì)才可以更好的提升操作效率。
在一些需要持續(xù)打開和來(lái)回切換頁(yè)面的項(xiàng)目，如客服系統(tǒng)、財(cái)務(wù)審核、合同審批，因?yàn)榇蜷_新頁(yè)面僅僅需要加載內(nèi)容區(qū)域而不是全局，沒(méi)有新建窗口后的空白頁(yè)面加載過(guò)程，就能帶來(lái)更好的體驗(yàn)。
d. 內(nèi)容模塊
內(nèi)容模塊是用來(lái)容納和顯示頁(yè)面相關(guān)內(nèi)容的模塊，這是個(gè)被很多人忽略的組件類型，包含模塊標(biāo)題欄和操作區(qū)域。
一個(gè)成熟的 B 端項(xiàng)目會(huì)統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu)，保證大量頁(yè)面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。
如果只是簡(jiǎn)單做個(gè)標(biāo)題再統(tǒng)一間距參數(shù)，那么這個(gè)組件也就沒(méi)必要在這里提了，因?yàn)檫@僅僅是設(shè)計(jì)問(wèn)題而不是交互問(wèn)題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場(chǎng)景，并進(jìn)行統(tǒng)一處理。
例如要應(yīng)用一級(jí)分頁(yè)標(biāo)簽、多層級(jí)分頁(yè)標(biāo)簽、操作按鈕、內(nèi)容折疊等?？紤]的越全，后面處理起來(lái)越工整，否則就像下方淘寶賣家端千牛的案例一樣，損害用戶的體驗(yàn)和操作效率。
內(nèi)容模塊是很難在初期一口氣全部定完，不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型，還依賴設(shè)計(jì)師自身的經(jīng)驗(yàn)判斷。
所以，它的制定流程是在前期先根據(jù)掌握的信息制定出最初的版本，然后在完成后續(xù)的頁(yè)面中逐漸進(jìn)行補(bǔ)充、優(yōu)化并替換。
作者：酸梅干超人；
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash ，基于 CC0 協(xié)議。
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
B端設(shè)計(jì)規(guī)范如何正確搭建，好的設(shè)計(jì)規(guī)范對(duì)設(shè)計(jì)有什么幫助呢？設(shè)計(jì)夾老師在這篇文章中圍繞清晰、高效、友好、可控四個(gè)關(guān)鍵設(shè)計(jì)原則，帶你一步步建立起設(shè)計(jì)規(guī)范，推薦各位設(shè)計(jì)er和對(duì)交互產(chǎn)品、B端產(chǎn)品設(shè)計(jì)感興趣的童鞋閱讀。
Halo，這里是設(shè)計(jì)夾，今天為大家分享的是「B端設(shè)計(jì)」。B端設(shè)計(jì)離不開設(shè)計(jì)規(guī)范這個(gè)話題，而做好設(shè)計(jì)規(guī)范是一個(gè)龐大復(fù)雜工程，很多人對(duì)這些處于一知半解狀態(tài)。在這個(gè)系列文章里通過(guò)結(jié)合平時(shí)的項(xiàng)目案例來(lái)談?wù)勛约簩?duì)B端設(shè)計(jì)規(guī)范的一些理解，希望可以帶來(lái)一些啟發(fā)。
本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想–設(shè)計(jì)原則，后續(xù)文章再展開講一下常見各種組件的設(shè)計(jì)規(guī)范。
設(shè)計(jì)規(guī)范作為B端設(shè)計(jì)中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個(gè)方面：
在日常工作中，當(dāng)項(xiàng)目組收到一個(gè)新的需求時(shí)，如果已經(jīng)具備了成熟的設(shè)計(jì)規(guī)范體系，其工作效率往往會(huì)得到很好的提升。最后上線的頁(yè)面不用走查還原度。以下是具體工作流程：
通過(guò)前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對(duì)于產(chǎn)品設(shè)計(jì)意義重大，那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計(jì)原則這個(gè)話題，設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總綱領(lǐng)，所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容：
接下來(lái)就圍繞設(shè)計(jì)原則清晰、高效、友好、可控這四個(gè)方面展開講解。
清晰原則主要從視覺(jué)角度讓界面信息傳達(dá)合理，提高用戶信息獲取效率。主要包含對(duì)比，親密，對(duì)齊，重復(fù)四個(gè)方面。
1.對(duì)比
對(duì)比是指界面中為了區(qū)分信息層級(jí)，強(qiáng)化元素對(duì)比度，使用的很常見的一種手段。例如，下圖中利用大色塊按鈕與線框按鈕形成對(duì)比來(lái)凸顯關(guān)鍵按鈕；通過(guò)對(duì)文字字號(hào)加大，字體加粗，顏色加深來(lái)與弱文案形成對(duì)比，凸顯關(guān)鍵文字信息。
2.親密
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺(jué)單元；反之，距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺(jué)單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。
3.對(duì)齊
在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合了用戶的認(rèn)知特點(diǎn)(我們往往傾向使知覺(jué)對(duì)象的直線延續(xù)還是直線，曲線延續(xù)還是曲線)，也能引導(dǎo)用戶視覺(jué)流，讓用戶更流暢地接收信息。
4.重復(fù)
重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時(shí)提高這些元素之間的關(guān)聯(lián)性。
高效原則體現(xiàn)在便捷、輕量、簡(jiǎn)化、一致幾個(gè)方面，目的是通過(guò)合理的方式讓產(chǎn)品操作更加便捷；交互體驗(yàn)與內(nèi)容更加輕量和簡(jiǎn)化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見案例說(shuō)明如何應(yīng)用這一原則。
1.合理利用拖拽–便捷、輕量
在涉及到諸如上傳文件，排序，滑動(dòng)輸入，搭建等需求時(shí)，合理采用拖拽交互往往可以打造更加便捷用戶體驗(yàn)。
2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量
用戶操作過(guò)程盡量減少跳轉(zhuǎn)，以實(shí)現(xiàn)交互減步長(zhǎng)，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡…依次類推(優(yōu)先級(jí)從高到低：原位＞展開收起＞氣泡＞彈窗＞抽屜＞新頁(yè)面)
3.放大點(diǎn)擊熱區(qū)–便捷
放大可點(diǎn)擊按鈕熱區(qū)，相對(duì)于較小點(diǎn)擊熱區(qū)，具備更絲滑操作體驗(yàn)。
4.懸停即現(xiàn)–輕量
利用懸停即現(xiàn)，避免信息過(guò)于重復(fù)啰嗦，簡(jiǎn)化頁(yè)面提高閱讀體驗(yàn)。
5.折疊次要功能–簡(jiǎn)化
頁(yè)面功能按鈕過(guò)多時(shí)，可將次要按鈕收納到一起，點(diǎn)擊時(shí)再展開，外面只展示高頻操作或重要按鈕，保證頁(yè)面內(nèi)容簡(jiǎn)潔。
6.統(tǒng)一樣式–一致
一致性是指在不同頁(yè)面中相同操作應(yīng)保持一致視覺(jué)與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。
友好原則應(yīng)貫穿用戶操作前，操作中及操作后三個(gè)階段，給予用戶及時(shí)反饋與幫助。
1.操作前
在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。
2.操作中
通過(guò)交互效果及頁(yè)面樣式讓用戶可以清晰感知到自己當(dāng)前操作。
3.操作后
利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)。
可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。
1.自由
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
2.導(dǎo)航
導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置，而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁(yè)面。
通過(guò)本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向，那么具體到每個(gè)組件上，我們?cè)撊绾稳ピO(shè)計(jì)呢？后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì)「B端常見組件」。
專欄作家
作者：Clippp，每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
編輯導(dǎo)讀：人是視覺(jué)動(dòng)物，相比于文字，人們更容易被圖片吸引。而如何在界面設(shè)計(jì)中運(yùn)用好圖片，給用戶更好的視覺(jué)體驗(yàn)，本文作者有自己的想法，一起來(lái)看看吧。
在UI設(shè)計(jì)中，配圖的好壞將直接影響著界面的品質(zhì)及用戶的視覺(jué)體驗(yàn)?？v觀如今高質(zhì)量的界面設(shè)計(jì)，具有設(shè)計(jì)感的配圖不僅是吸引用戶的重要元素，能比原本平淡無(wú)奇的文字界面更讓人產(chǎn)生點(diǎn)擊欲望，還能體現(xiàn)出設(shè)計(jì)師的品味、以及相關(guān)方面的專業(yè)性。
在這個(gè)快節(jié)奏的時(shí)代，相比文字，圖像的傳達(dá)效率會(huì)更快、更高、更有助于用戶輕松理解及記憶。配圖用的好，往往能起到?jīng)Q定畫面基調(diào)、流程引導(dǎo)、視覺(jué)平衡等關(guān)鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質(zhì)也會(huì)存在較大的差異。本篇文章將介紹一些在UI設(shè)計(jì)中配圖的基礎(chǔ)知識(shí)，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關(guān)界面設(shè)計(jì)無(wú)從下手時(shí)提供靈感，在選擇圖片、后續(xù)處理時(shí)如何做到有規(guī)律可循帶來(lái)一些思路。
在文字出現(xiàn)之前，人們都是靠看到的圖像來(lái)理解信息內(nèi)容，即便后來(lái)文字能表達(dá)出很豐富的內(nèi)容，圖示也不可少，試想一下，當(dāng)別人拿著密密麻麻的數(shù)據(jù)給你看時(shí)，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說(shuō)明別人的數(shù)據(jù)不清晰。所以，圖像相比文字能更具說(shuō)服力、更容易傳達(dá)信息，使讀者產(chǎn)生共鳴、震撼內(nèi)心，讓人看了一目了然，能直觀的與人產(chǎn)生互動(dòng)。
當(dāng)說(shuō)到UI設(shè)計(jì)中的圖片非常重要時(shí)，并不是說(shuō)文字就一定比圖片弱，好的文字也能帶給我們無(wú)限的遐想，只能說(shuō)在更大的概率上圖片和文字哪個(gè)更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來(lái)的美好。但是，如果非要問(wèn)我選擇哪一個(gè)時(shí)，我只能說(shuō)“只有小孩子才做選擇題，我（設(shè)計(jì)師）全都要”，圖片可以表達(dá)出豐富的內(nèi)容，再用文字言簡(jiǎn)意賅，是一個(gè)非常完美的組合。
圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設(shè)計(jì)中，最常用的無(wú)非JPG、GIF、PNG三種。
JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開和處理，但不能顯示透明底，壓縮后會(huì)失去一部分原始信息。
PNG：如需編輯，PNG應(yīng)該算是所有圖片格式中的最佳選擇，支持無(wú)損壓縮及透明底，但針對(duì)需要高保真的復(fù)雜圖片，壓縮后的文件較大，且有少數(shù)的瀏覽器不支持。
GIF：動(dòng)效圖片，支持透明底及無(wú)損壓縮，通常由視頻格式的內(nèi)容轉(zhuǎn)換而來(lái)，但對(duì)色彩有非常嚴(yán)格的要求，數(shù)量最多不超過(guò)256種，相比前面兩種，GIF格式的文件更大。
在移動(dòng)端UI設(shè)計(jì)中，我歸納了最常用的幾個(gè)圖片比例，分別是1:1、3:2、4:3、16:9四種，這些比例都是源于最早的膠片攝影及現(xiàn)代相機(jī)的傳感器演變而來(lái)。當(dāng)我們不知如何選擇比例時(shí)，首先需清楚的了解界面圖片的應(yīng)用場(chǎng)景、來(lái)源用戶以及圖片比例背后的緣由，否則將很難把控，下面將針對(duì)這幾個(gè)比例作具體分析。
1）1:1 比例
因?yàn)橄鄼C(jī)結(jié)構(gòu)的原因，早期最傳統(tǒng)的120膠片畫幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構(gòu)圖規(guī)整，使其最大程度的突出照片主體。
在如今的電商APP中，商品圖片絕大多數(shù)都遵循了1：1的比例，不管橫向還是縱向都能將信息進(jìn)行完整化的展示，且方便多場(chǎng)景、頁(yè)面的適配。另外，用戶頭像也都使用了這一比例。
2）3:2比例
起初135膠卷的比例就是3：2，主要是因相機(jī)取景框的大小而決定。在移動(dòng)端，這一比例使用也比較廣泛，例如新聞、旅游類型產(chǎn)品，在拍照之后無(wú)需裁剪等處理，直接上傳使用，非常方便。
3）4:3比例
隨著攝影的發(fā)展，小/微型相機(jī)出現(xiàn)而誕生4：3比例，且移動(dòng)設(shè)備發(fā)展迅速，在非專業(yè)攝影的情況下，手機(jī)能很大程度上代替單反并成為主流拍照設(shè)備，目前市場(chǎng)上主流手機(jī)的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片占比更大，能最大化顯示圖片以突出重點(diǎn)信息。
4）16:9比例
根據(jù)人體工程學(xué)的研究，人眼視野范圍的比例約為16：9的長(zhǎng)方形，所以電視、顯示器及投影范圍的設(shè)計(jì)都是基于這個(gè)黃金比例。
線上產(chǎn)品不用多說(shuō)，影視類型的產(chǎn)品均采用16：9的尺寸，例如愛奇藝、優(yōu)酷、騰訊視頻等，到目前為止，這個(gè)比例在設(shè)定上還沒(méi)出現(xiàn)過(guò)問(wèn)題。
在上述4個(gè)尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何選擇，請(qǐng)根據(jù)產(chǎn)品目標(biāo)定位，看看到底是以內(nèi)容為主導(dǎo)還是圖片為主導(dǎo)。例如：資訊類型產(chǎn)品很注重標(biāo)題文案，即會(huì)使用上文下圖、左文右圖的版式，選擇3：2作為封面，以降低圖片的視覺(jué)重量；旅游、租房類產(chǎn)品，則可使用4：3的圖片，以傳達(dá)更多信息。這種選擇方式雖然不是絕對(duì)，但當(dāng)我們陷入兩難的困境時(shí)，可作為參考依據(jù)幫助快速?zèng)Q策。
1）單圖布局
全屏：具有很強(qiáng)的視覺(jué)沖擊力，非常適合用于傳播行業(yè)屬性及品牌調(diào)性。單圖全屏布局處理靈活，可整體突出、局部特寫或加純色不透明度紋理/遮罩，對(duì)圖片細(xì)節(jié)、構(gòu)圖等有較高的質(zhì)量要求，一般用于登錄、啟動(dòng)引導(dǎo)、產(chǎn)品介紹背景等頁(yè)面。
卡片：以單張圖片作為視覺(jué)引導(dǎo)，寬高不固定，但占據(jù)界面大部分區(qū)域及重要位置，主要突出產(chǎn)品調(diào)性和成為吸引用戶的流量入口，促使用戶與其產(chǎn)生交互行為。常用于產(chǎn)品詳情頁(yè)頭圖、推薦頁(yè)、專題入口等。
2）圖文列表
在圖文列表界面，很多時(shí)候，我們都在想一個(gè)問(wèn)題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白F式（從上到下、從左到右）瀏覽布局，這也跟人眼的瀏覽習(xí)慣相吻合，然后確定圖、文信息內(nèi)容的權(quán)重，根據(jù)優(yōu)先級(jí)將重要的信息放在關(guān)鍵位置。
單列組合
左文右圖：以文字為主、圖片為輔，主要強(qiáng)調(diào)文字信息，且圖片與標(biāo)題的關(guān)聯(lián)性不是很大，能減少減少圖片對(duì)文字的干擾，對(duì)圖片的質(zhì)量要求不高，很多新聞、資訊類產(chǎn)品都是選用這種方式布局。
左圖右文：在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下，采用左圖右文的方式，更強(qiáng)調(diào)以圖片直觀的傳達(dá)內(nèi)容、吸引用戶的視線，對(duì)圖片的質(zhì)量要求高于左文右圖，一般是電商、旅游類產(chǎn)品的最佳之選。
上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過(guò)兩個(gè)內(nèi)容，用戶需要從圖片中獲取大量信息，對(duì)圖片的質(zhì)量要求很高，大多有專門的人員審核，以完成對(duì)圖片的品質(zhì)的把控。這種方式很占用界面的縱向空間，部分租房類、藝術(shù)類產(chǎn)品會(huì)選用此種方式。
雙列組合
并排：相同高度的比例控制，是較為經(jīng)典圖文布局，相比單列，同屏可展示更多的圖片內(nèi)容且空間利用率更高，能同時(shí)向用戶傳達(dá)更多信息。
錯(cuò)位：圖片高度自適應(yīng)（瀑布流），在限制寬度的條件下，高度自由發(fā)揮，讓圖片得到更多的舒展，利用率更高。雙列錯(cuò)位的排版方式增加了版式的趣味性，可緩解用戶在長(zhǎng)時(shí)間瀏覽下的視覺(jué)疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導(dǎo)致視覺(jué)混亂，且低高度的圖片信息很容易被忽略。
3）多圖組合
規(guī)則：3張或以上的規(guī)則的圖片組合很常見，主要用圖片列表來(lái)引導(dǎo)用戶查看更多，通常利用單排左右滑動(dòng)或九宮格的方式呈現(xiàn)。例如旅游、租房、影視類產(chǎn)品，包括手機(jī)相冊(cè)、社交圈子等。
不規(guī)則：多圖不規(guī)則比例并不常見，因移動(dòng)端設(shè)備可視寬度有限，容易導(dǎo)致混亂的錯(cuò)覺(jué)。藝術(shù)、拼圖類產(chǎn)品看到的居多，另外，部分社交類產(chǎn)品為了展示不同遠(yuǎn)近距離的層級(jí)關(guān)系也會(huì)用到這種排版方式。
圖片常見的手勢(shì)操為：滑動(dòng)、點(diǎn)擊、雙指縮放，除此之外，還有很多針對(duì)所有元素都可以操作的交互手勢(shì)，這里就不多說(shuō)了，下面單獨(dú)對(duì)圖片手勢(shì)作出介紹。
1）滑動(dòng)
上下滑動(dòng)：通常在圖文列表或單張圖片內(nèi)容超過(guò)一屏的情況下，通過(guò)上下滑動(dòng)查看更多信息。
左右滑動(dòng)：為了拓展更多內(nèi)容，多用于相同等級(jí)的圖片列表或大圖切換，在頁(yè)面列表中會(huì)將無(wú)法同時(shí)展示的圖片呈現(xiàn)一部分或以數(shù)量作為提示，引導(dǎo)用戶探索以發(fā)現(xiàn)更多。
2）點(diǎn)擊/長(zhǎng)按
單擊：?jiǎn)螕艨刹榭磮D片，從縮略圖到詳情或大圖的切換操作；
雙擊：針對(duì)圖片本身進(jìn)行某些操作，比如喜歡、點(diǎn)贊等，另外，部分圖片通過(guò)雙擊進(jìn)行一定比例的放大縮小。
長(zhǎng)按：調(diào)出圖片的部分屬性信息、下載圖片等進(jìn)行下一步操作。
3）雙指縮放
當(dāng)我們需要查看圖片的某些局部信息或細(xì)節(jié)時(shí)，就會(huì)使用雙指（開合）縮放的交互手勢(shì)。
因圖片的色彩變化不規(guī)則，為了保證圖片上層文字的可讀性，通常會(huì)在文字區(qū)域加一個(gè)純色遮罩，也可設(shè)置不透明度的漸變效果，使遮罩跟圖片的過(guò)渡更加協(xié)調(diào)，提升視覺(jué)美觀度。
毛玻璃效果通常出現(xiàn)在應(yīng)用的2、3級(jí)頁(yè)面，對(duì)應(yīng)用性能會(huì)有一定的消耗，一般使用封面圖片進(jìn)行大幅度的高斯模糊作為背景使用，可在上層加上一定透明度的蒙層配合使用，透明度數(shù)值根據(jù)不同的圖片色彩及使用場(chǎng)景適當(dāng)?shù)恼{(diào)整。毛玻璃效果既能滿足文字內(nèi)容的清晰呈現(xiàn)，又能提供場(chǎng)景氛圍并提升界面的品質(zhì)感與神秘感，我們最熟悉的當(dāng)屬音樂(lè)播放頁(yè)面的背景模糊效果了。
對(duì)于自營(yíng)平臺(tái)，內(nèi)容較為固定的商品頁(yè)面，可將商品摳圖后自定義背景，讓界面的整體設(shè)計(jì)風(fēng)格可控，延展性更高。不適配平臺(tái)類型應(yīng)用，因?yàn)闀?huì)讓商家產(chǎn)生較高的運(yùn)營(yíng)成本。
圖片圓角值設(shè)定，能體現(xiàn)出不同的產(chǎn)品屬性及氣質(zhì)。例如：直角比較硬朗，給人高冷、力量的感覺(jué)，小圓角傳達(dá)出安全、專業(yè)的屬性，而大圓角顯得活潑、可愛，更有親和力。
圖片出界常用于運(yùn)營(yíng)設(shè)計(jì)，例如圖片輪播、膠囊banner、專題頁(yè)等，另外，經(jīng)摳圖處理過(guò)的圖片也可用在商品詳情頁(yè)頂部圖示。這種效果能有效避免呆板，營(yíng)造出畫面氛圍，制造出更強(qiáng)烈的視覺(jué)沖擊力。
UI設(shè)計(jì)中，任何一個(gè)設(shè)計(jì)思路、想法及效果樣式都是為產(chǎn)品而服務(wù)，圖片也不例外，需要根據(jù)不同的場(chǎng)景進(jìn)行合理搭配，好的配圖更能與用戶產(chǎn)生共鳴。
配圖必須要明確主體，一眼就能看出核心內(nèi)容，且不可以炫技或好看為主，否則會(huì)被多余的元素、效果影響主體視覺(jué)導(dǎo)致沒(méi)有重點(diǎn)。但確定好一張圖片的風(fēng)格及色系后，后續(xù)也要保持統(tǒng)一。
圖片以實(shí)用性為準(zhǔn)，如果一味的追求漂亮、好看，最終可能形色各異造成視覺(jué)的不統(tǒng)一，嚴(yán)重影響用戶體驗(yàn)。設(shè)計(jì)師在選圖時(shí)需要對(duì)風(fēng)格精準(zhǔn)把控或后續(xù)稍加處理，以形成統(tǒng)一的視覺(jué)。
常見的控制方向有圖片類型（位圖/插畫/形狀）、視角（平視/仰視/俯視）、商品背景（簡(jiǎn)約/復(fù)雜/純色）、呈現(xiàn)區(qū)域（堆積/局部/特寫）、構(gòu)圖（中心/水平線/對(duì)稱/對(duì)角線…）等。另外，還有很多抽象的方式但并不是絕對(duì)的，我們都可以嘗試從不同的角度去調(diào)整，力求讓所有圖片達(dá)到最佳視覺(jué)效果。
因人的天性即向往美好、品質(zhì)（非物質(zhì)化）生活，固品質(zhì)感的配圖更容易吸引用戶的注意力，讓人想要擁有的感覺(jué)，如果色彩不夠飽滿，不管風(fēng)格是多么統(tǒng)一，也達(dá)不到良好的用戶體驗(yàn)。在選好圖片后，可對(duì)色相、飽和度、亮度稍加調(diào)整，以確保色彩飽滿、豐富。
有時(shí)候做設(shè)計(jì)為了方便，整個(gè)界面的圖片直接復(fù)用同一張，即便設(shè)計(jì)的再好，也可能隱藏著不易察覺(jué)的瑕疵。需要說(shuō)明的是，一個(gè)成熟且專業(yè)的設(shè)計(jì)師，首先要對(duì)自己負(fù)責(zé)，然后才是設(shè)計(jì)，即便是初稿，在即將呈現(xiàn)給大家或匯報(bào)前，一定要給出上線后最真實(shí)的效果，這樣方便他人貼合實(shí)際給出一些方向性的建議，幫助自己更好的決策。經(jīng)處理過(guò)的實(shí)際配圖能體現(xiàn)整體效果，方便找出圖片以外的設(shè)計(jì)缺陷，例如版式、字體大小、層級(jí)關(guān)系等問(wèn)題。
靜態(tài)圖片常用的無(wú)非PNG、JPG這兩種格式，文件較大的圖片會(huì)影響打開頁(yè)面或刷新時(shí)的速度，本地圖片更會(huì)增加應(yīng)用包的大小。從設(shè)計(jì)稿中導(dǎo)出圖片時(shí)需要控制文件大小，如無(wú)特別（超大圖）情況，切勿主動(dòng)降低圖片質(zhì)量后再導(dǎo)出，否則會(huì)影響界面整體的視覺(jué)美觀度。
這里推薦一個(gè)線上無(wú)損智能壓縮神器：https://tinypng.com，僅限PNG、JPG、WEBP格式的圖片。
△上圖可以看出，圖片在壓縮了76%后，由1.4MB變成了332KB，肉眼很難看出（查看大圖）質(zhì)量上的損失。
切圖不像以前那么麻煩，同一張圖片需要手動(dòng)導(dǎo)出多套規(guī)范，現(xiàn)在只需在軟件（或安裝插件）標(biāo)記好切圖，上傳到類似藍(lán)湖、摹客等第三方線上應(yīng)用，分享給團(tuán)隊(duì)成員即可各自下載web、Android、iOS對(duì)應(yīng)的多套規(guī)范制圖。
設(shè)計(jì)師在設(shè)計(jì)過(guò)程中，一定要按照規(guī)范的最大極限保留原圖，以iOS系統(tǒng)@1x規(guī)范設(shè)計(jì)稿為例，如果圖片的寬度是100px，那么導(dǎo)入軟件中的圖片寬度至少要在300以上，然后再進(jìn)行縮?。≒S中需轉(zhuǎn)為智能對(duì)象），如果低于300px，開發(fā)在導(dǎo)出@3x的圖片就會(huì)失真，可能會(huì)因損失像素而出現(xiàn)模糊的情況。
文章中所介紹的圖片使用方法及處理技巧，并非最好、唯一的答案，但在你沒(méi)有更好的方法之前，多多少少能從中得到啟發(fā)。UI中圖片設(shè)計(jì)的本質(zhì)在于自身的專業(yè)能力，然后用自己的視覺(jué)產(chǎn)出和設(shè)計(jì)手段去吸引、打動(dòng)用戶，從而為產(chǎn)品帶來(lái)利益，也能體現(xiàn)出設(shè)計(jì)價(jià)值。
不得不承認(rèn)，人們很多時(shí)候都是通過(guò)視覺(jué)表象決定是否需要深入了解、擁有某一件事/物，設(shè)計(jì)師就是在做視覺(jué)表象的表達(dá)，如果圖片用的好，不僅能讓你的設(shè)計(jì)更加出彩，還有一定幾率轉(zhuǎn)化用戶，形成商業(yè)價(jià)值。
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
編輯導(dǎo)語(yǔ)：動(dòng)效，是頁(yè)面的靈魂，也能讓用戶有更好的體驗(yàn)。作為設(shè)計(jì)師，我們?nèi)绾螌?dòng)效設(shè)計(jì)得更有簡(jiǎn)潔有趣呢？本篇文章中，作者分享了5種動(dòng)效格式的優(yōu)缺點(diǎn)。感興趣的小伙伴不妨來(lái)看看。
動(dòng)效設(shè)計(jì)，可以提升界面的趣味性和引導(dǎo)性，讓用戶瀏覽過(guò)程中不會(huì)太枯燥，獲得更好的體驗(yàn)。
最近做的金山知了（后面改名為金山知識(shí)庫(kù)）官網(wǎng)，頭圖元素加入了緩動(dòng)效果，第一眼挺新穎的。
金山協(xié)作新年許愿活動(dòng)，許愿按鈕加入了運(yùn)動(dòng)的形象，更能吸引用戶點(diǎn)擊。
不過(guò)，輸出動(dòng)圖和開發(fā)對(duì)接的過(guò)程中，我也遇到過(guò)一些問(wèn)題：導(dǎo)出的動(dòng)圖模糊、資源太大、開發(fā)不支持動(dòng)圖格式等等，當(dāng)時(shí)也是想盡辦法地解決。
這次我總結(jié)了幾種常用的動(dòng)圖格式，也提及我輸出動(dòng)圖過(guò)程遇到的問(wèn)題和解決方法，以及我們?cè)O(shè)計(jì)師該如何選擇合適的動(dòng)圖格式。
剛開始接觸動(dòng)效，我最先了解到的 PNG 序列幀，就是輸出動(dòng)圖的每一幀圖片，然后交付開發(fā)，按幀播放圖片實(shí)現(xiàn)。
比如這個(gè)加載動(dòng)畫，我的練習(xí)作品，導(dǎo)出序列幀資源很大，所以我平時(shí)基本不用這種格式。
導(dǎo)出方法：
AE 輸出選擇 PNG 序列，如果要導(dǎo)出透明背景，通道選擇 RGB+Alpha。
GIF 支持安卓、iOS、網(wǎng)頁(yè)，可以說(shuō)也是比較常用的格式之一。
界面設(shè)計(jì)中的小元素可以使用這個(gè)格式，比如運(yùn)營(yíng)按鈕動(dòng)畫、點(diǎn)贊圖標(biāo)動(dòng)畫等，資源不會(huì)太大。
像我之前負(fù)責(zé)的新年許愿活動(dòng)，因?yàn)槭菑?0 到 1 的產(chǎn)品，開發(fā)還沒(méi)有支持 Lottie，所以許愿按鈕動(dòng)畫輸出 GIF 給開發(fā)實(shí)現(xiàn)，壓縮后資源 300KB。
雖然動(dòng)圖放大周圍有鋸齒，但是在手機(jī)上是看不到的。
導(dǎo)出方法：
1. AE 導(dǎo)出 MOV 格式，再用 PS 轉(zhuǎn)換成 GIF。（注意：可能是因?yàn)閯?dòng)畫時(shí)間太長(zhǎng)、文件太大，導(dǎo)出經(jīng)常失敗，所以我很少用這種方式)
2. AE 安裝 Gifgun 插件，直接導(dǎo)出。
3. AE 導(dǎo)出 PNG 序列，將所有圖片拖進(jìn) iSparta，勾選 GIF 輸出。（注意：如果導(dǎo)出 GIF 圖片有問(wèn)題，需要勾選壓縮質(zhì)量，填寫小于 100 的值就可以解決了）
如果 GIF 文件太大，可以使用無(wú)損壓縮軟件：PPDuck。
Lottie 是一個(gè)用于 Android、iOS、Web、Windows 的動(dòng)畫庫(kù)，用于解析使用 bodymovin 導(dǎo)出為 json 文件的 AE 動(dòng)畫。
動(dòng)畫通過(guò)代碼實(shí)現(xiàn)，是矢量的。
動(dòng)畫庫(kù)資源會(huì)增加安裝包的大小，客戶端會(huì)有推動(dòng)成本。
不過(guò) WPS Office 有在使用，資源大小和穩(wěn)定性目前來(lái)說(shuō)是可以的。
不支持 AE 效果器直接添加的效果，比如高斯模糊、內(nèi)發(fā)光、投影。
支持用圖片導(dǎo)入 AE 做出的動(dòng)效，比如金山知識(shí)庫(kù)官網(wǎng)的頭圖，就是使用 Lottie 方式實(shí)現(xiàn)，資源小，動(dòng)圖也很清晰。
支持顏色漸變，但是導(dǎo)出 json 容易出問(wèn)題。比如之前設(shè)計(jì)的會(huì)員卡片動(dòng)效，漸變顏色導(dǎo)出后變成了黑白漸變。
這時(shí)候只需要將所有漸變圖層名稱按順序改為 Gradient fill 1、Gradient fill 2、…，就可以解決了。
導(dǎo)出方法：
AE 安裝 bodymovin 插件，直接導(dǎo)出。（注意：要選擇保存路徑，導(dǎo)出按鈕才能點(diǎn)擊。點(diǎn)擊設(shè)置圖標(biāo)，選擇 Standard 和 Demo，才能導(dǎo)出 json 文件和 demo 預(yù)覽效果）
APNG 是基于 PNG 格式的位圖動(dòng)畫格式圖片，文件后綴依然是.png，可以在瀏覽器中預(yù)覽動(dòng)畫。
金山協(xié)作的表情包使用的也是這種格式動(dòng)圖。
和 GIF 對(duì)比，它的優(yōu)勢(shì)在于動(dòng)圖邊緣光滑，不會(huì)有鋸齒和顆粒感。
導(dǎo)出方法：
AE 導(dǎo)出 PNG 序列，將所有圖片拖進(jìn) iSparta，勾選 APNG 輸出。
SVGA 是由 YY 團(tuán)隊(duì)開發(fā)出來(lái)的一種跨平臺(tái)的開源動(dòng)畫格式，同時(shí)兼容 iOS / Android / Flutter / Web 多個(gè)平臺(tái)的動(dòng)畫格式，常用于直播禮物場(chǎng)景，適合炫酷的禮物動(dòng)效。
因?yàn)槎Y物效果比較復(fù)雜，一般是用 png 序列，一張圖一幀地制作動(dòng)畫，輸出 SVGA 文件。
它只會(huì)生成一個(gè) svga 后綴文件，代碼和位圖元素都被集成在了一起，但是 Lottie 會(huì)生成兩個(gè)文件：json 代碼文件+img 文件夾。
支持 AE 自帶基礎(chǔ)動(dòng)畫：位移、縮放、不透明度等，但是不支持圖層漸變（Lottie 支持漸變）和 AE 自帶及外部插件的效果控件特效，所以 UI 動(dòng)效 Lottie 比較通用，不容易出錯(cuò)。
講了那么多動(dòng)效落地方案，那么在實(shí)際工作中我們?cè)撊绾芜x擇使用呢？
以上就是我的業(yè)務(wù)動(dòng)效落地經(jīng)驗(yàn)總結(jié)，大家有需要這些導(dǎo)出插件的可以找我。
作者：ALEI；公眾號(hào)：ALEI的設(shè)計(jì)思考
原文鏈接：https://www.uisdc.com/motion-design
本文由@ ALEI 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
編輯導(dǎo)讀：我們經(jīng)常會(huì)收到各種彈窗，它們的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對(duì)話的一種方式。但是，彈窗也不是多多益善。如何彈、什么時(shí)候彈？這些都是有章法的。本文作者總結(jié)梳理了一套彈窗設(shè)計(jì)原則，一起來(lái)看看吧。
產(chǎn)品經(jīng)理：我覺(jué)得這里要加個(gè)彈窗，你去設(shè)計(jì)吧。
設(shè)計(jì)師：emmm…
彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說(shuō)了算嗎？
好的產(chǎn)品通常會(huì)在恰當(dāng)?shù)臅r(shí)間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時(shí)或反饋不合理都會(huì)帶來(lái)不好的使用體驗(yàn)，甚至誤導(dǎo)用戶，從而導(dǎo)致用戶流失。
很多時(shí)候，產(chǎn)品經(jīng)理會(huì)從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問(wèn)題，但這些未必是用戶所需要的，設(shè)計(jì)師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計(jì)，否則就成了只會(huì)照搬產(chǎn)品原型的“美工”。需要做的是從用戶角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計(jì)目標(biāo)，只有經(jīng)過(guò)反復(fù)的推敲、認(rèn)真分析，最終才能打磨出服務(wù)于用戶的彈窗設(shè)計(jì)，所以彈窗該不該加、如何加就成了設(shè)計(jì)師不可推卸的責(zé)任和使命。
本篇文章將圍繞著彈窗類型、使用場(chǎng)景、轉(zhuǎn)化率及常見問(wèn)題為側(cè)重點(diǎn)，將自己對(duì)彈窗的理解、設(shè)計(jì)經(jīng)驗(yàn)分享給大家，幫助大家對(duì)彈窗組件有更清晰的認(rèn)識(shí)，為后續(xù)避坑設(shè)計(jì)出更好的彈窗做準(zhǔn)備。
當(dāng)我們與應(yīng)用產(chǎn)生主動(dòng)或被動(dòng)交互時(shí)，頁(yè)面上層會(huì)彈出容器，將可承載的文本、按鈕、選項(xiàng)、標(biāo)簽或表單等任一內(nèi)容與之組合，就可以用來(lái)傳遞信息、狀態(tài)反饋、引導(dǎo)用戶等操作，這就是彈窗。
彈窗的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對(duì)話的一種方式，在線上各種場(chǎng)景中都有可能碰到，相當(dāng)于產(chǎn)品的線上小助理。不同類型的彈窗其作用不同，但最終都是為了滿足跟用戶之間的友好交流。
彈窗組件的樣式很多，如浮層、對(duì)話框、下拉菜單、toast等，且iOS、Android官方平臺(tái)也都根據(jù)自身的規(guī)范對(duì)組件進(jìn)行命名，不管如何稱呼，其常見的彈窗組件絕大多數(shù)都是由以下元素組成：
用戶在完成任務(wù)的過(guò)程中，界面會(huì)出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過(guò)主動(dòng)點(diǎn)擊才可以進(jìn)行下一步操作，這即是模態(tài)彈窗。
模態(tài)彈窗通常能較好的獲取用戶的視覺(jué)焦點(diǎn)，并通過(guò)承載的內(nèi)容、按鈕主次層級(jí)來(lái)引導(dǎo)用戶完成他們的需求，這也會(huì)根據(jù)用戶、產(chǎn)品側(cè)重點(diǎn)的不同，彈出樣式也有所不同，常見的模態(tài)彈窗有對(duì)話框、動(dòng)作欄、浮層…等。
1.1 對(duì)話框Dialog/Alert
對(duì)話框是很常見的彈窗，主要在打斷用戶后并提供選項(xiàng)操作，對(duì)用戶的干擾較大，通常會(huì)配備1~3個(gè)操作按鈕，而且會(huì)把用戶最期待的或產(chǎn)品最期待用戶操作的按鈕突出顯示。
對(duì)話框類型的彈窗主要分為主動(dòng)、被動(dòng)兩種觸發(fā)類型，主動(dòng)彈窗：信息的二次確認(rèn)、輸入內(nèi)容、前置條件選擇、風(fēng)險(xiǎn)警示等；被動(dòng)彈窗：版本更新、運(yùn)營(yíng)宣傳、消息通知、系統(tǒng)功能授權(quán)等。
1.2 動(dòng)作欄Actionbar
動(dòng)作欄是通過(guò)用戶主動(dòng)操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見。
動(dòng)作欄相比對(duì)話框則能承載更多、更豐富的功能信息，在用戶清晰感知當(dāng)前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁(yè)面更有安全感。
1.3 浮層Popover/Popup
浮層是指用戶操作某個(gè)功能/內(nèi)容后，會(huì)在附近出現(xiàn)一個(gè)帶有視覺(jué)引導(dǎo)性質(zhì)的彈窗，最常見的浮層就是下拉菜單/彈窗等，浮動(dòng)于頂層窗口并指向觸發(fā)操作的位置。
例如很多社交娛樂(lè)類型的應(yīng)用右上角有一個(gè)“+”入口，里面會(huì)放置部分常用功能。部分浮層底部沒(méi)有設(shè)置不透明度的蒙層，為了與頁(yè)面信息更好的區(qū)分，會(huì)給浮層容器加上投影，避免與底部信息混淆。
相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會(huì)打斷用戶的當(dāng)前操作，主要是給予用戶即時(shí)反饋，讓用戶清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強(qiáng)制用戶操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時(shí)間內(nèi)自動(dòng)消失，也可等待用戶操作后消失，常見的有以下幾種：
2.1 提示框Toast/Hud
用于反饋用戶操作成功、警告、錯(cuò)誤等當(dāng)前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級(jí)的模塊統(tǒng)一位置、風(fēng)格即可，無(wú)需用戶有任何操作，出現(xiàn)2s左右自動(dòng)消失。
Toast只有純文字提示，例如格式錯(cuò)誤、刷新成功、刪除成功等；Hud會(huì)使用文字+圖標(biāo)樣式，例如添加到購(gòu)物車、關(guān)注成功等。
2.2 提示對(duì)話框Snackbar
Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會(huì)使用到，可以看作是toast的加強(qiáng)版。一般只出現(xiàn)在屏幕底部，存在的時(shí)間比toast長(zhǎng)，提供0~1個(gè)操作入口，可自動(dòng)消失，也可與用戶產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁(yè)面。
Snackbar反饋的重要程度強(qiáng)于toast，例如，某個(gè)應(yīng)用今天有重要提醒，同時(shí)又不想影響用戶的其他操作，會(huì)在用戶首次進(jìn)入時(shí)彈出提醒，并提供關(guān)閉操作入口，等待用戶通過(guò)手動(dòng)關(guān)閉（部分自動(dòng)關(guān)閉），加強(qiáng)用戶記憶。
2.3 通知Notice
最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動(dòng)消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開消息通知開關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開啟通知權(quán)限。
2.4 透明指示層HUD
HUD是一種在透明元素上通過(guò)填充、反饋用戶當(dāng)前交互操作的指示層，實(shí)時(shí)生效，例如視頻類產(chǎn)品中的調(diào)整音量、亮度、控制進(jìn)度條等。
當(dāng)我們對(duì)彈窗體系有了一定了解后，就需要清楚什么場(chǎng)景需要設(shè)計(jì)彈窗？用什么類型的彈窗？
產(chǎn)品最終都是服務(wù)于用戶，如果僅憑自己的主觀意見亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會(huì)影響用戶體驗(yàn)。什么樣的場(chǎng)景適合什么類型的彈窗，我們可以從以下幾點(diǎn)來(lái)說(shuō)明。
風(fēng)險(xiǎn)警示：當(dāng)用戶的某種操作可能存在風(fēng)險(xiǎn)，為避免操作失誤，會(huì)彈出對(duì)話框打斷用戶，并給予一定的風(fēng)險(xiǎn)提示引起用戶的注意，讓其有足夠的時(shí)間確認(rèn)是否真的需要進(jìn)行下一步操作，如：刪除、放棄福利機(jī)會(huì)、退出登錄等，會(huì)彈出對(duì)話框提示操作后可能引起的后果。
前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿足條件才能進(jìn)入下一步操作，通常這種情況會(huì)根據(jù)內(nèi)容量的多少、重要程度以對(duì)話框或動(dòng)作欄的樣式彈出，例如下單時(shí)選擇優(yōu)惠券、支付方式。
任務(wù)關(guān)鍵節(jié)點(diǎn)：用戶在滿足任務(wù)的基本條件后，需要操作一個(gè)關(guān)鍵步驟才能成功，則會(huì)彈出對(duì)話框讓用戶完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。
這類彈窗主要從產(chǎn)品角度出發(fā)，不會(huì)過(guò)于在乎用戶是否需要、會(huì)不會(huì)反感，都會(huì)引導(dǎo)或強(qiáng)制用戶操作。
例如產(chǎn)品發(fā)布新版本，會(huì)強(qiáng)制用戶更新，否則將無(wú)法使用。還有各大電商APP，在進(jìn)入首頁(yè)時(shí)會(huì)彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶返回造成一定的難度，利用突出的視覺(jué)、動(dòng)態(tài)效果突出主題增加吸引力，以達(dá)到轉(zhuǎn)化用戶的目的。
二次確認(rèn)也是一種打斷用戶的操作行為，但跟上面純粹的打斷用戶相比其作用更大，主要是在用戶已做好選擇的情況下再次彈出確認(rèn)，以免操作結(jié)果造成用戶認(rèn)知上的偏差。雖然從用戶體驗(yàn)角度出發(fā)，用最少的操作、最簡(jiǎn)單的流程滿足用戶所需是產(chǎn)品追求的目標(biāo)之一，但通過(guò)權(quán)和利弊之后，二次確認(rèn)的出現(xiàn)實(shí)屬迫不得已的折中方案，它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達(dá)、重要的內(nèi)容加深二次記憶等作用。
二次確認(rèn)使用得當(dāng)，可以避免用戶、產(chǎn)品的潛在風(fēng)險(xiǎn)，但若是從主觀角度一味的濫用，就成了對(duì)用戶的惡意干擾、影響使用體驗(yàn)，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問(wèn)題，所以需要從業(yè)務(wù)（用戶側(cè)、產(chǎn)品側(cè)）實(shí)際角度出發(fā)，兩相其害（加-影響使用體驗(yàn)；不加-造成一定損失）取其輕的考慮是否需要增加二次確認(rèn)彈窗。
當(dāng)用戶的某個(gè)操作可能帶來(lái)不可逆轉(zhuǎn)、錯(cuò)誤嚴(yán)重程度較高時(shí)，例如：放棄僅有一次機(jī)會(huì)的較好福利、手機(jī)系統(tǒng)還原、應(yīng)用賬號(hào)注銷等，系統(tǒng)都會(huì)給予二次確認(rèn)，降低用戶認(rèn)知偏差后，以確保用戶是經(jīng)過(guò)多次思考才做出的決定，即便后續(xù)給用戶造成損失也不會(huì)過(guò)于降罪產(chǎn)品，產(chǎn)品也算是“問(wèn)心無(wú)愧”了。
常見于用戶操作之后的狀態(tài)反饋，即便用戶沒(méi)有注意到，也不會(huì)造成較大的損失、或結(jié)果已經(jīng)注定，相對(duì)來(lái)說(shuō)成本較低，大部分出現(xiàn)在任務(wù)過(guò)程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶知曉當(dāng)前所處狀態(tài)。
非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類型的彈窗之后或同時(shí)存在。
優(yōu)秀的彈窗需要從視覺(jué)、交互兩方面思考，視覺(jué)上簡(jiǎn)潔、易懂，交互上可操作且可控。
視覺(jué)層面：首先需要做到的是易懂，這時(shí)候就非常注重文案清晰程度及按鈕層級(jí)關(guān)系了，彈出的信息需能直擊要害，用戶看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計(jì)必須簡(jiǎn)潔，在彈出時(shí)需要考慮是否會(huì)過(guò)度影響（影響是一定會(huì)有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來(lái)了電話全屏幕覆蓋（傳統(tǒng)來(lái)電），自己會(huì)以最快的速度掛掉電話，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來(lái)電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來(lái)電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來(lái)電方式）是不是就給了用戶足夠反應(yīng)時(shí)間及緩沖時(shí)間呢？
交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時(shí)基于業(yè)務(wù)需求，產(chǎn)品更希望用戶能進(jìn)行下一步操作而并非回到上一步，即便如此，我們也只能通過(guò)弱化次要操作以突出主要操作，用戶有來(lái)去自由的權(quán)利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會(huì)存在反面作用；另外需注意用戶對(duì)產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶進(jìn)入下一步轉(zhuǎn)化，但不能強(qiáng)制，一定要給用戶提供回去的路（強(qiáng)制版本更新除外），否則，任性的用戶可能會(huì)直接結(jié)束應(yīng)用，甚至因產(chǎn)品過(guò)于霸道直接卸載。
首先，設(shè)計(jì)師應(yīng)該理解產(chǎn)品需求，分別從用戶側(cè)（能給用戶帶來(lái)什么？滿足什么樣的需求？避免什么損失?…）、產(chǎn)品側(cè)（能給產(chǎn)品帶來(lái)什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？…）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計(jì)目標(biāo)，以確保彈窗根據(jù)不同的需求，在恰當(dāng)?shù)臅r(shí)間、適合的樣式合理的呈現(xiàn)給用戶。
其次，在得到設(shè)計(jì)目標(biāo)后，同樣需要從設(shè)計(jì)側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計(jì)角度，團(tuán)隊(duì)所有成員需要對(duì)該組件有清晰且統(tǒng)一的認(rèn)知，了解組件的使用場(chǎng)景，以確保不會(huì)錯(cuò)用、濫用，如果增加或更換新人設(shè)計(jì)師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開發(fā)效率。
在UI設(shè)計(jì)中，組件的設(shè)計(jì)思路基本相通，旨在滿足產(chǎn)品的實(shí)用性、視覺(jué)的統(tǒng)一性，主要圍繞著以下幾點(diǎn)進(jìn)行：
設(shè)計(jì)彈窗時(shí)需要注意信息的主次層級(jí)關(guān)系，優(yōu)先傳達(dá)用戶想要的或產(chǎn)品想要讓用戶知道的，以確保重要的信息在第一時(shí)間傳達(dá)給用戶。
彈窗需要根據(jù)實(shí)際的場(chǎng)景合理使用，不能為了簡(jiǎn)潔而過(guò)分刪減內(nèi)容、更不能畫蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報(bào)告類的提示可以使用簡(jiǎn)單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認(rèn)。
△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶，如果用非模態(tài)很可能被用戶忽略從而帶來(lái)不可逆的損失。
因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡(jiǎn)潔且精確，能用一句話說(shuō)清楚的就不要過(guò)于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時(shí)間內(nèi)清晰的表達(dá)出核心內(nèi)容。
針對(duì)運(yùn)營(yíng)彈窗，如果彈出的時(shí)間不對(duì)或過(guò)于頻繁，可能會(huì)造成用戶反感，所以需要把握好彈出時(shí)機(jī)及頻率。
例如用戶有一張未使用的優(yōu)惠券，如果用戶每次進(jìn)入應(yīng)用都看到彈出提醒，確實(shí)又沒(méi)有購(gòu)買商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進(jìn)入應(yīng)用時(shí)提示、每累計(jì)進(jìn)入應(yīng)用5次后提示、即將到期提示或者用戶有購(gòu)買意愿且優(yōu)惠券支持改品類時(shí)提示等，總之，需要控制在大部分用戶的可接受范圍內(nèi)。
本篇文章主要系統(tǒng)的分析了彈窗組件分類及使用場(chǎng)景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計(jì)師清楚認(rèn)知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計(jì)，都需要有一個(gè)不斷優(yōu)化的過(guò)程，要根據(jù)產(chǎn)品的實(shí)際情況不斷思考與打磨，通過(guò)腦暴或已知問(wèn)題作出更好的改善。
能清楚認(rèn)知、理解、使用彈窗組件是一個(gè)成熟UI設(shè)計(jì)師必備的條件，當(dāng)然，并不能以此定義設(shè)計(jì)師是否優(yōu)秀，在此基礎(chǔ)上，還需通過(guò)持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專業(yè)能力。
大漠飛鷹；人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
2025年，UI/UX設(shè)計(jì)領(lǐng)域正迎來(lái)一系列令人興奮的創(chuàng)新趨勢(shì)。從更具沉浸感的3D元素到人性化的分區(qū)設(shè)計(jì)，從動(dòng)態(tài)排版到模糊與顆粒效果的巧妙運(yùn)用，再到生物識(shí)別技術(shù)的普及和可穿戴設(shè)備的深度適配，這些趨勢(shì)不僅讓界面更加美觀，更提升了用戶體驗(yàn)和情感共鳴。本文將深入探討這些前沿設(shè)計(jì)趨勢(shì)，為設(shè)計(jì)師和產(chǎn)品團(tuán)隊(duì)提供靈感和方向，幫助他們打造出更具吸引力和實(shí)用性的數(shù)字產(chǎn)品。
2025 年，數(shù)字設(shè)計(jì)領(lǐng)域會(huì)有很多新機(jī)會(huì)，這都得靠創(chuàng)新來(lái)推動(dòng)。設(shè)計(jì)師們現(xiàn)在越來(lái)越大膽，敢打破傳統(tǒng)套路，設(shè)計(jì)出的東西不僅要實(shí)用，還得有吸引力，能真正打動(dòng)人。
比如，會(huì)有更多 3D 元素加入設(shè)計(jì)里，讓用戶感覺(jué)更真實(shí)、更沉浸；還有很多設(shè)計(jì)會(huì)把 “方便用戶” 和 “拉近人際距離” 放在首位，不再只追求技術(shù)炫酷，而是更關(guān)注用戶的實(shí)際需求和情感感受。
那么我們來(lái)看一下有哪些趨勢(shì)~
你有沒(méi)有過(guò)這樣的體驗(yàn)？打開一個(gè) APP，信息像 “亂燉” 一樣堆在一起，找半天找不到重點(diǎn)。
2025 年的設(shè)計(jì)師學(xué)會(huì)了 “斷舍離”
就像日式便當(dāng)盒把飯菜分成不同格子，現(xiàn)在設(shè)計(jì)師也把網(wǎng)頁(yè)或 APP 界面分成多個(gè) “小格子”，每個(gè)格子放不同功能或內(nèi)容（比如數(shù)據(jù)、圖片、文字）。
好處：信息更清晰，用戶一眼就能看出重點(diǎn)，而且設(shè)計(jì)師可以靈活排列，讓頁(yè)面既整齊又好看。
比如有的網(wǎng)站用這種格子展示不同模塊，重要內(nèi)容更突出，干擾少。
分區(qū)設(shè)計(jì)技巧：格子的大小、間距、邊框都有講究！重要內(nèi)容的格子更大、邊框更粗，次要信息的格子更 “低調(diào)”，就像媽媽給你裝便當(dāng)，愛吃的菜永遠(yuǎn)擺在最顯眼的位置。
圖片網(wǎng)站鏈接：https://selestial.co/
以前網(wǎng)頁(yè)里的 3D 圖像是 “擺件”，現(xiàn)在它們會(huì) “互動(dòng)” 了！
3D 效果不是新鮮事，但現(xiàn)在更厲害：能互動(dòng)、能沉浸！
比如網(wǎng)頁(yè)里的物體可以 360 度旋轉(zhuǎn)，虛擬試穿衣服、查看產(chǎn)品細(xì)節(jié)，甚至結(jié)合 AR/VR 讓你感覺(jué)身臨其境。
現(xiàn)在手機(jī)和瀏覽器性能更強(qiáng)了，3D 元素加載更快，甚至能在低配設(shè)備上流暢運(yùn)行，設(shè)計(jì)師可以大膽用毛茸茸的 3D 圖標(biāo)、會(huì) “呼吸” 的動(dòng)態(tài)按鈕（比如按鈕按下時(shí)像真的被按下去一樣凹陷）。
好處：畫面更立體、有趣，用戶體驗(yàn)像在真實(shí)世界互動(dòng)，不再是死板的圖片和文字。
圖片網(wǎng)站鏈接：https://kevinhilgendorf.com/
圖片網(wǎng)站鏈接：https://labs.chaingpt.org/
字體不再老老實(shí)實(shí)不動(dòng)，而是會(huì) “跳舞”：大小變化、顏色漸變、跟著用戶操作移動(dòng)，甚至根據(jù)內(nèi)容情緒調(diào)整動(dòng)畫（比如錯(cuò)誤提示字體變紅閃爍，成功提示變綠飄動(dòng)）。
好處：吸引注意力，傳遞品牌個(gè)性，比如讓標(biāo)題動(dòng)起來(lái)，用戶一眼就被抓住。
文字不再是 “死板的符號(hào)”，而是會(huì) “表演” 的演員，我們可以做一些交互創(chuàng)意方面的案例假設(shè)
案例1：一個(gè)新聞網(wǎng)站的標(biāo)題 “今日熱點(diǎn)”，當(dāng)你滾動(dòng)頁(yè)面時(shí)，“熱點(diǎn)” 兩個(gè)字會(huì)像火苗一樣跳動(dòng)，吸引你點(diǎn)擊；電商網(wǎng)站的 “限時(shí)折扣” 按鈕，文字會(huì)從左到右 “跑馬燈” 式滾動(dòng)，仿佛在喊 “快看我！”。
案例2：社交媒體 APP 的評(píng)論區(qū)，當(dāng)有人給你發(fā) “生日快樂(lè)”，“生日快樂(lè)” 這幾個(gè)字會(huì)飄出彩色 confetti（紙屑），還會(huì)放大縮??；如果收到一條提醒 “網(wǎng)絡(luò)連接失敗”，文字會(huì)變成紅色，輕微抖動(dòng)，像在著急地告訴你 “出問(wèn)題啦”。
案例3：未來(lái)的動(dòng)態(tài)字體甚至能根據(jù)你的輸入語(yǔ)氣自動(dòng)調(diào)整！比如你在聊天框里輸入 “氣死我了！”，發(fā)送后文字會(huì)變成紅色，扭曲變形，模擬 “憤怒” 的情緒；輸入 “哈哈哈哈哈”，文字會(huì)笑著上下彈跳，自帶喜感。
圖片網(wǎng)站鏈接：https://wodniack.dev/
圖片網(wǎng)站鏈接：https://romaingranai.xyz/
背景不再是純色或簡(jiǎn)單漸變，而是加了 “濾鏡”：有的模糊像柔光，有的帶顆粒感像老照片，讓界面更有層次和溫度。
好處：不搶主內(nèi)容的風(fēng)頭，卻能增加細(xì)膩的質(zhì)感，讓用戶覺(jué)得界面更精致、有 “呼吸感”。
想象一下：你的屏幕不再是冰冷的玻璃，而是像磨砂質(zhì)感的燈罩，透著柔和的光 ——
例如：一個(gè)閱讀 APP 的背景，不是純灰色，而是帶點(diǎn)模糊的淺灰，像隔著一層薄霧，文字浮在上面更突出，眼睛看久了也不累；
短視頻 APP 的點(diǎn)贊按鈕背后，有淡淡的顆粒感，像老電影膠片，點(diǎn)擊時(shí)還會(huì)有輕微的 “沙沙” 聲，復(fù)古又治愈。
例如：有些網(wǎng)站的光標(biāo)變成了半透明的小圓圈，移動(dòng)時(shí)會(huì)在背景留下淡淡的拖影，像在雪地上踩出腳印；
購(gòu)物車圖標(biāo)點(diǎn)擊時(shí)，周圍會(huì)升起細(xì)小的顆粒，像撒了一把金粉，讓操作更有 “儀式感”。
現(xiàn)代人看膩了 “完美到反光” 的數(shù)字界面，這種帶點(diǎn) “不完美” 的質(zhì)感，反而讓人感覺(jué)親切，像摸到了真實(shí)的紙張或布料。
圖片網(wǎng)站鏈接：https://breadzine.com/
以前的暗色模式是 “純黑配白字”，刺眼又冰冷，現(xiàn)在設(shè)計(jì)師給它加了 “柔光濾鏡”：
不是純黑背景配白字那種刺眼的暗模式，而是柔和的 “低對(duì)比度暗調(diào)”：比如深灰配淺灰，帶點(diǎn)淡淡光影，像傍晚的光線一樣舒服。
好處：保護(hù)眼睛，減少視覺(jué)疲勞，還營(yíng)造出高級(jí)、安靜的氛圍，比傳統(tǒng)暗模式更溫馨。
顏色更溫柔：比如微信的暗色模式，背景不是純黑，而是深海軍藍(lán)，文字是淺灰色，圖標(biāo)帶一點(diǎn)淡金色光澤，晚上刷手機(jī)像在暖黃色的臺(tái)燈下看書，不刺眼還很高級(jí)。
場(chǎng)景化設(shè)計(jì)：一個(gè)助眠 APP 的低光模式，界面會(huì)模擬 “月光效果”，背景有淡淡的云層陰影，按鈕像夜空中的星星一樣微微閃爍，配合白噪音，讓你還沒(méi)開始冥想就先放松下來(lái)。
保護(hù)眼睛更貼心：低對(duì)比度設(shè)計(jì)減少視覺(jué)疲勞，尤其適合長(zhǎng)時(shí)間用手機(jī)的上班族、學(xué)生黨，再也不用擔(dān)心晚上刷手機(jī) “亮瞎眼”。
圖片網(wǎng)站鏈接：https://www.chromatique.studio/
圖片網(wǎng)站鏈接：https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page
圖片網(wǎng)站鏈接：https://silverdrive.nl/
你有沒(méi)有被 APP或網(wǎng)站 的 “謎之提示” 搞懵過(guò)？比如 “操作異常，請(qǐng)重試”—— 到底哪里異常？現(xiàn)在設(shè)計(jì)師開始 “說(shuō)人話” 了
按鈕上的字、提示信息、錯(cuò)誤提醒…… 這些細(xì)節(jié)文字越來(lái)越重要。比如 “提交” 改成 “確認(rèn)發(fā)布”，錯(cuò)誤提示寫 “網(wǎng)絡(luò)好像斷了，點(diǎn)擊重試” 而不是冷冰冰的 “錯(cuò)誤 404”。
好處：讓用戶知道該做什么，減少操作困惑，就像有個(gè)小助手在旁邊輕聲指導(dǎo)。
按鈕文案更具體：以前 “提交” 按鈕，現(xiàn)在改成 “確認(rèn)并發(fā)布動(dòng)態(tài)”，你一下就知道點(diǎn)了之后會(huì)發(fā)生什么；購(gòu)物車的 “結(jié)算” 按鈕變成 “去支付（含 3 件商品）”，清楚告訴你當(dāng)前購(gòu)物車數(shù)量。
錯(cuò)誤提示會(huì) “安慰人”：當(dāng)你登錄密碼輸錯(cuò)，不再是 “密碼錯(cuò)誤”，而是 “密碼好像不對(duì)哦，是不是字母大小寫搞錯(cuò)了？試試找回密碼吧～”，帶點(diǎn) emoji 和親切感，讓你不煩躁。
空狀態(tài)會(huì) “引導(dǎo)”：比如一個(gè)筆記 APP 的空白頁(yè)，不再是冷冰冰的 “暫無(wú)筆記”，而是畫著一個(gè)小臺(tái)燈，配文 “點(diǎn)擊新建筆記，開始記錄今天的小確幸吧～”，鼓勵(lì)你行動(dòng)起來(lái)。
圖片網(wǎng)站鏈接：https://clickup.com/
圖片網(wǎng)站鏈接：https://www.headspace.com/
不用記復(fù)雜密碼了！指紋、人臉、語(yǔ)音識(shí)別越來(lái)越普及，甚至未來(lái)可能用眼動(dòng)或神經(jīng)信號(hào)驗(yàn)證。比如手機(jī)刷臉解鎖、支付時(shí)掃指紋，又快又安全。
好處：再也不怕忘記密碼，登錄像 “本能反應(yīng)” 一樣自然。
你還記得自己設(shè)過(guò)多少個(gè)密碼嗎？郵箱、銀行、社交軟件……2025 年，你只需要 “露個(gè)臉”
“掃個(gè)指紋”：
生活場(chǎng)景：早上上班，刷臉打開公司門禁；午休用指紋支付買咖啡；晚上回家，虹膜識(shí)別解鎖手機(jī)，全程不用輸密碼。甚至連銀行 APP 轉(zhuǎn)賬，看一眼攝像頭就能確認(rèn)身份，安全又快捷。
默默驗(yàn)證更省心：有些 APP 會(huì) “偷偷” 驗(yàn)證你 —— 比如你常用手機(jī)的手勢(shì)是右手拇指解鎖，系統(tǒng)會(huì)記錄你的握持姿勢(shì)，當(dāng)檢測(cè)到左手拿手機(jī)且指紋不符時(shí)，自動(dòng)觸發(fā)安全提醒，不用你手動(dòng)操作，安全藏在細(xì)節(jié)里。
特殊場(chǎng)景：比如戴著手套不方便指紋解鎖？未來(lái)的可穿戴設(shè)備可能支持 “靜脈識(shí)別”，通過(guò)血管紋路確認(rèn)身份，下雨天、運(yùn)動(dòng)時(shí)也能輕松解鎖。
圖片網(wǎng)站鏈接：https://dribbble.com/shots/23201694-Face-id
智能手表不再是 “縮小版手機(jī)”，而是更懂你的 “貼身伙伴”：
智能手表、VR 眼鏡、健康手環(huán)等設(shè)備的設(shè)計(jì)越來(lái)越難：屏幕小，怎么讓用戶操作方便？
比如用手勢(shì)滑動(dòng)、語(yǔ)音命令，甚至靠眨眼控制；還要考慮戴著舒服（輕、貼合手腕）、續(xù)航久、適應(yīng)各種場(chǎng)景（運(yùn)動(dòng)時(shí)防水，強(qiáng)光下看得清）。
小屏幕大講究：比如一個(gè)運(yùn)動(dòng)手表，跑步時(shí)屏幕自動(dòng)切換成 “極簡(jiǎn)模式”，只顯示配速、心率、里程，字體超大，你 glancing（掃一眼）就能看清；當(dāng)你停下來(lái)休息，屏幕會(huì)慢慢顯示更詳細(xì)的數(shù)據(jù)，像個(gè)貼心教練。
交互方式創(chuàng)新：VR 眼鏡不再靠手柄操作，你眨眨眼就能切換菜單，點(diǎn)點(diǎn)頭就能確認(rèn)；智能手環(huán)檢測(cè)到你睡眠不好，早上會(huì)震動(dòng)提醒 “昨晚睡眠質(zhì)量一般，今天記得多喝水哦”，還會(huì)同步調(diào)整手機(jī)的屏幕亮度，幫你緩解疲勞。
場(chǎng)景化適配：比如滑雪專用智能眼鏡，強(qiáng)光下自動(dòng)調(diào)暗鏡片，檢測(cè)到你加速滑行時(shí)，界面只顯示速度和路線，避免分心；潛水手表接觸到水時(shí)，自動(dòng)鎖定屏幕防止誤觸，浮出水面后又恢復(fù)正常。
圖片網(wǎng)站鏈接：https://inspect-ar.com/en/
圖片網(wǎng)站鏈接：https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI
界面不再只追求好看，還要讓用戶用得爽、有情感共鳴：分區(qū)清晰、3D 互動(dòng)、動(dòng)態(tài)字體吸引眼球，模糊背景和低光模式讓眼睛舒服；UX 寫作和生物識(shí)別減少操作麻煩，可穿戴設(shè)備更懂用戶的使用場(chǎng)景。
本文由人人都是產(chǎn)品經(jīng)理作者【南設(shè)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
出海產(chǎn)品面臨著語(yǔ)言、文化和用戶習(xí)慣的巨大差異，這對(duì)UI設(shè)計(jì)師提出了更高的要求。本文為出海產(chǎn)品的UI設(shè)計(jì)提供了全面的干貨指南，從文字、圖標(biāo)、色彩、圖案到交互手勢(shì)等多個(gè)角度，詳細(xì)拆解了設(shè)計(jì)師在面對(duì)小語(yǔ)種和不同文化背景時(shí)需要注意的關(guān)鍵點(diǎn)。
隨著TikTok的海外關(guān)注度和影響力逐漸擴(kuò)展、小紅書在海外友人的媒體圈炙手可熱，國(guó)內(nèi)的互聯(lián)網(wǎng)市場(chǎng)逐漸趨于飽和，互聯(lián)網(wǎng)產(chǎn)品紛紛向東南亞、非洲、拉丁美洲、歐洲擴(kuò)展商業(yè)版圖，這也為UI設(shè)計(jì)師創(chuàng)造了新的機(jī)遇。
對(duì)于出海產(chǎn)品而言，UI設(shè)計(jì)師需要有基礎(chǔ)的語(yǔ)言文化了解，在此基礎(chǔ)上去進(jìn)行設(shè)計(jì)才能真正滿足海外用戶的需求，本文主要從UI的文字、圖標(biāo)、色彩等幾個(gè)角度來(lái)拆解設(shè)計(jì)師在設(shè)計(jì)海外項(xiàng)目時(shí)需要注意的關(guān)鍵點(diǎn)，避免因?yàn)槲幕?xí)俗差異而影響產(chǎn)品的易用性。
目錄：
1.小語(yǔ)種文字：超長(zhǎng)文本的處理規(guī)則、鏡像語(yǔ)言、小語(yǔ)種適配檢視技巧
2.圖標(biāo)：需要鏡像的典型圖標(biāo)、不需要鏡像的典型圖標(biāo)、圖標(biāo)特例
3.顏色
4.圖案：禁忌圖標(biāo)、禁忌手勢(shì)、禁忌物品、禁忌動(dòng)物
5.交互手勢(shì)
當(dāng)在某些語(yǔ)種下出現(xiàn)界面用語(yǔ)超長(zhǎng)顯示不完整的情況，應(yīng)按照如下優(yōu)先級(jí)進(jìn)行處理：
（1）精簡(jiǎn)界面用語(yǔ)
在保證可理解的前提下，考慮對(duì)該語(yǔ)言的翻譯進(jìn)一步精簡(jiǎn)，采用其他較短的近義詞或者精簡(jiǎn)表達(dá)，如“save number”在界面用語(yǔ)超長(zhǎng)時(shí)應(yīng)精簡(jiǎn)為“save”。
（2）動(dòng)態(tài)布局
當(dāng)控件周圍沒(méi)有其他控件沖突時(shí)，控件可根據(jù)界面用語(yǔ)長(zhǎng)度動(dòng)態(tài)擴(kuò)展，如按鈕。
（3）縮小文字
將文本逐級(jí)縮小，建議最小縮小到18sp/dp。
??并列的層級(jí)關(guān)系，文本超長(zhǎng)時(shí)所有文字需要同時(shí)縮小字號(hào)
（4）多行顯示
在設(shè)計(jì)中文時(shí)，提前考慮預(yù)留小語(yǔ)種換行空間，??按音節(jié)換行。
（5）跑馬燈
避免同意界面使用過(guò)多的跑馬燈，1-3個(gè)為宜。過(guò)多的跑馬燈會(huì)分散用戶注意力，界面顯示混亂。跑馬燈占用系統(tǒng)資源，影響性能，過(guò)多的跑馬燈可能會(huì)導(dǎo)致卡頓。
（6）打點(diǎn)截?cái)?/p>
顯示不下到文字截?cái)囡@示并在末尾增加“…”
截?cái)嗟氖褂脠?chǎng)景：
A.用戶自定義內(nèi)容，如文件名，相冊(cè)名
B.某處顯示空間有限，但可以在本層級(jí)/上一層級(jí)/下一層級(jí)查看到全量?jī)?nèi)容。
阿拉伯、波斯語(yǔ)、烏爾都語(yǔ)、希伯來(lái)語(yǔ)等語(yǔ)言的書寫都是從右向左書寫，和當(dāng)今世界主流語(yǔ)言（如英語(yǔ)）從左向右書寫的方向相反。
受文字書寫方向的影響，阿拉伯語(yǔ)言的用戶對(duì)于左右邏輯的認(rèn)知和英文等LTR （left to right)完全相反，比如習(xí)慣將右側(cè)作為開始，左側(cè)作為結(jié)束。
為了支持RTL語(yǔ)言和用戶習(xí)慣特點(diǎn)，在UI設(shè)計(jì)中，需要在文本，界面布局，手勢(shì)操作和動(dòng)畫，圖標(biāo)等交互元素中滿足RTL的特殊要求。
（1）字串顯示——檢視語(yǔ)言：西班牙語(yǔ)（拉丁美洲）
（2）大字體顯示——檢視語(yǔ)言：西班牙語(yǔ)（拉丁美洲）
（1）后退，前進(jìn)
（2）顯示前進(jìn)方向的圖標(biāo)，如：騎車 發(fā)送 進(jìn)度條。
▲ 阿拉伯語(yǔ)-顯示前進(jìn)方向
（3）右側(cè)具有滑塊的音量圖標(biāo)應(yīng)當(dāng)鏡像，滑塊應(yīng)從右向左顯示，如：音量調(diào)節(jié)。
▲ 阿拉伯語(yǔ)-音量調(diào)節(jié)
（4）表達(dá)含有文本含義的圖標(biāo)，如：對(duì)話框、書寫、備忘錄。
▲ 阿拉伯語(yǔ)-文本含義圖標(biāo)
（1）雖然時(shí)間的線性表示在RTL中被鏡像，但圓形時(shí)間方向不是。對(duì)于RTL需要，時(shí)鐘仍然是順時(shí)針轉(zhuǎn)動(dòng)，時(shí)鐘圖標(biāo)或帶有箭頭指向順時(shí)針圖標(biāo)的刷新圖標(biāo)不應(yīng)該鏡像。
▲ 阿拉伯語(yǔ)-帶有時(shí)間含義的圖標(biāo)
（2）國(guó)際標(biāo)準(zhǔn)的圖標(biāo)不需要鏡像，如藍(lán)牙。
（3）擬物圖標(biāo)不需要鏡像，如SIM卡。
(4) 斜線不需要鏡像 ，如靜音圖標(biāo)。
▲ 阿拉伯語(yǔ)-特殊免鏡像圖標(biāo)
(1)亮度圖標(biāo)需要鏡像：英文習(xí)慣認(rèn)為左邊暗，右邊亮；阿拉伯語(yǔ)習(xí)慣認(rèn)為左亮，右邊暗。
(2)阿拉伯語(yǔ)有自己的問(wèn)號(hào)?
(3)阿拉伯語(yǔ)am.pm的位置要移動(dòng)到時(shí)間左側(cè)
1.中東市場(chǎng)：綠色為主、火紅與黃色慎用。綠色象征吉祥，但敘利亞視黃色為不祥之兆，伊朗不喜愛藍(lán)色。
2.非洲市場(chǎng)：禁忌多樣。黑色普遍被認(rèn)為不祥，紅色在乍得、尼日利亞等國(guó)也不受歡迎。
3.歐洲市場(chǎng)：白色神圣，黃色慎用。
禁忌手勢(shì)
禁忌物品
禁忌動(dòng)物
RTL語(yǔ)言中，帶左右滑動(dòng)方向的圖片或者是左右滑動(dòng)展開功能選項(xiàng)，應(yīng)遵循與英文界面相反的鏡像規(guī)則。
▲
漢語(yǔ)-左滑刪除
以上就是從小語(yǔ)種文字、圖標(biāo)、顏色、圖案、交互手勢(shì)等方面總結(jié)的出海產(chǎn)品設(shè)計(jì)干貨，希望能讓你有所收獲~
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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)是一個(gè)老生常談的話題。在進(jìn)行 UI & UX 設(shè)計(jì)時(shí)，我們經(jīng)常會(huì)忽略一些細(xì)節(jié)，雖然我們并沒(méi)有覺(jué)得有什么問(wèn)題，但往往會(huì)極大地影響用戶的體驗(yàn)，從而影響整個(gè)產(chǎn)品。作者在本文中提出了 6 條提升用戶體驗(yàn)的微技巧，一起來(lái)學(xué)習(xí)吧！
在設(shè)計(jì)高效、易讀和漂亮的 UI 界面時(shí)，只需要小的改動(dòng)就能讓你的設(shè)計(jì)眼前一亮。在這篇文章中，我為你帶來(lái)了另一些容易付諸實(shí)踐的 UI 和 UX 微技巧。這些技巧只需很小的改動(dòng)就可以幫助你提升用戶體驗(yàn)。讓我們開始吧！
如果你有一個(gè)設(shè)計(jì)項(xiàng)目，可以讓你在顏色選擇方面有比較多的自由，不要總是傾向于用彩虹般的顏色來(lái)進(jìn)行設(shè)計(jì)。
如果你走的是彩虹路線，你很快就會(huì)發(fā)現(xiàn)很多內(nèi)容看起來(lái)都不匹配。簡(jiǎn)單地使用一個(gè)基礎(chǔ)色，然后將該顏色的色調(diào)和明暗進(jìn)行變化并應(yīng)用，可以令你的設(shè)計(jì)更加協(xié)調(diào)和一致，并且看起來(lái)更專業(yè)，而不需要那些閃亮的彩虹和需要色彩理論學(xué)位。
UI 可以是干凈的、極簡(jiǎn)的和直截了當(dāng)?shù)模@毋庸置疑。但不能以犧牲用戶體驗(yàn)為代價(jià)。對(duì)于像選項(xiàng)菜單這樣簡(jiǎn)單的東西，要確保用戶只需快速瀏覽一下，就能夠找到選擇的項(xiàng)目。
你不需要在這里追究更多細(xì)節(jié)。簡(jiǎn)潔的粗體就足夠讓用戶輕松的分辨出他們選中的目標(biāo)，而且他們的輸入已經(jīng)得到反饋。
當(dāng)涉及到長(zhǎng)篇文字內(nèi)容時(shí)，你可能會(huì)傾向于使用灰色的中間色調(diào)，這可能沒(méi)什么問(wèn)題。但如果你同時(shí)使用更輕字重的字體，就會(huì)發(fā)現(xiàn)這影響了這段內(nèi)容在任何尺寸屏幕上的可讀性。
不要讓用戶因?yàn)檫@種原因退出頁(yè)面。可以通過(guò)將文字的顏色加深來(lái)簡(jiǎn)單地解決這個(gè)問(wèn)題，讓每個(gè)人都更加易讀。對(duì)于較輕字重的字體，只需將其顏色加深幾個(gè)級(jí)別，就能顯著的改善其可讀性。
你希望用戶的眼睛每次都能快速、有效地注意到頁(yè)面上最重要的元素，并將認(rèn)知的努力降到最低。通過(guò)使用視覺(jué)層級(jí)原則，如字體大小、字重、顏色和布局，僅舉幾例，你可以通過(guò)這些技巧輕松地把最重要的元素放在突出位置。遵循這些原則有助于改善用戶的體驗(yàn)，并有助于引導(dǎo)用戶以更直接、準(zhǔn)確地方式使用產(chǎn)品。
在用戶進(jìn)行操作之前，特別是點(diǎn)擊某些 CTA 按鈕之前，要確保他們不會(huì)被蒙在鼓里，知道接下來(lái)會(huì)發(fā)生什么。在執(zhí)行操作之前，始終讓用戶清楚地了解他們?cè)邳c(diǎn)擊突出顯示的 CTA 按鈕時(shí)可以期待些什么。改善每一步的用戶體驗(yàn)，不要讓他們?cè)诼贸讨腥魏我粋€(gè)觸點(diǎn)產(chǎn)生疑問(wèn)。
CTA 按鈕在頁(yè)面中哪怕不是最重要的部分，也是最重要的之一，讓它在頁(yè)面中突出出來(lái)!
不要讓用戶將它與頁(yè)面上其他類型的元素（例如通知或標(biāo)簽）混淆。它需要很容易地被分辨出來(lái)，而這可以通過(guò)簡(jiǎn)單地為 CTA 設(shè)置單獨(dú)一種顏色就做到。當(dāng)然，你可以在尺寸、形狀等方面做更多的細(xì)節(jié)，但只要為你的 CTA 保留一種顏色，僅此一點(diǎn)就可以減少大部分問(wèn)題。
我希望通過(guò)這幾條簡(jiǎn)短的小貼士，你能意識(shí)到對(duì)你的設(shè)計(jì)進(jìn)行小的調(diào)整也能帶來(lái)完全不一樣的用戶體驗(yàn)。
譯者：吳鵬飛；授權(quán)獲取：吳鵬飛；審核指導(dǎo)：王翎旭；
本文由@三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gcdaj.cn
