• 
    
    <ruby id="2qhst"></ruby>
    <sub id="2qhst"></sub>
    <menuitem id="2qhst"></menuitem>
      亚洲精品久久久久久久蜜桃臀,亚洲欧美国产免费综合视频,91情侣视频,日韩精品内射视频免费观看

      首頁

      蘭亭妙微UI設(shè)計公司:10 個產(chǎn)品趣味設(shè)計細節(jié)拆解:高手如何用巧思打動用戶

      清陽 設(shè)計思維

      好奇心是用戶探索產(chǎn)品的核心驅(qū)動力,有趣、新穎、有溫度的設(shè)計,能快速抓住注意力、激發(fā)互動欲,讓產(chǎn)品從同質(zhì)化中脫穎而出。本文精選 10 個趣味 UI/UX 設(shè)計案例,從情緒表達、互動引導(dǎo)、視覺風(fēng)格等維度拆解,蘭亭妙微UI設(shè)計公司幫你快速 get 高手的設(shè)計思路。
       

       

      1. 形象化心情場景:讓情緒表達更直觀

      image.png

      日記類產(chǎn)品的核心是記錄情緒,Moo 日記 App 打破傳統(tǒng)文字 / 單色標(biāo)簽的局限,為每一種心情匹配專屬動態(tài)場景插畫
       
      動態(tài)視覺讓情緒傳遞更具象,豐富的標(biāo)簽體系覆蓋更多情緒狀態(tài),用戶無需文字描述,就能精準(zhǔn)定格當(dāng)下感受,提升記錄的愉悅感與完成度。
       

      2. 萌系 IP 陪練:把健身變成趣味互動

      image.png

      健康需求崛起讓運動類產(chǎn)品競爭加劇,Rumbo 健身 App 以毛茸茸軟萌 IP作為健身伙伴,替代冰冷的器械 / 數(shù)據(jù)展示。
       
      軟萌形象弱化健身的枯燥感與壓力感,用陪伴感建立情感聯(lián)結(jié),讓用戶更愿意堅持訓(xùn)練日程,輕松實現(xiàn)產(chǎn)品差異化。
       

      3. 童趣動效圖標(biāo):喚醒情感共鳴

      image.png

      動態(tài)圖標(biāo)是提升模塊關(guān)注度的利器,孩子王 App 首頁金剛區(qū)的「兒童館」圖標(biāo),采用小孩側(cè)空翻入場動效
       
      靈動的童趣動作貼合產(chǎn)品定位,既突出核心功能入口,又喚醒用戶童年記憶,用情感共鳴降低用戶抵觸心理,提升點擊意愿。
       

      4. 結(jié)構(gòu)化空狀態(tài):告別單調(diào)空白

      image.png

      新用戶首次使用時,空狀態(tài)是極易被忽視的體驗觸點。Moo 日記個人中心相冊入口,摒棄傳統(tǒng)文字 + 簡單插畫的形式,采用照片結(jié)構(gòu)化展示填充空狀態(tài)。
       
      既讓界面更飽滿、不突兀,又提前暗示相冊功能形態(tài),降低用戶認知成本,讓無數(shù)據(jù)頁面也有設(shè)計感。
       

      5. 對話式引導(dǎo):像聊天一樣完成操作

      image.png

      生硬的步驟指引容易讓用戶放棄,罐頭冥想 App 采用朋友式對話交互做操作引導(dǎo)。
       
      溫和的語氣、生活化的表達,消解用戶防備心,讓引導(dǎo)過程更輕松自然,大幅提升流程完成率,適配冥想類產(chǎn)品的舒緩調(diào)性。
       

      6. 簽到前后差異化:兼顧吸引與體驗

      image.png

      簽到是提升用戶留存的經(jīng)典手段,美團外賣會員簽到做了精準(zhǔn)的視覺分層設(shè)計:
       
      • 簽到前:紅包樣式 +搖擺動效,強視覺吸引促使用戶點擊;
      • 簽到后:進度條展示,弱化視覺比重,避免遮擋核心功能。
         
        一強一弱的設(shè)計,既保證簽到轉(zhuǎn)化率,又不影響整體界面體驗。
       

      7. 個性個人中心:用 IP 抓住眼球

      image.png

      image.png

      個性化時代,千篇一律的個人中心已無法滿足用戶。白日夢 App 采用鬼馬動態(tài) IP+ 獨特視覺風(fēng)格,打造辨識度極高的個人中心。
       
      呆萌有趣的動態(tài)效果瞬間抓人眼球,滿足用戶對獨特性的追求,強化產(chǎn)品記憶點。
       

      8. 手繪暖系風(fēng)格:營造溫馨氛圍

      image.png

      UI 風(fēng)格日趨多元,獨特畫風(fēng)能深化用戶印象。好好養(yǎng)寵物 App 主打手繪風(fēng) + 暖色系,手繪圖標(biāo)、治愈插畫貫穿界面。
       
      溫暖柔和的視覺感受,貼合寵物陪伴的產(chǎn)品調(diào)性,讓用戶使用時倍感溫馨,提升情感依附。
       

      9. 電子相冊空狀態(tài):觸發(fā)場景聯(lián)想

      image.png

      馬蜂窩 App 的空狀態(tài)設(shè)計緊扣旅行屬性,采用相框 + 隨機風(fēng)景插畫形式,點擊可切換不同風(fēng)景。
       
      模擬電子相冊的交互,喚醒用戶旅行回憶,激發(fā)創(chuàng)作 / 分享欲,讓空狀態(tài)從 “無用頁面” 變成 “情感觸發(fā)點”。
       

      10. 自定義形象裝扮:綁定個性化與轉(zhuǎn)化

      image.png

      用戶追求專屬體驗,好柿花生 App 在個人中心開放形象自定義功能,裝扮道具可通過抽獎獲取。
       
      既滿足用戶個性化展示需求,又以抽獎機制提升用戶活躍度與商業(yè)轉(zhuǎn)化,實現(xiàn)體驗與收益雙贏。
       
      轉(zhuǎn)載:優(yōu)設(shè)

      蘭亭妙微(藍藍設(shè)計)www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標(biāo)定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

       

      image.png

      蘭亭妙微|UI 產(chǎn)品細節(jié)體驗:拆解優(yōu)秀產(chǎn)品設(shè)計思維

      濤濤 設(shè)計思維

      在蘭亭秒微為各行業(yè)客戶做產(chǎn)品 UI 設(shè)計與體驗優(yōu)化時,我們一直堅持向大廠學(xué)細節(jié)、從用戶看本質(zhì)。大廠產(chǎn)品之所以好用、耐看、留得住用戶,核心不在于視覺多炫酷,而在于把用戶行為、場景需求、商業(yè)目標(biāo)藏在每一個細節(jié)里。

      蘭亭妙微|被忽略的 UI 設(shè)計表現(xiàn)技巧:細節(jié)決定體驗上限

      濤濤 交互設(shè)計及用戶體驗

      在蘭亭秒微的 UI 設(shè)計與產(chǎn)品體驗優(yōu)化工作中,我們始終堅信:頂級界面不只靠規(guī)范,更靠被忽略的細節(jié)技巧。很多設(shè)計師專注于布局、色彩、組件搭建,卻對手勢、動效、引導(dǎo)、空狀態(tài)等 “隱性體驗” 不夠重視。

      蘭亭妙微|探究 UI 設(shè)計中形狀的創(chuàng)意與應(yīng)用

      濤濤 B端ui設(shè)計文章及欣賞

      在蘭亭秒微服務(wù)企業(yè)級產(chǎn)品、移動端 App、品牌視覺界面的全流程設(shè)計中,形狀是貫穿視覺表達、交互體驗與品牌識別的核心語言。形狀不只是界面裝飾,更是引導(dǎo)用戶認知、傳遞產(chǎn)品氣質(zhì)、強化品牌記憶的關(guān)鍵載體。結(jié)合實戰(zhàn)案例,我們系統(tǒng)拆解形狀在 UI 中的設(shè)計原則、應(yīng)用場景與落地方法。

      蘭亭妙微帶您欣賞ECO 礦山自動駕駛系統(tǒng) UI/UX 設(shè)計

      藍藍設(shè)計的小編 系統(tǒng)UI設(shè)計文章及欣賞

       

      一、視覺設(shè)計:專業(yè)感與場景感的極致統(tǒng)一

      ECO 系統(tǒng)的視覺體系完全貼合礦山工業(yè)場景,以深邃的暗黑為基底,搭配高辨識度的科技綠作為主色調(diào),既凸顯了工業(yè)系統(tǒng)的嚴謹性,又通過高對比度讓核心數(shù)據(jù)、車輛狀態(tài)、區(qū)域標(biāo)識一目了然,完美適配礦山復(fù)雜的監(jiān)控與操作需求。
       
      • 3D 礦山地形可視化,真實還原礦區(qū)道路、裝載區(qū)、限速區(qū)等場景,讓調(diào)度人員直觀掌握全局;
      • 用綠、黃、紅三色區(qū)分車輛健康狀態(tài)、區(qū)域風(fēng)險等級,用綠色雷達圈標(biāo)注車輛感知范圍,視覺預(yù)警清晰直觀;
      • 全端視覺風(fēng)格高度統(tǒng)一,從全局調(diào)度、單車監(jiān)控到地圖編輯,保持一致的色彩規(guī)范、字體圖標(biāo)與布局邏輯,強化品牌專業(yè)感。
       

      二、信息架構(gòu):全流程覆蓋,服務(wù)礦山核心場景

      系統(tǒng)的信息架構(gòu)圍繞礦山自動駕駛?cè)鞒檀罱ǎ瑢蛹壡逦⒐δ芡暾采w調(diào)度、監(jiān)控、管理全場景:
       
      • 全局調(diào)度頁:聚合全礦區(qū)車輛位置、運行狀態(tài)、設(shè)備數(shù)據(jù),用標(biāo)簽分類運輸設(shè)備、采礦設(shè)備、輔助設(shè)備,讓調(diào)度人員一眼掌握全局;
      • 單車監(jiān)控頁:聚焦單臺車輛的實時位置、行駛速度、車輛姿態(tài)、周邊環(huán)境,搭配多視角攝像頭畫面,實現(xiàn)精準(zhǔn)監(jiān)控;
      • 地圖編輯頁:提供礦區(qū)道路、區(qū)域、錨點的可視化編輯功能,支持合規(guī)性校驗與狀態(tài)管理,滿足礦區(qū)動態(tài)規(guī)劃需求;
      • 車輛狀態(tài)頁:用卡片式布局展示每臺車輛的健康度、運行狀態(tài),搭配快捷操作按鈕,實現(xiàn)高效管理。

      三、交互體驗:高效便捷,適配工業(yè)操作需求

      交互設(shè)計完全服務(wù)于礦山調(diào)度的專業(yè)場景,兼顧安全性與高效性:
       
      • 多視角切換功能,支持全局 3D 視圖、單車近景視圖、分屏聯(lián)動視圖,滿足不同監(jiān)控需求;
      • 快捷操作欄集成緊急停止、遠程接管、限速設(shè)置等核心功能,一鍵觸達,保障礦山作業(yè)安全;
      • 可視化倒計時、狀態(tài)進度條、合規(guī)性校驗提示,讓操作狀態(tài)清晰可感知,降低操作失誤風(fēng)險;
      • 多端適配設(shè)計,適配電腦端大屏調(diào)度與移動端便攜監(jiān)控,實現(xiàn)全場景操作無縫銜接。

       


       

      四、蘭亭妙微實踐延伸

       
      蘭亭妙微深耕工業(yè) B 端、企業(yè)級產(chǎn)品 UI/UX 設(shè)計多年,擁有豐富的全端產(chǎn)品設(shè)計、改版、重構(gòu)經(jīng)驗。近期,蘭亭妙微完成了上市公司競業(yè)達教育軟件三端(平臺端、教室端、移動端)UI/UE 全案重構(gòu),實現(xiàn)三端風(fēng)格高度統(tǒng)一、體驗一體化,獲得客戶高度認可。
       
      蘭亭妙微始終堅持以用戶為中心的設(shè)計理念,無論是礦山自動駕駛這類工業(yè) B 端產(chǎn)品,還是教育類 C 端產(chǎn)品,都以貼合場景、提升效率、保障安全為核心,打造專業(yè)、易用的界面設(shè)計。如果您有工業(yè)系統(tǒng)、企業(yè)軟件的 UI/UE 設(shè)計、產(chǎn)品改版需求,歡迎與蘭亭妙微對接,我們將以專業(yè)設(shè)計能力,為您打造貼合場景、體驗優(yōu)質(zhì)的產(chǎn)品解決方案。
       

       

      五、設(shè)計總結(jié)

       
      ECO 礦山自動駕駛系統(tǒng)的設(shè)計,完美詮釋了工業(yè) B 端產(chǎn)品的核心設(shè)計邏輯:視覺貼合場景、架構(gòu)服務(wù)流程、交互保障安全。它不僅是一套功能完善的礦山調(diào)度系統(tǒng),更通過優(yōu)秀的 UI/UX 設(shè)計,讓復(fù)雜的工業(yè)技術(shù)變得直觀、易用,為同類工業(yè)產(chǎn)品提供了優(yōu)質(zhì)的設(shè)計范本。
       

      蘭亭妙微(藍藍設(shè)計)www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標(biāo)定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

       

      image.png

      蘭亭妙微|UI 設(shè)計中的網(wǎng)格系統(tǒng):讓界面秩序與體驗雙升級

      濤濤 B端ui設(shè)計文章及欣賞

      在蘭亭秒微為企業(yè)級軟件、移動端 App、數(shù)據(jù)可視化平臺等項目做 UI 設(shè)計時,我們始終把網(wǎng)格系統(tǒng)作為界面規(guī)范的核心底層框架。很多團隊容易把網(wǎng)格當(dāng)成 “輔助線”,卻忽略它是統(tǒng)一視覺節(jié)奏、提升協(xié)作效率、保障多端還原度的關(guān)鍵工具。結(jié)合十六年行業(yè)實戰(zhàn)經(jīng)驗,我們把網(wǎng)格系統(tǒng)的原理、構(gòu)成與落地方法,整理成一套可直接復(fù)用的設(shè)計標(biāo)準(zhǔn)。

      一篇講透!設(shè)計師必看的交互基礎(chǔ)術(shù)語全解,蘭亭妙微UI設(shè)計公司

      清陽 交互設(shè)計及用戶體驗

      本文聚焦交互設(shè)計核心認知,清晰區(qū)分UI 設(shè)計、交互設(shè)計、UX 體驗設(shè)計,并逐一拆解高頻交互術(shù)語,蘭亭妙微UI設(shè)計公司幫你快速建立完整的交互知識體系。

      image.png

      二、交互設(shè)計核心認知:分清 UI / 交互 / UX

       
      很多剛?cè)胄械脑O(shè)計師,容易混淆 UI、交互、UX 三者的邊界,先把核心定義與關(guān)系理清楚。

      image.png

      1. 三者核心定義

       

      • UI 界面設(shè)計:聚焦產(chǎn)品最終視覺呈現(xiàn),負責(zé)排版布局、色彩、圖標(biāo)、視覺樣式等落地工作,核心是把界面做美觀、規(guī)整
      • 交互設(shè)計(IXD):制定界面操作規(guī)則與功能使用流程,比如外賣下單步驟、提醒設(shè)置邏輯、AI 對話交互方式等,核心是讓用戶會用、好用
      • UX 體驗設(shè)計:以提升整體用戶體驗為目標(biāo),覆蓋需求分析、交互設(shè)計、UI 設(shè)計、用戶測試等全流程,是包含交互與視覺的頂層設(shè)計
       

      2. 最簡單的區(qū)分方法

      image.png
      • 只做視覺落地、滿足產(chǎn)品需求 → UI 設(shè)計
      • 制定操作流程、定義使用方式 → 交互設(shè)計
      • 以體驗為目標(biāo),統(tǒng)籌視覺與交互 → UX 體驗設(shè)計
       

      3. 三者關(guān)系與工作流

       
      三者并非孤立,而是高度關(guān)聯(lián)、相互影響:

      image.png

      1. UX 包含交互與 UI,先定交互方案,再做 UI 視覺是標(biāo)準(zhǔn)工作流;
      2. 交互邏輯直接影響用戶體驗與 UI 布局,UI 設(shè)計也必須適配交互操作;
      3. 好設(shè)計要兼顧操作流暢視覺協(xié)調(diào),不能顧此失彼。
       

      4. 交互設(shè)計的交付與工作場景

      image.png

      • 核心產(chǎn)出:線框圖 / 原型圖,配合流程連線、邏輯備注說明交互規(guī)則;
      • 常見誤區(qū):不必死磕高保真可交互原型(Axure/Figma 動效),核心是輸出清晰可落地的方案
      • 職場現(xiàn)狀:簡單需求可在 UI 設(shè)計中同步完成交互;復(fù)雜功能 / 邏輯(尤其 B 端)必須獨立做交互設(shè)計,減少改稿、提升效率。
       

       

      三、交互核心術(shù)語掃盲(一文看懂)

       

      1. 基礎(chǔ)概念類

      image.png

      • 人機交互(HCI):人與機器 / 軟件的所有互動行為總稱,開關(guān)機、點擊、輸入、鼠標(biāo)操作等都屬于此,界面交互是其子集。
      • 交互設(shè)計(IXD):特指軟件界面的操作規(guī)則與流程設(shè)計。
      • 交互界面(UI):可觸發(fā)操作、獲得反饋的可視界面,純靜態(tài)圖片 / 視頻不屬于交互界面。
      • 交互原型:分靜態(tài)(線框圖,表達邏輯)與動態(tài)(可操作演示,用于驗證)兩類。
      • 交互文檔:記錄項目交互邏輯、規(guī)則、細節(jié)的團隊協(xié)作文件,用于信息同步與存檔。
       

      2. 流程與行為類

       
      • 交互流程(User Flow):用戶完成一個目標(biāo)的完整步驟,如首頁→選品→下單→支付的全路徑。
      • 交互事件:用戶單次操作 + 系統(tǒng)反饋的完整過程,包含觸發(fā)、行為、反饋、動效,是 Figma 等工具的交互基礎(chǔ)單位。
      • 交互方式(Trigger):界面預(yù)設(shè)的觸發(fā)規(guī)則,移動端以手指操作為主(點擊、長按、拖拽、重壓),PC 端以鼠標(biāo) / 快捷鍵為主。
      • 交互操作(User Action):用戶實際做出的操作行為,與 “交互方式” 匹配才能正常觸發(fā)功能。
      • 交互反饋(Action):用戶操作后系統(tǒng)給出的響應(yīng),如頁面跳轉(zhuǎn)、彈窗關(guān)閉、支付成功提示等。
      • 交互動效(Animation):反饋的視覺動畫形式,如頁面滑入、彈窗彈出、點擊動效等。
       

      3. 評價與體驗類

      • 交互體驗:用戶使用功能時的操作感受,僅聚焦產(chǎn)品交互環(huán)節(jié),不含定價、客服等外部因素。
      • 交互可用性(Usability):衡量交互是否好用、易上手的核心標(biāo)準(zhǔn),決定設(shè)計方案的優(yōu)劣。

      蘭亭妙微(藍藍設(shè)計)www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標(biāo)定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

       

      image.png

      好設(shè)計歷久彌新!蘭亭妙微UI設(shè)計公司聊聊那些百年未變的經(jīng)典產(chǎn)品設(shè)計

      清陽 用戶研究

      一、全文速覽圖

      image.png

      “Good design is durable.” 迪特 · 拉姆斯的設(shè)計十誡提到,好的設(shè)計應(yīng)該是歷久彌新、不會輕易過時的。

      在 20 世紀,大多數(shù)日常用品都經(jīng)歷過顛覆式的變革、簡化或技術(shù)迭代,比如電話、筆、黑膠唱片機等。然而有少數(shù)物品,它們已問世超過百年,形態(tài)與結(jié)構(gòu)卻跟設(shè)計之初別無二致,且還能較好地滿足當(dāng)下的需要。這些產(chǎn)品是如何誕生的?為什么他們能在時間的長河中維持恒定不變?蘭亭妙微UI設(shè)計公司與您一起來學(xué)習(xí)。

       

      二、這些百年產(chǎn)品的誕生

      1. QWERTY鍵盤布局  1874年

      1941 年,世界上第一臺電子計算機誕生;1968 年,第一只鼠標(biāo)原型問世。然而,與它們共同構(gòu)成人機交互基礎(chǔ)的 QWERTY 鍵盤,其布局早在 1874 年就已獲得大規(guī)模應(yīng)用。

      如今我們已有語音、觸摸屏、甚至是腦機接口等多種輸入方式,卻還是高度依賴著與 150 年前首批打字機外觀相似的鍵盤。

      QWERTY鍵盤的發(fā)明

      1868 年,肖爾斯(Christopher Latham Sholes)和他的同事們將他們的第一臺打字機運往芝加哥,首位客戶是芝加哥波特電報學(xué)院的校長愛德華(Edward Payson Porter)。這臺打字機有 28 個琴鍵式按鍵,外形似鋼琴,與波特學(xué)院使用的休斯·菲爾普斯印字電報機相似。其鍵盤按字母表順序排列:A 至 N 從左向右排布,O 至 Z 則從右向左延伸。

      image.png

       

      在會見了多名客戶后,根據(jù)反饋,肖爾斯與其同事對鍵盤的構(gòu)造與布局進行了多次改進。最終在 1872 年,《科學(xué)美國人》在頭版以大幅版畫形式報道了這臺打字機,畫面中清晰展示了其鍵帽結(jié)構(gòu),此時的打字機已配備 42 個按鍵,包含大寫字母、數(shù)字 2 至 9,以及連字符、逗號、句號、問號等常用標(biāo)點符號。

      image.png

       

      1874 年,肖爾斯發(fā)明的打字機由槍械制造商雷明頓公司(E. Remington and Sons)推向市場,并逐漸演變成為鍵盤的行業(yè)標(biāo)準(zhǔn)。其按鍵布局已與今天我們普遍使用的 QWERTY 鍵盤幾乎完全相同,是當(dāng)今世界上應(yīng)用最廣泛的鍵盤布局。盡管不同國家會因語言習(xí)慣在鍵位安排上做些微調(diào),但整體結(jié)構(gòu)仍遵循著這一經(jīng)典設(shè)計。

      image.png

       

      撲朔迷離的鍵盤布局起源

      這其中耐人尋味的是,肖爾斯是如何想出這種鍵盤排列方式的。

      因其印刷行業(yè)的背景及報紙出版商的經(jīng)歷,肖爾斯應(yīng)當(dāng)熟悉排字工根據(jù)使用頻率排列字盤的做法。有一種廣為流傳的理論認為 QWERTY 鍵盤的布局是為了限制打字者的速度:其核心原則是將高頻使用的字母分隔開(盡管像 E 和 R 仍被放在一起),以此減少打字時連動桿的相互碰撞而導(dǎo)致的故障。換而言之,這是一種以暫時性的輸入效率,換取機械運行的長期可靠性的妥協(xié)。

      然而,京都大學(xué)的研究人員³提出,QWERTY 鍵盤布局的誕生可能與早期核心用戶——電報員的工作習(xí)慣密切相關(guān)。研究中以 E、S 、Z 這三個字母在鍵盤上的布局為例來闡明這個觀點。

      當(dāng)時,美國電報員需要把聽到的摩爾斯電碼實時轉(zhuǎn)譯成字母。在美國使用的電碼中,字母 Z 與常用組合 SE 的編碼恰好相同,均為“···  ·”(滴滴滴  滴)。當(dāng)聽到這樣的電碼序列,尤其是在缺乏上下文的單詞的開頭時,接收者無法立即判斷是 Z 還是 SE,只能根據(jù)后續(xù)聽到的電碼來綜合判斷。這種不確定性會嚴重影響輸入效率:在傳統(tǒng)的 A-Z 順序鍵盤上,若電報員開始輸入 Z,之后發(fā)現(xiàn)應(yīng)為 SE,手指就不得不在相距較遠的鍵位之間移動并修改。

      而 QWERTY 鍵盤布局的調(diào)整是,把 Z、SE 這兩組容易引起混淆的字母安排在了彼此相鄰的位置。這樣一來,即使電報員在聽到“滴滴滴  滴”時無法立刻判斷,手指也能在緊鄰的區(qū)域中快速選擇或更正,而不必在全鍵盤上尋找。或許正是這類針對電報場景的優(yōu)化,最終塑造了我們今天所熟知的 QWERTY 鍵盤格局。

      image.png

       

      雖然原因至今尚無定論,且無論是為了避免機械故障還是適配摩爾斯電碼的輸入習(xí)慣,都跟當(dāng)下的使用場景有所不同,但至今為止也沒有任何一種其他布局方式來取代它。

      2. 回形針 1901年

      19 世紀,木漿制漿技術(shù)與工業(yè)造紙廠的出現(xiàn)讓廉價紙張得以廣泛流通。面對隨之產(chǎn)生的大量零散紙張,人們開始使用手邊常見的別針來加以固定——這被視為回形針的前身。盡管別針價格低廉、使用方便且用后即棄,但其缺點也十分明顯:不僅容易生銹,還會刺穿紙張,留下難看的銹跡與孔洞。

      image.png

       

      最早的回形針專利記錄來自挪威人約翰·瓦勒(Johan Vaaler),他在 1901 年提交了申請。專利摘要中寫道,這是一種“由彈簧材料彎曲成矩形、三角形或其他形狀的環(huán),金屬絲兩端形成并排且方向相反的部件或舌片”。相比別針,回形針不需要通過刺穿紙面來固定紙張,并排的金屬絲結(jié)構(gòu)也提供了更多的固定方式。

      image.png

       

      1899 年,威廉·米德爾布魯克(William D. Middlebrook)獲得了回形針制造機械的設(shè)計專利,隨后他將專利賣給了一家辦公用品制造商,該公司將其注冊為“寶石回形針”(Gem clip)。其有著標(biāo)志性的雙橢圓形環(huán)圈設(shè)計,通常采用鍍鎳或彩色塑料包裹的材質(zhì),不僅有效防銹,也兼顧外觀的美感。

      相比約翰·瓦勒的設(shè)計,寶石回形針將紙張與回形針接觸的位置處理得更圓潤,減少了刺破紙張的風(fēng)險。螺旋狀的鋼絲具有一定的柔韌性,可輕松張開以便放入紙張,同時又有足夠的彈性來夾緊文件。

      image.png

      幾年后,喬治·W·麥吉爾(George W McGill)對寶石回形針做出了改良,進一步增大了內(nèi)環(huán)的弧度,使其更明顯地上翹。相比初代寶石回形針平緩的環(huán)圈末端,這種上揚的開口形成了更清晰的“示能”——直觀地提示用戶“此處可拉開并插入紙張”。在結(jié)構(gòu)上,它也實現(xiàn)了更省力的開合體驗。正是這一改良版本,逐漸演變成了今天最常見、最廣泛使用的回形針。

      image.png

       

      回形針作為“固定文件”的工具這一認知,也自然而然地從現(xiàn)實世界延伸到了數(shù)字世界。在圖形用戶界面中,當(dāng)我們想要將文件添加至郵件或文檔時,常常能看到那枚熟悉的回形針圖標(biāo)。

      image.png

       

      3. 螺旋蚊香 1902年

      中國最早的蚊香可追溯至宋代,一本記錄民間生產(chǎn)技術(shù)的古籍《格物粗談》中記載:“端午時,收貯浮萍,陰干,加雄黃,作紙纏香,燒之,能祛蚊蟲”。這段記載中所述的制品可視為早期形態(tài)的“蚊香”,其外形類似于帶芯的線香。換而言之,最初的蚊香是直的。

      蚊香的螺旋形演變可以追溯到 19 世紀末的日本。當(dāng)時,人們將除蟲菊粉與鋸末混合燃燒用于驅(qū)蚊。日本企業(yè)家上山英一郎(うえやま えいいちろう)生產(chǎn)了一種混合了淀粉和除蟲菊的香,雖然驅(qū)蚊效果良好,但存在明顯缺陷:不僅燃燒時間短,不到四十分鐘便燃盡,而且與普通線香一樣質(zhì)地較脆,遇風(fēng)易折。

      image.png

       

      1895 年,上山英一郎正致力于尋找延長蚊香燃燒時間的方法。期間,他的妻子在倉庫中偶然看見一條盤踞的蛇,由此獲得靈感,建議他將蚊香制成螺旋形狀。這一設(shè)計在工程上極為巧妙:螺旋結(jié)構(gòu)以最小的面積延展了蚊香長度(相比線狀蚊香延長約 4 倍),也設(shè)置了一個單點、穩(wěn)定、緩慢的燃燒路徑,讓蚊香既不會熄滅也不會因為香條過寬而燃燒太快。1902 年,可持續(xù)燃燒約七小時的螺旋狀蚊香問世,并被命名為“金鳥蚊香”,其有著標(biāo)志性的深綠色外觀與印有紅色公雞頭的包裝設(shè)計

      如今我們使用的螺旋盤香,基本都是采用了這個結(jié)構(gòu),在保證單盤燃燒時間 7-8 小時的前提下,既能節(jié)省包裝空間,又能在運輸中互相支撐,防止斷裂。

      image.png

       

      4. 拉鏈  1911年

      在拉鏈發(fā)明之前,人們用以拉緊衣物的工具繁多,包括系帶、紐扣、別針、搭扣、腰帶與松緊帶等。紐扣是其中歷史最久、使用最廣的一種,但其使用效率較低,解開與扣上均需時間,且在耐用性上存在不足,時有脫落之虞。

      image.png

       

      19 世紀末,在追求“效率”的工業(yè)時代背景下,拉鏈應(yīng)運而生。發(fā)明家惠特科姆(Whitcomb Judson)想解決傳統(tǒng)的系帶式高幫靴穿脫過于繁瑣這個問題,在芝加哥世界博覽會上展示了名為鉤鎖(clasp locker)的裝置,它的核心目標(biāo)很明確:用一次滑動,替代逐個系扣的繁瑣過程,節(jié)省時間。但當(dāng)時這種拉鏈依賴手工制作,成本較高,且質(zhì)量不夠穩(wěn)定,最終因為結(jié)構(gòu)缺陷及成本問題退出了市場。

      image.png

       

      1912 年,森貝克(Gideon Sundback)取得了突破性進展,他將惠特科姆發(fā)明的易崩開的鉤環(huán)結(jié)構(gòu)改成了穩(wěn)定咬合的齒牙結(jié)構(gòu),實現(xiàn)凹凸完全咬合,使拉鏈閉合更牢固,開合也更加順滑流暢。一百多年過去,如今金屬拉鏈仍然在沿用這種工藝制造。

      image.png

       

      1923 年,百路馳(B.F. Goodrich)公司將森貝克設(shè)計的拉鏈用于一款女式橡膠靴,因其開合時會發(fā)出“滋滋”的摩擦聲,公司便形象地將其命名為 “ZIPPER”。這個朗朗上口的名字隨后逐漸被大眾廣泛采用,“拉鏈”也因此得名并沿用至今。

      拉鏈與紐扣的爭端

      在時尚界,關(guān)于在服裝上用拉鏈或是紐扣還引起過一場關(guān)乎功能、形式甚至是倫理上的論戰(zhàn)。

      從效率上而言,拉鏈無疑更勝一籌,其便利性也更符合我們現(xiàn)代快節(jié)奏生活的需要。紐扣的使用需要一定的技巧,而且會增加衣物的厚度,對于如今流行的緊身牛仔褲來說,紐扣可能使面料更容易鼓起或撕裂;而拉鏈則能通過“收緊并向上拉”的方式來解決這個問題。

      但是,拉鏈更容易損壞和卡住,更難修理。它們也存在一定的安全隱患:在戰(zhàn)場上,軍服就曾發(fā)生過因拉鏈卡死耽誤急救而導(dǎo)致傷亡的事件;反之,紐扣在意外拉扯下更易整體脫落而非卡死。

      紐扣的另一個好處在于美觀:隨著時間的推移,紐扣與衣服的摩擦?xí)纬瑟毺氐纳渑c磨損痕跡,對于牛仔愛好者來說是一個理想的特性。

      還有一部分來自復(fù)古派的道德質(zhì)疑,批評者稱拉鏈簡化衣物穿脫的特性會助長輕率行為,敗壞社會風(fēng)氣。因此,盡管拉鏈技術(shù)早已成熟,直到 1947 年李維斯才將其應(yīng)用于牛仔褲上。

      最終在 1937 年,拉鏈在這場論戰(zhàn)中擊敗紐扣,鞏固了其在服裝設(shè)計中的地位。如今,這個一百多年前的發(fā)明無處不在,被廣泛應(yīng)用于服裝、行李箱和無數(shù)其他物品中,YKK(全球市場份額第一的拉鏈制造商)每年生產(chǎn)的拉鏈足以繞地球 50 圈。

      三、何以百年不變

      面對技術(shù)的百年巨變,為何這些產(chǎn)品能不被淘汰,甚至其基本形態(tài)都與百年前最初發(fā)明時大體相同?值得肯定的是,他們的設(shè)計的確超越了同期其他產(chǎn)品,呈現(xiàn)出一些寶貴的特質(zhì)。

      簡單精妙的結(jié)構(gòu)

      例如經(jīng)典的寶石回形針,其雙橢圓形結(jié)構(gòu)在同期的其他設(shè)計中脫穎而出,以簡潔優(yōu)雅的形態(tài)高效實現(xiàn)了“不傷紙”這一核心需求;而螺旋形的蚊香設(shè)計,既延長了燃燒時間,又通過嚴絲合縫的嵌套,兼顧了節(jié)省包裝空間和運輸穩(wěn)固性。

      image.png

       

      易用性

      拉鏈和回形針是典型的無意識設(shè)計,它們形態(tài)與功能高度統(tǒng)一、無需學(xué)習(xí)曲線。即使是年幼的孩童,也能憑直覺學(xué)會使用拉鏈:20 世紀 30 年代拉鏈推廣初期,拉鏈款童裝就常常以“幫助幼兒學(xué)會自己穿衣,培養(yǎng)自理能力”作為賣點。

      易工業(yè)化、標(biāo)準(zhǔn)化

      回形針只需彎曲三次并剪斷即可制成,易于自動化生產(chǎn);螺旋形蚊香可通過鋼制模具一次沖壓成型,一臺機器每分鐘可生產(chǎn)數(shù)百盤蚊香,整個過程可高度標(biāo)準(zhǔn)化。規(guī)模化生產(chǎn)有效降低了成本,使其在市場上更容易取得價格優(yōu)勢,進而推動廣泛普及。

      然而,歷經(jīng)百年技術(shù)發(fā)展與社會變遷,新生需求與問題層出不窮。這些經(jīng)典產(chǎn)品,是否真的一如誕生之初那般,顯得全然不過時?或許,讓它們保持不變的還有更深層的原因。

      四、已是最優(yōu)解,還是懶于改變?

      去年 11 月的香港大埔火災(zāi)事故造成了重大人員傷亡,令人痛心。在對這場事故的追責(zé)中,首當(dāng)其沖地便是香港建筑行業(yè)的竹棚工程。許多人指出,竹材燃點僅為 265°C,遠低于鋼材,可能加劇火勢蔓延。此外,竹棚的結(jié)構(gòu)強度也相對不足——過去香港曾多次發(fā)生棚架坍塌事故。以香港的經(jīng)濟發(fā)展水平,完全有能力推動行業(yè)向鋼材升級。但網(wǎng)絡(luò)上仍有許多支持者聲稱:竹棚搭建技藝自清朝便出現(xiàn)在香港,已有上百年歷史,具有文化傳承價值‌,也是長久以來的行業(yè)慣例。

      image.png

       

      同樣的,歷史上也有其他證據(jù)表明 QWERTY 鍵盤并非最佳的鍵盤布局,比如美國心理學(xué)家發(fā)明的德沃拉克鍵盤布局(Dvorak keyboard layout):這一布局基于字母使用頻率和手的生理結(jié)構(gòu)設(shè)計,擁有打字更快、更易學(xué)習(xí)和降低疲勞的特點。二戰(zhàn)時一項研究表明,德沃拉克布局的打字員速度要比 QWERTY 布局打字員快 74%。即使是 QWERTY 鍵盤的發(fā)明人——肖爾斯本人也沒那么篤定:盡管他很早就將設(shè)計賣給了雷明頓公司,但他終其一生都在不斷改進布局,并創(chuàng)造出各種替代方案,在他去世的前一年,他還為自己的 XPMCH 鍵盤申請了專利。

      image.png

       

      螺旋蚊香的使用體驗也沒那么理想:其嵌套結(jié)構(gòu)導(dǎo)致在拆分時比較困難,一不小心可能直接掰斷,且必須依賴專用底座才能使用。這本質(zhì)上是一種便利工業(yè)化生產(chǎn)而非優(yōu)化用戶體驗的設(shè)計。然而,即使有了電蚊香這種更方便、健康、安全的替代品,螺旋蚊香仍憑借低廉的成本、成熟的產(chǎn)業(yè)鏈以及簡易的倉儲運輸要求,在市場中占據(jù)著一席之地。

      在歷史較短的互聯(lián)網(wǎng)領(lǐng)域也有類似的案例——比如搜索引擎結(jié)果頁的布局與交互模式。自 2000 年代初谷歌確立“頂部搜索框 + 藍色鏈接標(biāo)題 + 簡短摘要”的模式以來,其核心框架在近二十年間保持高度一致,并成為行業(yè)標(biāo)準(zhǔn),不管是在網(wǎng)頁端還是移動端。然而在移動端上,固定于屏幕頂部的輸入框常位于手指的自然操作范圍之外,用戶需特意伸展才能觸及,體驗不夠便捷。而“標(biāo)題用藍色表示超鏈接” 這個設(shè)計也稍顯過時,在用戶已基本認知“搜索結(jié)果標(biāo)題可點擊”的今天,整屏的藍色可能帶來不必要的視覺干擾,增加閱讀負擔(dān)。

      回望這些產(chǎn)品或設(shè)計,其“不變”與其說是源于解決問題的完美,不如說是因為它們早早確立了“行業(yè)標(biāo)準(zhǔn)”,獲得了先發(fā)優(yōu)勢,培養(yǎng)了牢固的用戶習(xí)慣,進而形成了強大的路徑依賴。一旦從用戶到產(chǎn)業(yè)鏈的“慣性”形成,任何改變都將面臨難以估量的轉(zhuǎn)換成本。正因如此,即便它們存在一定的缺陷,市場往往也會接受,畢竟這是性價比相對較高的策略。

      總結(jié)

      一些產(chǎn)品能歷經(jīng)百年而保持不變,固然有其設(shè)計上的優(yōu)越性,但更值得深思的是不變的背后隱藏著的路徑依賴與行業(yè)慣性的強大力量。百年的不變或許只是暫時的,可能是顛覆性的技術(shù)尚未誕生,或是缺少一個推動行業(yè)變革的契機。

      歸根結(jié)底,設(shè)計無法時刻去尋求那個完美的終極方案,而是在多重約束條件下尋找平衡——既要權(quán)衡用戶習(xí)慣與使用體驗,又要兼顧商業(yè)成本、行業(yè)發(fā)展情況與規(guī)模化需求,甚至還要回應(yīng)文化傳承與社會倫理的爭議。同時,作為設(shè)計師也需要保持對行業(yè)規(guī)范與慣例的審視與批判意識,警惕將“長期不變”等同于“無可優(yōu)化”,在考慮用戶習(xí)慣轉(zhuǎn)換成本的前提下,積極探索更適配當(dāng)下需求的創(chuàng)新方案。

      轉(zhuǎn)載:優(yōu)設(shè)

      蘭亭妙微(藍藍設(shè)計)www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標(biāo)定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

       

      image.png

      蘭亭妙微UI設(shè)計公司:超全面的B端設(shè)計指南:樹形選擇

      清陽 設(shè)計思維

      在 B 端系統(tǒng)的選擇錄入場景里,樹形選擇是承載層級化數(shù)據(jù)的核心組件,常用于組織架構(gòu)、權(quán)限分配、分類篩選等場景。這篇指南從基礎(chǔ)概念、結(jié)構(gòu)組成、類型差異、設(shè)計要點到常見誤區(qū),完整梳理樹形選擇的設(shè)計邏輯,蘭亭妙微ui設(shè)計公司幫你高效落地合規(guī)、易用的樹形組件。
       

      一、先搞懂:樹狀結(jié)構(gòu)的核心概念

       
      樹狀結(jié)構(gòu)是倒置的層級化數(shù)據(jù)表達形式,頂端為根、向下延伸分支與葉子,清晰呈現(xiàn)數(shù)據(jù)的從屬、并列關(guān)系,是 B 端結(jié)構(gòu)化信息展示的最優(yōu)解之一。

      image.png

      1. 核心節(jié)點定義

       
      • 根節(jié)點:樹的唯一起點,樹形選擇中常隱藏,以標(biāo)題 / 選項文本替代,避免視覺冗余。
      • 子節(jié)點:根節(jié)點以下的所有節(jié)點,無數(shù)量限制,是樹形選擇的核心展示內(nèi)容。
      • 葉節(jié)點:無下級子節(jié)點的末端節(jié)點,是傳統(tǒng)單選樹的唯一可選對象。
      • 分支:節(jié)點間的連接關(guān)系,可通過線條顯隱強化層級感知。
       

      2. 關(guān)鍵屬性

      image.png

      • 節(jié)點層級:根節(jié)點為 1 級,向下依次遞增,直觀區(qū)分數(shù)據(jù)隸屬關(guān)系。
      • 節(jié)點高度:當(dāng)前節(jié)點到最底層葉節(jié)點的層級數(shù)量。
      • 節(jié)點深度:當(dāng)前節(jié)點到根節(jié)點的路徑長度,與層級概念相近。
       
      日常場景中,字典檢索、省市縣地址、公司組織架構(gòu)、課程分類,都是典型的樹狀結(jié)構(gòu)應(yīng)用,核心價值是快速定位、結(jié)構(gòu)化管理、高效增刪改查
       

      二、樹形選擇的基礎(chǔ)組成

       
      樹形選擇的結(jié)構(gòu)設(shè)計直接影響操作效率,核心由 4 部分構(gòu)成,每部分都有明確的設(shè)計規(guī)范:
       

      1. 層級縮進

       
      統(tǒng)一用8px作為下級節(jié)點的縮進基準(zhǔn),清晰區(qū)分層級;
       
      數(shù)據(jù)量大、層級復(fù)雜時,搭配分支線條強化結(jié)構(gòu),避免視覺混亂。
       

      2. 折疊圖標(biāo)

       
      分為兩種樣式,適配不同層級場景:
       
      • 三角折疊:適合層級≤3 級的簡單場景,輕量化、易理解。
      • 方形折疊:搭配分支線條使用,適合 4 級及以上的多層級場景,層級辨識度更高。

      image.png

      3. 選擇控件

       
      分單選、多選兩類,遵循「簡化操作、明確狀態(tài)」原則:
       
      • 單選:默認隱藏控件,以整個選項文本為熱區(qū),點擊即選中。
      • 多選:必顯復(fù)選框,置于折疊圖標(biāo)左側(cè),預(yù)留后續(xù)功能拓展空間(新增、刪除、拖拽等),同時降低前端開發(fā)成本、減少 BUG。
       

      4. 選項文本

       
      控制字符長度,超長文本用省略號截斷,hover 時展示完整內(nèi)容,保證界面整潔。
       

      三、樹形選擇的三大類型(核心差異)

       
      樹形選擇按交互邏輯分為三類,單選節(jié)點樹、多選節(jié)點樹為主流,傳統(tǒng)單選樹已極少使用
       

      1. 單選樹(淘汰型)

       
      僅支持選擇葉節(jié)點,需逐層展開才能操作,選擇熱區(qū)小、理解成本高、效率低,僅適用于極特殊的定制場景,不推薦通用設(shè)計使用。
       

      2. 單選節(jié)點樹(主流)

       
      支持選擇任意子節(jié)點,選中即代表該節(jié)點及下級所有數(shù)據(jù),大幅提升效率;
       
      交互拆分為兩個獨立熱區(qū):

      image.png

      • 左側(cè):折疊圖標(biāo),僅控制展開 / 收起。
      • 右側(cè):整個選項區(qū)域,點擊即選中當(dāng)前節(jié)點。
         
        ?? 必須添加 hover 狀態(tài),通過光標(biāo)變化提示可點擊,降低操作認知成本。
       

      3. 多選節(jié)點樹(最常用)

       
      在單選節(jié)點樹基礎(chǔ)上增加復(fù)選框,支持批量選擇多個節(jié)點 / 分支;
       
      理論上的「多選樹」(僅選葉節(jié)點)無實際業(yè)務(wù)價值,完全可被多選節(jié)點樹替代;
       
      ?? 動態(tài)數(shù)據(jù)場景慎用:如「部門權(quán)限自動同步新員工」這類動態(tài)關(guān)聯(lián)需求,樹形選擇無法清晰傳遞邏輯,需單獨做關(guān)聯(lián)配置,避免用戶誤解。
       

      四、樹形選擇的核心優(yōu)勢

       
      1. 易理解:樹狀結(jié)構(gòu)認知成本低,用戶無需學(xué)習(xí)即可快速上手。
      2. 快瀏覽:大數(shù)據(jù)量下,可按層級快速篩選,比普通下拉選擇效率更高。
      3. 顯結(jié)構(gòu):清晰呈現(xiàn)數(shù)據(jù)層級關(guān)系,幫助用戶快速理解業(yè)務(wù)框架。
       

      五、設(shè)計必避:3 大常見誤區(qū)

       

      1. 忽視數(shù)據(jù)量承載

       
      數(shù)據(jù)量過大時,必須做異步加載、分頁、搜索篩選,避免一次性渲染導(dǎo)致卡頓,同時優(yōu)化滾動體驗。
       

      2. 全選功能設(shè)計草率

       
      大數(shù)據(jù)量場景下,全選需增加 **「半選」?fàn)顟B(tài) **(僅選中部分子節(jié)點),并明確提示選中數(shù)量,避免用戶誤操作。
       

      3. 缺失鍵盤交互映射

       
      B 端高效操作需支持鍵盤快捷鍵,規(guī)范如下:
       
      • ↑:切換上一同級節(jié)點,從子節(jié)點返回父節(jié)點。
      • ↓:切換下一同級節(jié)點,進入已展開的首個子節(jié)點。
      • ←:關(guān)閉當(dāng)前節(jié)點,返回父節(jié)點。
      • →:展開子節(jié)點,進入首個子節(jié)點。
      • 回車:確認選中當(dāng)前聚焦節(jié)點。
       

      六、總結(jié)

       
      樹形選擇是 B 端層級數(shù)據(jù)選擇的最優(yōu)組件,設(shè)計核心是簡化層級認知、拆分操作熱區(qū)、適配業(yè)務(wù)場景:優(yōu)先用單選 / 多選節(jié)點樹,放棄傳統(tǒng)單選樹;多層級加分支線條,大數(shù)據(jù)量加異步加載,同時補齊鍵盤交互,最終實現(xiàn)「易看、易點、易懂、高效」的使用體驗。
       

      蘭亭妙微(藍藍設(shè)計)www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標(biāo)定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

       

      image.png

      蘭亭妙微逐圖解析移動端APP多場景 UI/UX 設(shè)計案例

      藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞

      這組圖片覆蓋了區(qū)塊鏈工具、心理健康、B 端營銷、項目管理、銷售數(shù)據(jù)、健康飲食六大不同賽道的產(chǎn)品界面,我們逐一拆解設(shè)計亮點與核心邏輯:

      圖 1:區(qū)塊鏈域名注冊流程界面

      這是 Web3 領(lǐng)域的域名注冊操作流界面,核心亮點是流程可視化 + 風(fēng)險提示清晰:
      • 用步驟條(Commit → 等待 60 秒 → 二次交易)完整展示注冊全流程,每一步都標(biāo)注操作說明,讓用戶清晰掌握進度;
      • 用綠色對勾、進度條實時反饋操作狀態(tài),同時明確展示 Gas 費、注冊費用等關(guān)鍵數(shù)據(jù),避免用戶踩坑;
      • 倒計時設(shè)計既符合區(qū)塊鏈防搶注的技術(shù)邏輯,又通過可視化倒計時讓用戶直觀感知等待時長,降低操作焦慮。

      圖 2:Mindro 心理健康 App 界面

      這是面向 C 端用戶的心理健康管理工具,設(shè)計核心是情緒可視化 + 陪伴感營造:
      • 以柔和的淡紫漸變?yōu)榈咨钆?3D 大腦視覺元素,弱化工具的冰冷感,傳遞溫暖、舒緩的情緒氛圍;
      • 核心數(shù)據(jù)(目標(biāo)進度 65%、壓力水平 70%)以卡片形式突出展示,用直觀的數(shù)字讓用戶快速掌握自身狀態(tài);
      • 問候語 Hello, Sara How are you feeling today? 強化陪伴感,貼合心理健康產(chǎn)品 情緒關(guān)懷 的核心定位。

      圖 3:AdvisorWorld 金融營銷 B 端平臺界面

      這是面向金融顧問的獲客營銷平臺,設(shè)計核心是轉(zhuǎn)化導(dǎo)向 + 信息高效傳遞:
      • 用高飽和藍、綠為主色調(diào),強化專業(yè)感與信任感,同時用大尺寸 CTA 按鈕(Start Getting Leads、Book a Call)引導(dǎo)轉(zhuǎn)化;
      • 模塊化布局清晰劃分客戶證言、核心價值、數(shù)據(jù)指標(biāo)、資源入口等模塊,讓金融顧問快速獲取核心信息;
      • 用數(shù)據(jù)(轉(zhuǎn)化率 + 35%、客單價 + 25%)強化產(chǎn)品價值,搭配真實客戶案例,提升 B 端用戶的信任度,促進轉(zhuǎn)化。

      圖 4:RelationHub 項目管理 App 界面

      這是面向團隊的項目協(xié)作工具,設(shè)計核心是數(shù)據(jù)聚合 + 高效管理:
      • 首頁聚合活躍項目數(shù)、待處理項目、團隊成員、客戶線索等核心數(shù)據(jù),讓管理者一眼掌握項目全局;
      • 用標(biāo)簽篩選(Branding、Website、UI/UX)快速分類線索,搭配客戶信息、金額、時間等明細,提升管理效率;
      • 用正負百分比展示項目環(huán)比變化,直觀呈現(xiàn)業(yè)務(wù)增長 下滑趨勢,幫助團隊快速決策。

      圖 5:銷售數(shù)據(jù)管理 App 界面

      這是面向銷售團隊的業(yè)績管理工具,設(shè)計核心是數(shù)據(jù)可視化 + 多端協(xié)同:
      • 用深色模式 + 高對比度圖表,清晰展示銷售額、收入、訂單等核心數(shù)據(jù),折線圖、柱狀圖直觀呈現(xiàn)業(yè)績趨勢;
      • 分屏展示個人業(yè)績與團隊業(yè)績,滿足銷售個人復(fù)盤與團隊管理的雙重需求;
      • 底部導(dǎo)航欄(Home、Orders、Analytics、Profile)簡化操作路徑,讓銷售隨時查看業(yè)績,適配移動辦公場景。

      圖 6:FitBite 健康飲食 App 界面

      這是面向 C 端用戶的飲食健康管理工具,設(shè)計核心是場景化引導(dǎo) + 數(shù)據(jù)激勵:
      • 啟動頁用新鮮食材視覺元素,搭配 Your Daily Guide to Smarter Eating 的 slogan,傳遞健康飲食的產(chǎn)品定位;
      • 首頁聚合周進度、步數(shù)、飲水量、三餐熱量等核心數(shù)據(jù),用環(huán)形進度條直觀展示完成情況,強化正向激勵;
      • 底部導(dǎo)航欄(Home、Progress、Rewards、Menu)清晰劃分功能,用綠色主色調(diào)傳遞健康、活力的氛圍,貼合產(chǎn)品屬性。

      補充:蘭亭妙微實踐延伸

      蘭亭妙微深耕全賽道 UI/UX 設(shè)計,無論是區(qū)塊鏈、心理健康等 C 端產(chǎn)品,還是金融營銷、項目管理等 B 端工具,都能基于用戶場景打造專業(yè)、易用的界面設(shè)計。如果您有各類產(chǎn)品的 UI/UX 設(shè)計、改版需求,歡迎與蘭亭妙微對接。

      日歷

      鏈接

      個人資料

      藍藍設(shè)計的小編 http://www.rhtd16ji.cn

      存檔

      主站蜘蛛池模板: 久爱免费观看在线精品| 亚洲色精品vr一区二区三区| 国产午夜精品1区2区3福利| 婷婷激情久久| 色香欲天天影视综合网| a视频在线免费观看| 午夜福利片1000无码免费| 日韩精品视频一区二区不卡 | 久久久久国产精品| 国产成+人+亚洲+欧美+日韩| yy19影院| 久久精品道一区二区三区| 人人看av日韩国产| 亚洲VA中文字幕无码久久| 影音先锋av中文字幕| 亚洲欧美乱日韩乱国产| 国产老妇伦国产熟女老妇高清| 日本视频高清一道一区| 国产超爽人人爽人人做人人爽| 亚洲另类无码专区首页| 亚洲综合一区二区三区| 伊人av影视| 起碰免费公开97在线视频| 97欧美精品系列一区二区| 亚洲av二区伊人久久| 在线播放无码后入内射少妇 | 国产性猛交xx乱| 国产精华AV午夜在线| 中文字幕二区| 尤物tv.2722| 人妻少妇精品专区性色av| 亚洲第一中文字幕| 五月婷婷丁香| 免费国产好深啊好涨好硬视频 | 日韩在线观看 一区二区| 夜夜添无码试看一区二区三区| 国内精品久久久久影院免费| 大肉大捧一进一出视频| 高潮喷水抽搐无码免费| 最新国产精品精品视频| 亚洲国产综合精品中文第一|