系統可見性原則是尼爾森十大交互原則之一，是在日常設計工作中經常運用的原則之一，該原則主要包括三部分內容，即內容可見、狀態可見、變化可見。那如何理解系統可見性原則的三部分內容呢，我們可以結合一個線下場景來加以解釋。

乘坐電梯幾乎是我們日常打工人每天都經歷的場景，如果把乘坐電梯整個流程進行拆解，大致可以分為三個部分：等電梯、坐電梯、出電梯。每個部分其實都有系統可見原則的運用。

在等電梯中，上下按鈕是用戶的主要操作，也就是電梯的核心內容，當用戶按下其中一個按鈕后，按鈕點亮，此時展示的是當前的按鈕狀態，而電梯隨之會根據各樓層的按鈕狀態進行上下升降，此時就是電梯的變化；

在乘坐電梯時，樓層按鈕是當前的內容、樓層按鈕的選擇與否是當前的狀態、而根據樓層按鈕高亮情況，電梯升降則是帶來的變化；

而當出電梯時，樓層數字定格在當前樓層，是當前的內容，樓層按鈕變為未選中則是當前的狀態，電梯門的打開則是帶來的變化。

所以，系統可見原則不僅僅是運用在設計中，還存在于生活中的方方面面，那我們該如何在實際工作中運用該原則呢？接下來就通過一個實戰案例帶你了解。

更多設計原則：

一、項目背景

本次項目是一個業務需求，有點類似電商產品中的“評價”功能，用戶對于已購買的商品提交相關內容，獲得對應的獎勵。但是與簽到功能還是有兩點不同：第一，該功能可根據單個商品的購買數量分次提交內容；第二，用戶提交的內容需要經過平臺審核，審核通過后才發放對應的獎勵。

我將通過對該交互方案輸出過程的解析，來帶大家了解內容可見、狀態可見、變化可見三個系統可見原則的運用。

二、內容可見

內容是功能的基本構成，明確內容后我們才能對頁面做信息架構與交互流程的設計，那該如何去考慮內容呢？我們可以通過“5W1h”原則來思考，即需要承載的內容是什么，要放在哪里，以及如何去呈現。

1. 內容是什么？

需要呈現什么內容可以從三部分考慮，即入口、信息、數據。入口即功能的觸點，用戶通過入口進入到功能，此時的內容在于入口名稱的設計上，因為該功能是引導用戶提交申請并獲得獎勵，所以入口名稱的設計除了交代該功能是什么，還應該考慮該功能能獲得什么。

而對于信息的設計，除了主體信息以外我們還需要考慮關聯信息。主體信息肯定是訂單信息，用戶通過對應的訂單發起申請，而關聯信息則需要根據業務規則來制定。

前面提到該功能用戶可根據商品訂單數量分次提交，那除了購買數量需要展示外，我們是否還需要展示可申請數量，來讓用戶明確自己的后續操作；其次由于每個商品申請后的獎勵是不同的，是否在每個商品信息上展示對應的獎勵信息。

數據則要考慮兩個維度的數據，操作數據、獎勵數據。操作數據是用戶當前可申請的數據，需要有一個匯總方便用戶感知，而獎勵數據則是用戶完成申請后獲得獎勵的統計。獎勵數據除了單純展示外，還可以引導用戶去轉化。

2. 內容要放在哪里？

內容的位置可以結合功能的關聯度來考慮，比如該功能是針對用戶在完成訂單后，當訂單滿足一定條件所提供的服務，跟用戶訂單相關，此時為了方便用戶查看與操作，我們就可以將該功能的入口放在訂單信息旁邊。

3. 內容該如何呈現？

內容的呈現一般是與 ui 設計師一起，結合內容的關聯性來考量，該功能的主體內容主要是訂單信息，包括對應的訂單數量、可申請數量、獎勵規則以及操作按鈕等，所以這些信息會作為一個主體去看待，那多個主體又該如何呈現呢？可以根據主體信息數量來考慮是用卡片還是分割線，是上下布局還是左右布局等。

三、狀態可見

一般只要有操作就會伴隨著狀態的改變，所以在考慮狀態的時候不僅要考慮狀態是什么，還要考慮對應狀態下的操作。針對此次功能，狀態是伴隨著申請的路徑來劃分的，可以分為可申請、待審核跟已完成，而對應狀態下的操作，我們則需要結合業務規則來定義。

可申請中，操作則是引導用戶去進行申請操作，而在待審核中，我們則需要考慮用戶提交的申請信息是否支持修改、撤回等操作，來確定放什么操作按鈕；而對于已完成而言，除了告知用戶結果以外，為了增強用戶的感知，是否可以引導用戶在獎勵詳情中找到對應的獎勵記錄。

四、變化可見

對于用戶而言，變化主要包括兩種，主動發生的變化與被動接受的變化。主動發生的變化主要發生在用戶操作后，這類變化主要告知用戶操作的結果以及預期，比如在該功能中，用戶提交申請后，由于需要時間審核，這個時候則需要告知用戶當前的操作結果，需要審核的時間，以及通過后預計得到的獎勵。

而被動接受的變化則是平臺反饋給用戶的變化，這個時候就需要增強用戶對于變化的感知，比如當有新的可申請的訂單時，在操作入口以數字的變化告知用戶；當用戶申請的內容審核通過后，在獎勵數據上可以展示新增獎勵的標識，用來增強用戶對于平臺數據變化的感知。

結語

以上，就是筆者結合自己在工作中的案例，分享的一篇如何運用系統可見原則輸出設計方案的文章，經驗有限，歡迎大家留言探討！