在蘭亭妙微設(shè)計(jì)的 UI 與交互項(xiàng)目中，懂交互的設(shè)計(jì)師才能做出真正好用、易用、用戶愛用的產(chǎn)品。只拼視覺不夠，用底層交互原理支撐設(shè)計(jì)，才能讓界面既好看又好用。

在蘭亭妙微多年 UI 設(shè)計(jì)項(xiàng)目中，文字排版是設(shè)計(jì)師與前端對(duì)接時(shí)高頻出問題的環(huán)節(jié)：視覺稿精致清晰，開發(fā)還原后卻錯(cuò)位、擁擠、層級(jí)混亂，反復(fù)像素級(jí)微調(diào)浪費(fèi)大量時(shí)間。

可用性是衡量產(chǎn)品體驗(yàn)與交互設(shè)計(jì)是否成功的核心指標(biāo)。蘭亭妙微作為專業(yè)設(shè)計(jì)機(jī)構(gòu)，在移動(dòng)端與 PC 端產(chǎn)品設(shè)計(jì)中，始終以可學(xué)習(xí)性、靈活性、魯棒性為底層框架，將可用性原則落地到每一個(gè)交互細(xì)節(jié)，讓產(chǎn)品更易用、更好用、更耐用。

蘭亭妙微作為專業(yè) UI/UX 設(shè)計(jì)服務(wù)機(jī)構(gòu)，始終以標(biāo)準(zhǔn)化流程、專業(yè)化交付、全周期跟進(jìn)為核心，確保每一個(gè)項(xiàng)目從需求到落地都嚴(yán)謹(jǐn)可控、體驗(yàn)優(yōu)質(zhì)。本文為公司內(nèi)部執(zhí)行標(biāo)準(zhǔn)，同步對(duì)外公開，便于客戶與合作伙伴清晰了解我們的設(shè)計(jì)協(xié)作路徑。

B端系統(tǒng)軟件中表單的應(yīng)用場(chǎng)景非常多，今天蘭亭妙微UI設(shè)計(jì)公司，就撈點(diǎn)干貨，說說B端產(chǎn)品表單如何設(shè)計(jì)，用戶體驗(yàn)會(huì)更好。

從標(biāo)題、輸入框、布局排版、數(shù)據(jù)展示四個(gè)方面，詳細(xì)介紹一下關(guān)于表單的體驗(yàn)設(shè)計(jì)，目錄如下：

一、標(biāo)簽是否加冒號(hào)

設(shè)計(jì)師A說：不加冒號(hào)，用戶不在意，而且占空間…..

設(shè)計(jì)師B說：要加冒號(hào)，加上可以更好的區(qū)分上下文，以及標(biāo)簽和輸入框的關(guān)系…..

以上A/B設(shè)計(jì)師說的都有一定的道理，那到底加不加冒號(hào)呢？

遇到問題咱就先調(diào)研一波，看一下Win、Mac系統(tǒng)中是否有無冒號(hào)。

Win系統(tǒng)：最新版本不加冒號(hào)。

Mac系統(tǒng)：最新版本設(shè)計(jì)偏向C端化，不加冒號(hào)，13.0.1之前版本有冒號(hào)。

是不是感覺主流的設(shè)計(jì)是不加冒號(hào)呀？

稍等一下…那在具體B端系統(tǒng)中是有怎樣的應(yīng)用場(chǎng)景呢？

以上場(chǎng)景中左右布局，單選/多選組件、標(biāo)題加內(nèi)容組件都不適合去掉冒號(hào)展示。

那到底加不加冒號(hào)呢？

可以先說一下答案，加不加冒號(hào)對(duì)用戶無影響，《Web 表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁(yè)表單》中，卡羅琳·賈雷特做過大量測(cè)試，最終證明沒有一名用戶留意表單冒號(hào)是否出現(xiàn)。

因此，得出以下建議：

• 如果你希望系統(tǒng)重表單使用更多的業(yè)務(wù)場(chǎng)景和對(duì)齊方式，請(qǐng)使用冒號(hào)
• 如果你當(dāng)前已使用有冒號(hào)的表單，請(qǐng)保持使用冒號(hào)

如果你新建一個(gè)系統(tǒng)，使不使用冒號(hào)隨意一旦決定是否使用冒號(hào)，需要全部表單統(tǒng)一規(guī)則  

二、表單必填樣式

用戶填寫表單時(shí)，有必填項(xiàng)和選填項(xiàng)，如果表單中多數(shù)或全部是必填項(xiàng)，那是否還應(yīng)該對(duì)其標(biāo)記？

答案是肯定的，用戶遇到較多表單填寫項(xiàng)時(shí)，是需要通過必填標(biāo)記來評(píng)估工作量。下面就介紹一下具體標(biāo)記必填項(xiàng)的三種樣式。

① 頂部統(tǒng)一提示

填寫表單過長(zhǎng)或填寫表單被打斷（移動(dòng)端常見），就會(huì)增加用戶工作記憶和認(rèn)知負(fù)荷，完成任務(wù)更加困難，從而降低了用戶體驗(yàn)。

② 文字提示“必填”

有部分設(shè)計(jì)師認(rèn)為紅色“*”會(huì)增加視覺噪音，并且重復(fù)的紅色“*”會(huì)帶來一些認(rèn)知恐慌，便采用文字提示方式，但這種方式比較占用空間，文字內(nèi)容過長(zhǎng)，用戶壓力較大，用戶體驗(yàn)降低，不建議使用。

③ 紅色星號(hào)“*”必填提示

雖然有設(shè)計(jì)師認(rèn)為紅色“*”會(huì)增加視覺噪聲，帶來一些認(rèn)知恐慌，但紅色“*”在互聯(lián)網(wǎng)中很常見，用戶熟知其意，已形成固定的視覺語言，并且空間較小，能與標(biāo)簽文字足夠區(qū)分開，相比之下采用紅色“*”必填提示是非常值得推薦使用。

但是還有一個(gè)問題，就是紅色“*”的位置是在字段前還是字段后呢？

紅色“*”的具體位置有三種位置，如上圖做了詳細(xì)展示。

1. 標(biāo)題左側(cè)：比較常見，用戶打眼一看就能區(qū)分出必填項(xiàng)，推薦使用；
2. 標(biāo)題右側(cè)：比較常見，多配合無號(hào)碼使用；
3. 輸入框右側(cè)：現(xiàn)有系統(tǒng)較少使用，由于輸入框形式、長(zhǎng)度不統(tǒng)一，會(huì)導(dǎo)致難以瀏覽和判斷，不推薦。是否可標(biāo)記可選字段？

這不是強(qiáng)制性的，但標(biāo)記可選字段非必填，確實(shí)減輕了用戶思考，提升用戶體驗(yàn)。  

三、提示樣式

用戶最理想閱讀的標(biāo)題文字?jǐn)?shù)是7±2，當(dāng)標(biāo)題文字過長(zhǎng)，或不足對(duì)輸入項(xiàng)準(zhǔn)確說明時(shí)，要給出對(duì)應(yīng)的提示文字，幫助用戶更好的輸入內(nèi)容，常見樣式如下。

這三種樣式是遞進(jìn)邏輯，根據(jù)不同的文字提示內(nèi)容和難度，選擇不同的提示樣式。其中對(duì)于第二種樣式中，圖標(biāo)提示的位置還有幾種方式，如下圖說明。

四、小結(jié)

本文事無巨細(xì)的說了一下表單中標(biāo)題樣式問題，雖然很多是表單設(shè)計(jì)的一些較冷較小的內(nèi)容，但也需要設(shè)計(jì)師沉下心來，打磨細(xì)節(jié)之處。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.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。

蘭亭妙微UI設(shè)計(jì)公司與大家一起學(xué)習(xí)，人類的美術(shù)創(chuàng)作經(jīng)歷了從紙面的二維走向三維、從“模仿自然”到遵從主觀意識(shí)自由表達(dá)的歷程，人機(jī)界面設(shè)計(jì)也經(jīng)歷了擬物、扁平以及更多的設(shè)計(jì)風(fēng)格的迭代演化。是什么推動(dòng)著藝術(shù)家和設(shè)計(jì)師們不斷探索規(guī)則、學(xué)習(xí)規(guī)則，進(jìn)而挑戰(zhàn)規(guī)則？在拆解手腳架的過程中，我們將愈加貼近創(chuàng)作的本質(zhì)。

在上篇內(nèi)容中，我們分享了設(shè)計(jì)師如何通過建立信任、夯實(shí)底層能力，為跨行業(yè)成長(zhǎng)打下基礎(chǔ)。本篇將由蘭亭妙微設(shè)計(jì)公司結(jié)合多年項(xiàng)目實(shí)戰(zhàn)與團(tuán)隊(duì)培養(yǎng)經(jīng)驗(yàn)，深入講解知識(shí)管理如何成為設(shè)計(jì)師突破瓶頸、成為跨行業(yè)全能型人才的關(guān)鍵武器，幫你從 “執(zhí)行型設(shè)計(jì)師” 升級(jí)為 “策略型設(shè)計(jì)專家”。

蘭亭妙微設(shè)計(jì)公司深耕商業(yè) UI/UX 設(shè)計(jì)十余年，在智能電視、OTT 盒子、智慧大屏等項(xiàng)目中積累了大量實(shí)戰(zhàn)經(jīng)驗(yàn)。電視端 UI 與移動(dòng)端、PC 端設(shè)計(jì)邏輯差異顯著，核心是適配遙控交互、遠(yuǎn)距離觀看、暗光環(huán)境三大特性。本文結(jié)合真實(shí)項(xiàng)目復(fù)盤，整理出一套可直接落地的電視端 UI 設(shè)計(jì)基礎(chǔ)規(guī)范，幫你避開常見誤區(qū)。

通知的本質(zhì)是價(jià)值傳遞而非注意力爭(zhēng)搶。設(shè)計(jì)得當(dāng)?shù)耐ㄖ艹蔀楦咝зN心的工具，濫用則會(huì)淪為干擾噪聲，引發(fā)用戶 “通知疲勞”。蘭亭妙微UI設(shè)計(jì)公司從認(rèn)知、分級(jí)、實(shí)踐、衡量四個(gè)維度，系統(tǒng)講解如何打造高打開率、低反感度的通知體驗(yàn)。

一、理解通知的雙面性：先分清反饋類型

1. 確認(rèn)（Validation）：關(guān)聯(lián)特定情境，需用戶操作后觸發(fā)，必須處理
2. 通知（Notifications）：全局或關(guān)聯(lián)特定情境，系統(tǒng)觸發(fā)，可操作或自動(dòng)消失
3. 指示 / 提示（Indicators）：關(guān)聯(lián)特定情境，自動(dòng)顯示，無需用戶干預(yù)

通知的基礎(chǔ)分類

• 按觸達(dá)范圍
  • 應(yīng)用內(nèi)通知：彈窗、信息卡片、紅點(diǎn)，在界面內(nèi)展示
  • 應(yīng)用外通知：推送、短信、郵件、小組件，跨設(shè)備觸達(dá)
   
• 按內(nèi)容性質(zhì)
  • 信息性通知：日程提醒、新聞、狀態(tài)更新，僅傳遞信息
  • 行動(dòng)導(dǎo)向通知：支付確認(rèn)、好友申請(qǐng)、系統(tǒng)更新，引導(dǎo)用戶操作
   

二、通知的設(shè)計(jì)依據(jù)：按關(guān)注度分級(jí)

1. 高關(guān)注度通知（需立即響應(yīng)）

• 類型：安全警報(bào)、錯(cuò)誤提示、異常故障、關(guān)鍵操作確認(rèn)（刪除 / 購(gòu)買 / 覆蓋）
• 特征：緊急、需立即處理、涉及風(fēng)險(xiǎn)或核心功能
• 呈現(xiàn)：彈窗確認(rèn)、強(qiáng)提示、阻斷式交互

2. 中關(guān)注度通知（需知曉，無需立即處理）

• 類型：警告提示、操作反饋、成功消息、常規(guī)提醒
• 特征：非緊急、輔助用戶了解狀態(tài)、不阻斷操作
• 呈現(xiàn)：信息條、輕量提示、頁(yè)面說明

3. 低關(guān)注度通知（僅需知曉，無行動(dòng)壓力）

• 類型：普通信息、紅點(diǎn)提示、狀態(tài)指示、空狀態(tài)說明
• 特征：無時(shí)效性、不打擾、輕量化展示
• 呈現(xiàn)：角標(biāo)、文字提示、靜態(tài)狀態(tài)展示

三、通知體驗(yàn)設(shè)計(jì)實(shí)踐：4 個(gè)可落地方法

1. 新用戶初期：少而穩(wěn)，避免信息轟炸

• 策略：新用戶默認(rèn)低頻率通知，給用戶探索產(chǎn)品的空間
• 依據(jù)：Facebook 研究證實(shí)，減少通知量可提升滿意度與長(zhǎng)期使用率，短期流量下滑后，參與度會(huì)反超
• 做法：允許用戶后期自主調(diào)整頻率，漸進(jìn)式優(yōu)化通知數(shù)量

2. 全用戶周期：開放個(gè)性化管理，賦予控制權(quán)

• 自主設(shè)置：允許用戶按關(guān)系、重要性劃分通知優(yōu)先級(jí)
• 內(nèi)容脫敏：參考 Android 設(shè)計(jì)，將鎖屏通知分為公開 / 不公開 / 私密，保護(hù)隱私
• 預(yù)設(shè)模式：提供勿擾、工作、睡眠等快捷模式，降低設(shè)置成本
• 打包推送：將零散通知合并為摘要，按用戶指定時(shí)間統(tǒng)一發(fā)送
• 智能適配：參考 Slack，根據(jù)頻道活躍度、用戶行為自動(dòng)調(diào)整通知級(jí)別

3. 新用戶引導(dǎo)：把通知設(shè)置納入上手流程

• 示例：Basecamp 提供 “24 小時(shí)接收”“僅工作時(shí)段接收” 選項(xiàng)
• 做法：主動(dòng)詢問用戶靜音時(shí)段，支持自定義屏蔽夜間、周末、節(jié)假日通知
• 價(jià)值：適配全球化協(xié)作場(chǎng)景，避免跨時(shí)區(qū)打擾

4. 核心邏輯：在正確時(shí)間，給正確用戶發(fā)正確內(nèi)容

• 場(chǎng)景化推送：新用戶功能引導(dǎo)、實(shí)時(shí)狀態(tài)推送（外賣 / 賽事 / 物流）
• 分層提示：參考 Grammarly，用紅點(diǎn) + 分步提示降低認(rèn)知壓力
• 智能適配：用戶專注、旅行、低活躍時(shí)，自動(dòng)降低推送頻率
• 渠道切換：高頻通知從推送轉(zhuǎn)為郵件摘要，平衡觸達(dá)與侵入性

四、衡量通知有效性：4 個(gè)核心指標(biāo)

1. 打開率：反映內(nèi)容相關(guān)性與推送時(shí)機(jī)
2. 轉(zhuǎn)化率：衡量行動(dòng)導(dǎo)向通知的引導(dǎo)效果
3. 屏蔽 / 退出率：直接體現(xiàn)通知過載或不相關(guān)程度
4. 參與度提升：對(duì)比接收與未接收通知用戶的產(chǎn)品活躍度
5. 行動(dòng)時(shí)間：警報(bào)類通知需快速響應(yīng)，體現(xiàn)緊急性匹配度

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.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。

一、保守派：保留表格形態(tài)，輕量化適配

1. 橫豎屏一鍵切換

• 優(yōu)勢(shì)：實(shí)現(xiàn)成本低，可全局復(fù)用，適配純閱讀場(chǎng)景
• 局限：僅支持查看，無法做數(shù)據(jù)編輯、批量操作

2. 固定表頭 + 滾動(dòng)指示燈

1. 數(shù)據(jù)對(duì)應(yīng)混亂：凍結(jié)首列表頭，橫向滾動(dòng)時(shí)始終可見關(guān)鍵字段
2. 屏效過低：適度縮小字體，提升信息密度
3. 滾動(dòng)無預(yù)期：添加滾動(dòng)指示燈，清晰提示當(dāng)前查看進(jìn)度

• 核心：像給表格加了可視化滾動(dòng)條，降低閱讀認(rèn)知成本

二、激進(jìn)派：重構(gòu)展示形式，貼合移動(dòng)端習(xí)慣

3. 關(guān)鍵字段收折展示

• 選字規(guī)則：通過「重要度 + 字段長(zhǎng)度」十字分析，優(yōu)先選短文本、高優(yōu)先級(jí)字段
• 適用場(chǎng)景：字段數(shù)量適中，用戶需快速識(shí)別數(shù)據(jù)的場(chǎng)景

4. 卡片式列表呈現(xiàn)

• 優(yōu)勢(shì)：符合移動(dòng)端視覺習(xí)慣，操作路徑更短，是 B 端移動(dòng)端最常用方案
• 適配場(chǎng)景：外勤人員快速查看、一鍵操作的業(yè)務(wù)（如銷售、配送）

5. 全信息詳情卡片

• 優(yōu)勢(shì)：信息一站式展示，減少頁(yè)面跳轉(zhuǎn)，大幅提升操作效率
• 典型場(chǎng)景：配送員訂單、外賣詳情、銷售客戶速覽等高頻輕操作場(chǎng)景

最后：移動(dòng)端表格的設(shè)計(jì)邊界