2）列表頁(yè)面：不同子系統(tǒng)之間不是特別統(tǒng)一，有的可自定義列，有的采取頁(yè)簽+列表；有的采取左邊列表式篩選，有的采取左邊標(biāo)簽式篩選等；

3）詳情頁(yè)：不是非常統(tǒng)一，但主要是三類：

• 第一類：以新增（或編輯與查看）考勤方案為例。采取的是二級(jí)詳情頁(yè)（內(nèi)容居中）；
• 第二類：以新建（或編輯與查看）入職方案為例。 采取的是二級(jí)詳情頁(yè)+頂部步驟型設(shè)計(jì)；
• 第三類：以編輯（或查看）入職信息字段配置為例。采取的也是二級(jí)詳情頁(yè)+左側(cè)頁(yè)簽切換式設(shè)計(jì)。

如果你是用戶，你覺(jué)得哪個(gè)方案更佳？

我猜是：方案1 > 方案2 > 方案3。

1.2 解析

首先是一致性。

方案1的詳情頁(yè)，基本都采取的是抽屜式頁(yè)面，比較一致。反觀方案2（抽屜式、彈窗式、二級(jí)詳情頁(yè)）跟方案3（二級(jí)詳情頁(yè)+無(wú)步驟、頂部步驟、左側(cè)頁(yè)簽切換等）都有3種以上不同樣式

第二是頁(yè)面空間利用率。 方案1的頂部一級(jí)橫向菜單導(dǎo)航+左側(cè)一級(jí)和二級(jí)菜單+中間內(nèi)容區(qū)，結(jié)合右側(cè)抽屜式詳情頁(yè)的方式，把一整個(gè)屏幕有效進(jìn)行塊狀切分與分層，結(jié)構(gòu)清晰，層級(jí)明確，利用率高。

反觀，方案2跟3的方案（尤其是詳情類頁(yè)面），總會(huì)出現(xiàn)大片空白的無(wú)效區(qū)域，不美觀的同時(shí)，也浪費(fèi)了對(duì)應(yīng)頁(yè)面空間。

1.3 經(jīng)驗(yàn)分享

1）交互設(shè)計(jì)規(guī)范與原則是基礎(chǔ)，更重要的是頂層抽象設(shè)計(jì)。

之前看過(guò)一些WorkDay（它是一家國(guó)外的老牌知名上市SaaS企業(yè)，市值570億美元左右）的產(chǎn)品設(shè)計(jì)介紹，印象最深的就是其“面向流程”和“面向?qū)ο蟆钡某橄笤O(shè)計(jì)。

它的頂層抽象是：流程 + 業(yè)務(wù)對(duì)象=系統(tǒng)。所有線下的操作都統(tǒng)一抽象為流程（約幾百個(gè)之多），基于流程可進(jìn)行節(jié)點(diǎn)的個(gè)性化配置，以及所有流程做作用的對(duì)象就是業(yè)務(wù)對(duì)象，所有數(shù)據(jù)也圍繞對(duì)象進(jìn)行查看、編輯、刪除、流轉(zhuǎn)、處理以及存儲(chǔ)。

• 比如入職操作，對(duì)象是員工，流程就是用戶對(duì)員工相關(guān)屬性數(shù)據(jù)的系統(tǒng)流程，是否需要審批，是否可撤銷等，都是流程上的節(jié)點(diǎn)，自行配置，流程結(jié)束的所有操作數(shù)據(jù)等，均最終落到員工這個(gè)業(yè)務(wù)對(duì)象之上；
• 比如排班操作，主業(yè)務(wù)對(duì)象是員工，其次業(yè)務(wù)對(duì)象是日期、班次、排班規(guī)則等，是否許審批，是否鎖定等均是排班流程上的自定義環(huán)節(jié)。

同時(shí)，他們把頁(yè)面設(shè)計(jì)也抽象為三類：業(yè)務(wù)對(duì)象的查看頁(yè)面、業(yè)務(wù)對(duì)象的操作流程頁(yè)面、流程的歷史查看頁(yè)面。

它不同于一般系統(tǒng)產(chǎn)品設(shè)計(jì)是抽象為組件，而是對(duì)頁(yè)面類型的抽象與歸納。

2）交互設(shè)計(jì)的核心是一體化與場(chǎng)景化。

比如菜單設(shè)計(jì)。

頂部一級(jí)導(dǎo)航，適用于平行子系統(tǒng)/模塊的切換場(chǎng)景。如果有二級(jí)菜單，則區(qū)分場(chǎng)景應(yīng)用。

• 如果是偏宣傳類產(chǎn)品設(shè)計(jì)，則可用二級(jí)浮窗的設(shè)計(jì)（利于展示內(nèi)容）；
• 如果是偏操作類產(chǎn)品設(shè)計(jì)，則建議使用左邊菜單欄導(dǎo)航（利于內(nèi)部導(dǎo)航）。

但左邊菜單欄導(dǎo)航（適用于系統(tǒng)/模塊內(nèi)的操作導(dǎo)航），建議不要超過(guò)二級(jí)菜單。如超過(guò)，則考慮用頁(yè)簽式切換代替。

二級(jí)菜單跟頁(yè)簽式切換的應(yīng)用區(qū)別是：前者偏向場(chǎng)景變換（比如假期規(guī)則、假期余額或加班規(guī)則、加班記錄、加班余額等），后者偏向狀態(tài)流轉(zhuǎn)（比如在職、離職、待入職或周期未開(kāi)始、進(jìn)行中、已結(jié)束等）

比如列表頁(yè)。如果是核心列表，一定要考慮自定義列、排序以及篩選；

核心列表頁(yè)面一般字段多，但對(duì)每個(gè)用戶來(lái)說(shuō)，只有需要的字段才是核心內(nèi)容。這方面吃虧數(shù)次，總覺(jué)得沒(méi)必要在此過(guò)多投入資源，卻也因此被吐槽不少。

比如詳情頁(yè)。

新建、編輯、查看建議一體化設(shè)計(jì)，而不是用兩個(gè)頁(yè)面分別實(shí)現(xiàn)新建和編輯，單獨(dú)再設(shè)計(jì)一個(gè)查看頁(yè)面，好處是用戶在列表頁(yè)面，就無(wú)需過(guò)多關(guān)注是要查看或編輯，隨意點(diǎn)擊整條均可進(jìn)入后，再?zèng)Q策查看或編輯等操作。

同時(shí)，嚴(yán)格區(qū)分二級(jí)詳情頁(yè)、抽屜式詳情頁(yè)、彈窗式詳情頁(yè)的適用場(chǎng)景，建議全系統(tǒng)采取一種設(shè)計(jì)最佳，最多使用（前）兩種，一定避免三種混合使用。

二、表現(xiàn)層：頁(yè)面結(jié)構(gòu)模塊化

頁(yè)面結(jié)構(gòu)模塊化與功能要素抽象化、產(chǎn)品規(guī)則透明化（控制層），三者目的一致（即讓用戶高效完成任務(wù)），相輔相成。

簡(jiǎn)單可理解為：功能要素抽象化是基礎(chǔ)、是內(nèi)在結(jié)構(gòu)，產(chǎn)品規(guī)則透明化是規(guī)則、是外化信息，而頁(yè)面結(jié)構(gòu)模塊化是呈現(xiàn)、是外在皮膚。

2.1 案例

作為一名考勤HR，你期望可根據(jù)企業(yè)的加班規(guī)則，快速完成對(duì)應(yīng)員工的加班方案的設(shè)置。

可供參考的方案，依然是3個(gè)，即：

方案1：核心分三大模塊：基礎(chǔ)設(shè)置、核心加班規(guī)則、更多規(guī)則設(shè)置。采取直鋪核心模塊+隱藏輔助模塊的方式，直接幫用戶決策模塊的優(yōu)先級(jí)；

• 基礎(chǔ)設(shè)置：名稱、適用范圍、負(fù)責(zé)人
• 核心加班規(guī)則：區(qū)分三種加班類型的同時(shí)，又拆分成若6個(gè)子模塊：允許加位置、計(jì)算方式、允許加班時(shí)間、最小加班時(shí)長(zhǎng)、休息時(shí)間、補(bǔ)償方式；
• 更多規(guī)則設(shè)置：加班時(shí)長(zhǎng)單位、加班時(shí)長(zhǎng)取整、加班步長(zhǎng)、日時(shí)長(zhǎng)折算、加班預(yù)警；

方案2：核心分三大塊：基礎(chǔ)信息、加班類型、更多設(shè)置。模塊拆分與方案一幾乎一致，但采取的方式，卻選擇的是按模塊分步驟的方式。

方案3：核心分四大塊：基礎(chǔ)設(shè)置、計(jì)算規(guī)則、核心加班規(guī)則以及高級(jí)設(shè)置。同樣是采取直鋪核心模塊+隱藏輔助功能的方式。

哪個(gè)方案更佳呢？

相信答案可能沒(méi)那么明顯，畢竟三者之間的模塊化設(shè)計(jì)，大差不差，如果一定要選擇，可能略傾向于方案2。

2.2 解析

從兩個(gè)層面看方案2的設(shè)計(jì)，它有兩個(gè)細(xì)節(jié)相對(duì)更佳。

首先，用戶視角。采取步驟式的模塊化設(shè)計(jì)方式，初始就提供了用戶進(jìn)度條，讓用戶有一種掌控感。同時(shí)，每個(gè)步驟只專注于當(dāng)前模塊的任務(wù)，相對(duì)而言，效率更高；

其次，產(chǎn)品視角。每個(gè)核心模塊都有自己的【全頁(yè)面】，充分利用PC端頁(yè)面空間的同時(shí)，便于后續(xù)不同模塊的擴(kuò)展。比如在模塊3新增加班預(yù)警、步長(zhǎng)限制等。

2.3 經(jīng)驗(yàn)分享

頁(yè)面結(jié)構(gòu)模塊化的基礎(chǔ)是功能要素抽象化。如果后者抽象的足夠清晰，窮盡，獨(dú)立，那前者就是基于它之上，做頁(yè)面層面的平鋪/切分、分類/聚合、收起/展開(kāi)、隱藏/顯示而已。

原則1：一定要做頁(yè)面模塊的用戶優(yōu)先級(jí)。比如基礎(chǔ)設(shè)置、加班規(guī)則、更多規(guī)則/高級(jí)設(shè)置，從模塊的命名上已經(jīng)明確了優(yōu)先級(jí)（即模塊1少不了，模塊2是核心，模塊三是增強(qiáng)或輔助）。

原則2：一定保證頁(yè)面模塊之間的獨(dú)立性，避免同一個(gè)要素可屬于多個(gè)模塊的情況。同一個(gè)要素，一定不能模棱兩可，好像屬于哪個(gè)模塊都行，否則就要考慮模塊分布的合理性。比如方案3的【基礎(chǔ)信息】中的【加班時(shí)長(zhǎng)單位】和【取整方式】，可能就有點(diǎn)疑問(wèn)，把它們放入到【更多設(shè)置】里，好像也成立。

原則3：每個(gè)頁(yè)面模塊下的要素?cái)?shù)量，一般不超過(guò)7個(gè)。否則要么需進(jìn)一步細(xì)分子模塊，要么思考再新獨(dú)立一個(gè)模塊。

因同一等級(jí)或同一模塊下的要素太多，容易讓用戶產(chǎn)生認(rèn)知疲憊感。就像在高速公路上開(kāi)車，一直保持差不多的速度，容易產(chǎn)生懶惰性思維匹配。

換個(gè)視角看，童話故事里的七個(gè)小矮人、葫蘆娃七兄弟等，為何是七個(gè)？再多就容易產(chǎn)生認(rèn)知疲憊。

三、頁(yè)面層：頁(yè)面設(shè)計(jì)對(duì)象化

中國(guó)語(yǔ)言博大精深，有官話，有方言；有黑話，有白話。不同圈子、不同圈層，不同職業(yè)、不同工種等，還有自己的專業(yè)名詞，不足為外人道。

同理，產(chǎn)品經(jīng)理的話語(yǔ)體系，與你所服務(wù)的用戶的話語(yǔ)體系，也會(huì)有較大差異，且你所服務(wù)用戶的職業(yè)、崗位不同，也會(huì)有差異。

所以在做產(chǎn)品設(shè)計(jì)時(shí)，你是否在使用你的用戶的話語(yǔ)體系，也在一定程度影響著產(chǎn)品的用戶體驗(yàn)，而對(duì)象化、對(duì)話感的話語(yǔ)體系可能更勝一籌。

什么是對(duì)象化？

就像你現(xiàn)在在看的文章，我在寫(xiě)的時(shí)候，腦海里是有一個(gè)你的畫(huà)像，仿佛你就在我旁邊，認(rèn)真聽(tīng)我“分享”經(jīng)驗(yàn)的同時(shí)，你還會(huì)給我“及時(shí)反饋”（假設(shè)你有困惑、疑問(wèn)之處，針對(duì)性給出我的解決方案）。

題外話：是的，我知道你閱讀起來(lái)并沒(méi)那么舒適，文字多，內(nèi)容長(zhǎng)，案例不是你所熟悉的產(chǎn)品等，水平有限，你就“弱水三千”，只取自己的“一瓢”吧。

產(chǎn)品設(shè)計(jì)理想的狀態(tài)也如此（尤其是頁(yè)面語(yǔ)言、要素命名以及布局等細(xì)微之處）。

你腦海里必須有一個(gè)清晰的用戶畫(huà)像，好似通過(guò)頁(yè)面來(lái)跟TA“聊天”一樣，并猜測(cè)TA可能得疑問(wèn)之處，用TA能聽(tīng)懂的語(yǔ)言體系，能看懂的命名，給出你的解決方案，最終讓TA高效完成既定任務(wù)。

3.1 案例

作為一名考勤HR，你期望根據(jù)企業(yè)考勤規(guī)則，快速設(shè)置好上下班時(shí)間與打卡范圍等，以便員工可正常進(jìn)行考勤。

方案1（如下圖所示）：不區(qū)分固定時(shí)間與彈性時(shí)間上班，默認(rèn)只需設(shè)置上下班時(shí)間，給你選擇是否自定義打卡時(shí)間范圍。最后再問(wèn)你是否需要彈性上班。

方案2：區(qū)分固定與彈性上班，明確標(biāo)識(shí)字段名稱，并想象你對(duì)考勤時(shí)間是明確的，給出一種“偷懶式”的打卡規(guī)則設(shè)置。

方案3：區(qū)分固定時(shí)間與彈性時(shí)間上班，需手動(dòng)輸入上下班卡的時(shí)間范圍。

假如你是考勤HR，你覺(jué)得哪個(gè)更高效，讓你感覺(jué)體驗(yàn)更好？

我猜你可能會(huì)優(yōu)選方案1或2（即方案1≈2>3）。

3.2 解析

首先，方案2比1好的地方在于，提前讓你做關(guān)鍵決策，避免認(rèn)知負(fù)擔(dān)。

比如方案2初始讓你選擇班次類型（即固定時(shí)間班次，還是彈性時(shí)間班次），既可以隱藏不相關(guān)信息，同時(shí)，提前決策，避免設(shè)置規(guī)則時(shí)，一直心存疑慮（我在哪里設(shè)置彈性時(shí)間呢？），反而需要付出更多的認(rèn)知精力。

這就好比領(lǐng)導(dǎo)找你談話，直接進(jìn)入主題，不鋪墊背景（如談話目的等），你對(duì)這次談話的主題和目的，心里會(huì)一直有疑惑（我是哪里做的不好？還是發(fā)生了什么大事？），反而影響你們談話的質(zhì)量。

第二，方案1跟2都是站在你的角度，多為你計(jì)算和思考了一層，減輕你的決策負(fù)擔(dān)。

比如打卡時(shí)間的設(shè)置，方案1是“上班前/后x小時(shí)打卡”，方案2是“最早可提前X分鐘打卡”，“晚于Y分鐘打卡記為遲到”，你無(wú)需基于上班時(shí)間計(jì)算從幾點(diǎn)到幾點(diǎn)，你也非常清晰知道設(shè)置的是允許打卡的范圍；

對(duì)比方案3采取是絕對(duì)時(shí)間（即上班卡HH:mm-HH:mm），你需要自行基于上班時(shí)間，計(jì)算幾點(diǎn)允許打卡，時(shí)間區(qū)間長(zhǎng)短是否合適等。

第三，方案1跟2的語(yǔ)言體系更清晰，更有說(shuō)話的對(duì)象感。

比如最早可提前X分鐘進(jìn)行打卡、晚于X分鐘打卡計(jì)為遲到，相比方案3的上班打卡絕對(duì)時(shí)間以及豁免X分鐘來(lái)說(shuō)，更具有對(duì)話感，更清晰表達(dá)意思，減少不必要的歧義。

再比如“上班最多可晚到X小時(shí)Y分鐘”，且加上說(shuō)明“上班晚到幾分鐘，下班就晚走幾分鐘”，相比方案3的“晚來(lái)晚走，最多允許晚來(lái)X分鐘”，顯然就更清晰精準(zhǔn)，也更像一個(gè)人在跟你對(duì)話的感覺(jué)。

3.3 經(jīng)驗(yàn)分享

頁(yè)面層級(jí)的設(shè)計(jì)，一定要有對(duì)象感、對(duì)話感，就像有人在給你“無(wú)聲”的說(shuō)話。

原則1：提前明確設(shè)計(jì)對(duì)象，且一定要真實(shí)、具象。

產(chǎn)品設(shè)計(jì)時(shí)，腦海里一定要有一個(gè)清晰的用戶（真實(shí)用戶最佳），可以從你調(diào)研的用戶中選擇（一位即可）。想象TA在（利用你的產(chǎn)品）完成任務(wù)時(shí)，會(huì)怎么思考，怎么決策，哪里有疑惑，有疑惑時(shí)怎么辦等。

它有點(diǎn)像你設(shè)計(jì)的求婚儀式，你所有的設(shè)計(jì)、細(xì)節(jié)、語(yǔ)言表達(dá)都是為了那個(gè)唯一的TA，最終設(shè)計(jì)出來(lái)的東西，雖一定有缺憾的部分，卻一定瑕不掩瑜，細(xì)節(jié)滿滿。

原則2：不要一味追求設(shè)計(jì)的簡(jiǎn)潔，更重要的是表達(dá)的清晰與完整。千萬(wàn)別因?yàn)樽非蠛?jiǎn)潔而放棄文字描述的方式（簡(jiǎn)潔有效的文字也是簡(jiǎn)潔設(shè)計(jì)）。

你設(shè)計(jì)的產(chǎn)品是協(xié)助用戶達(dá)成目的的工具（而不是目的本身），通過(guò)產(chǎn)品設(shè)計(jì)一步一步引導(dǎo)TA完成自身任務(wù)，這個(gè)過(guò)程其實(shí)就是你跟TA“對(duì)話”、“交流”、“協(xié)同”的過(guò)程，只不過(guò)不是由你親自完成，而是“委托”了你的產(chǎn)品。

對(duì)話的重點(diǎn)不在于你說(shuō)了什么，說(shuō)了多少，而在于對(duì)方聽(tīng)懂了什么。所以一定避免是“我的思維”，使用“我的語(yǔ)言”。

比如加班時(shí)間、需要打卡、限制出勤地點(diǎn)、晚走晚來(lái)，好像也能表達(dá)你的意思，但對(duì)方卻不一定能”聽(tīng)懂“。

那就可以：

• 加班時(shí)間–> 最早允許上班前X分鐘開(kāi)始加班，最晚可加班至下班后Y分鐘
• 需要打卡–> 外出時(shí)，是否需要打卡
• 限制出勤地點(diǎn) –> 外出時(shí)，是否只能在指定地點(diǎn)打卡
• 晚走晚來(lái)–> 當(dāng)天晚走X分鐘，次日可晚來(lái)Y分鐘不計(jì)為遲到

總結(jié)一下

今天主要分享了KISS原則的第三層：表現(xiàn)層，它主要是“三化”：交互設(shè)計(jì)一體化、頁(yè)面結(jié)構(gòu)模塊化、設(shè)計(jì)表達(dá)對(duì)象化。

1、交互設(shè)計(jì)一體化：解決復(fù)雜系統(tǒng)的子系統(tǒng)或子模塊之間的設(shè)計(jì)一體化，保證全系統(tǒng)體驗(yàn)對(duì)用戶的一致性，減少使用摩擦力。

以HR SaaS的三個(gè)案例，分別從頂級(jí)一級(jí)菜單、左側(cè)一二級(jí)菜單、列表頁(yè)、詳情頁(yè)的設(shè)計(jì)進(jìn)行了拆解，并分享了三個(gè)經(jīng)驗(yàn)：

第一，交互設(shè)計(jì)規(guī)范與原則是基礎(chǔ)，更重要的是頂層抽象設(shè)計(jì)。 以WorkDay為引子，把HR SaaS系統(tǒng)抽象為最頂層：流程+對(duì)象=系統(tǒng)，以及圍繞“流程”、“對(duì)象”又抽象為對(duì)應(yīng)的三類核心頁(yè)面：對(duì)象的查看頁(yè)面、業(yè)務(wù)流程的操作對(duì)象頁(yè)面以及流程的歷史查看頁(yè)面。

第二，交互設(shè)計(jì)的核心是一體化與場(chǎng)景化。

• 比如菜單設(shè)計(jì)。頂部一級(jí)導(dǎo)航適用于平行子系統(tǒng)/模塊的切換；左邊菜單欄導(dǎo)航適用于子系統(tǒng)內(nèi)且偏操作類產(chǎn)品。建議不要超過(guò)二級(jí)菜單，否則考慮用頁(yè)簽式切換代替
• 比如列表頁(yè)。如果是核心列表，一定要考慮自定義列、排序以及篩選；
• 比如詳情頁(yè)。建議新建、編輯、查看一體化設(shè)計(jì)，并考慮優(yōu)先考慮用抽屜式詳情頁(yè)，其次是二級(jí)詳情頁(yè)。最不建議是彈窗式詳情頁(yè)（甚至三者混合使用）

2、頁(yè)面結(jié)構(gòu)模塊化：與功能要素抽象化、產(chǎn)品規(guī)則透明化（控制層），三位一體，幫助用戶高效完成任務(wù)。

以HR SaaS的三個(gè)案例（加班規(guī)則）為例，拆解了它們的優(yōu)劣，并分享三個(gè)經(jīng)驗(yàn)。

第一，一定要做頁(yè)面模塊的用戶優(yōu)先級(jí)。

第二，一定保證頁(yè)面模塊之間的獨(dú)立性，避免同一個(gè)要素可屬于多個(gè)模塊的情況。

第三，每個(gè)模塊下的要素?cái)?shù)量，一般不超過(guò)7個(gè)。否則要么需進(jìn)一步細(xì)分子模塊，要么思考再新獨(dú)立一個(gè)模塊。

3、設(shè)計(jì)表達(dá)對(duì)象化：解決系統(tǒng)的細(xì)節(jié)體驗(yàn)問(wèn)題。即站在用戶視角，用其語(yǔ)言體系，采用對(duì)話的形式，讓系統(tǒng)設(shè)計(jì)“說(shuō)人話”，避免信息模糊、不清晰而導(dǎo)致的“不好用”類用戶心聲。

以HR SaaS的三個(gè)案例（新建班次）為例，拆解了它們的優(yōu)劣，并分享三個(gè)經(jīng)驗(yàn)。

第一，提前明確設(shè)計(jì)對(duì)象，且一定要真實(shí)、具象。

第二，不要一味追求設(shè)計(jì)的簡(jiǎn)潔，更重要的是表達(dá)的清晰與完整。千萬(wàn)別因追求簡(jiǎn)潔而放棄文字式描述的方式（簡(jiǎn)潔有效的文字也是簡(jiǎn)潔設(shè)計(jì)）。

《KISS原則：SaaS產(chǎn)品設(shè)計(jì)最重要的原則》這個(gè)小專題就告一段落了，希望對(duì)你有所啟發(fā)。

KISS原則：SaaS產(chǎn)品設(shè)計(jì)最重要的原則（上）

KISS原則：SaaS產(chǎn)品設(shè)計(jì)最重要的原則（中）