互動設計師一般收到的是乙份較為詳細的思維導圖，其中包括功能模組、功能點以及一些功能場景的詳細說明，其中還會涉及一些程式實現方面的後台邏輯。把這些複雜的文字資訊以介面語言的方式呈現在使用者的眼前是乙個設計師的基本素質，下面我就通過例項講講怎樣有效地把思維腦圖和後台邏輯轉化為介面語言。
首先闡釋一下什麼是介面語言，介面語言是人機交流互動的介質，它可以幫助人們從形象的介面資訊中組織邏輯，完成與介面的互動，最終達到使用目的。
好的介面語言可以節省使用者讀取資訊和學習的過程，就好似考題，複雜冗長的表達會隱藏很多關鍵的資訊從而誤導考生增加難度，反之則簡單易懂。而設計師的工作就是把使用者當成小白考生，呈現給使用者最簡單最易懂的資訊和操作路徑，從而縮短使用者的思考時間。
下面我將用乙個群管軟體的「**功能」作為例項詳細講述怎樣用簡潔的介面語言表達複雜的產品邏輯。首先我給大家闡述一下**功能的背景：一般情況下社群的運營者需要在社群和好友圈內散布一些資訊，例如廣告、行業資訊、群公告等等，由於群和好友的數量較為龐大，逐條操作工作效率過低，因此需要乙個可以批量操作的功能模組幫助他們實現目的。
根據使用者使用場景總結**的流程主要分為四大大模組：篩選物件流程、編輯流程、傳送流程、歷史記錄。並且四個模組需要形成閉環，例如歷史記錄可以再次編輯和傳送，防止使用者漏發和錯發。程式設計客棧除了及時**的需求使用者對定時**的需求也很急迫，定時**可以方便使用者在非工作時間也能完成資訊的及時推送。
首先我們蒐集使用者的使用需求，歸納使用者操作場景：
下面是經過使用者使用場景研究後的流程圖：
由於場景較多，操作分支比較複雜，所以在設計過程中一定要注意分析使用者的行為操作，將使用者行為分層，為接下來的介面設計做準備。
通過以上的這些分析，互動文件的輸出就需要清晰的標註出層級，哪些需要重要展示，哪些資訊可以弱化。互動稿可以通過顏色和區塊的劃分來展示頁面的資訊層級。這裡值得注意的是：我們的主流程要避免多次跳轉和彈窗的使用，這樣會導致使用者在複雜路徑中迷失；也需要避免頁面主次不清，資訊在頁面內大量堆疊。
1、建立視覺層級的方法
好的視覺層級會幫助使用者提高獲取和理解資訊的效率，一般來說會從以下幾個元素來表現：
1）位置
一般情況下，人眼對左上和中部的觀察最佳，依次是右上、左下和右下，當然這也與書寫習慣和文化因素有關。除此以外，大多數人的眼睛沿水平方向移動更加快速和不易疲勞，因此左右關注度的差別要小於上下關注度的差別。
如果設計師想要體現並列關係的時候，左右排列會更佳，而想要拉開差距，上下排列更能突出。當然這也要根據實際情況來斟酌，例如資訊過長過於複雜就會採用上下列表的形式，而同級並列的重要功能操作多數採用橫向排列。
另外，在上下關係中，使用者會優先關注上部內容，例如網頁設計中首屏的資訊會比第
二、三屏層級要高，所以在功能模組的布局程式設計客棧中，同級的功能的盡量採用橫向排列的方式。
就下面兩個模組的布局方式，第二種布局使用者會不自覺認為前面兩三個功能tab更加重要，越往下的功能越次要。
2）大小
重要的元素需要更大，可以通過拉開大小差距的手法突出重點。例如下面的qq**的介面設計，使用的大小劃分來搶奪使用者的視線，從而達到視覺層級的劃分。
3）距離
這裡不得不提格式塔理論，也可以簡單理解為接近性原則：
人們在感知複雜的物件的時候，會有意識或者無意識fpxzhnjwvj地將接近的物體納入到乙個有組織的系統當中，而不是簡單的視作為物件的集合，這是格式塔原理的基礎。
格式塔原理會適用到不同層次的認知當中，有的是顯性的，有的則是隱性的，但是最有趣的是視覺化的部分，也就是設計師借助這種原理所創造出來的各種設計。可以看下面左側的，我們會非常自然的將元素在視覺上做了分組，這就是接近性原則的魅力。
通過研究和驗證，接近性原則中距離的接近，比起色彩和形狀的近似，更容易被人所認知，下側右圖就很好的認證了這一觀點。合理運用接近性原則能夠讓使用者更輕鬆地獲取資訊，感知內容。很多時候，使用者並沒有準備好花費時間來學習複雜的介面，可以快速被感知和識別的資訊，能更好的留住使用者。
4）色彩
色彩在互動設計中應用較少，大都會採用灰色系的明暗來表現層級，然後採用乙個彩色系來突出重要功能按鈕。互動設計師對色彩的應用只需要達到介面層級清晰的目的，過於花哨的色彩反而會干擾邏輯的表達，也會誤導ui設計師的認知。
2、建立視覺層級的例項應用
回到這次的設計例項「**功能」來談談，在對使用者行為做了層級劃分後，我們可以開始著手進入頁面布局，除了要運用一些理論方法以外，我們還需要進行一些實際場景的深入分析。通過以上使用者流程的梳理，我大致將頁面分為以下三個區塊：選擇物件區、編輯訊息組區和**記錄區。我在頁面視覺上做了層級劃分：
1）一級資訊吸引使用者：假設使用者只會在當前頁面停留較短的時間，一級頁面就必須少而精，能夠讓使用者快速理解頁面資訊，在設計上就需要重點展示該模組的主流程功能；
**模組的一級資訊就是引導使用者完成核心行為：
選擇物件 -> 建立內容 -> 開始傳送
這是乙個較長的操作流程，並且並沒有很強的步驟劃分，例如使用者可以先選擇傳送物件也可以先建立要傳送的內容，設計師要做的是有效地通過介面語言引導使用者完成操作，卻也不能限制使用者的操作習慣和行為，最優的介面布局是在做到清晰層級的劃分的前提下支援多種操作場景。下面是我針對**主流程的介面設計：
2）二級資訊補充理解：針對一級資訊進行解釋，www.cppcns.com提煉精華內容，幫助使用者在盡量短時間內理解資訊；
**模組的**記錄和相關操作可以在介面上相對弱化，只有當使用者在特定的場景下才會成為視覺焦點。例如可以分別檢視傳送中的任務、定時任務和傳送完成的記錄，並且針對性的進行操作。
另註：當多個傳送任務在排隊時，使用者在瀏覽後會忽略正在傳送的任務，從而對排隊中的任務產生迷惑，這裡我將正在傳送的任務實時置頂，視覺上的焦點會幫助使用者理解任務的進度。
3）**資訊了解詳情：一級和二級資訊已經很好的解釋，**資訊做補充，更多的做為乙個展示或者入口，提供跳轉功能。
**模組的**資訊是相對隱藏的，只有在特殊場景下才會啟用，這裡採用了彈窗的形式來完成操作。例如可以批量刪除傳送記錄，每個訊息組可以檢視具體傳送物件和複製內容等等。
相對於純理論的的文章，這篇文章更偏向於實踐乾貨，當設計師拿到功能需求時不能盲目的著手設計，需要經過以上的分析和歸納，深入使用者的使用場景，對於較為複雜的功能軟體，設計階段需要反覆斟酌頁面布局和功能按鈕的布局，利用多種建立視覺層級的方法來指導設計。最後希望這篇文章能夠幫助到大家，大家有什麼不明白和不理解的地方也歡迎留言。
本文標題: 怎樣把複雜邏輯與資訊，轉化為簡潔的介面體驗？
本文位址:
怎樣把梳子賣給和尚
有乙個營銷經理想考考他的手下，就給他們出了一道題 把梳子賣給和尚。第乙個人 出了門就罵，什麼狗經理，和尚都沒有頭髮，還賣什麼梳子！找個酒館喝起了悶酒，睡了一覺，回去告訴經理，和尚沒有頭髮，梳子無法賣！經理微微一笑，和尚沒有頭髮還需要你告訴我？第二個人 來到了乙個寺廟，找到了和尚，對和尚說，我想賣給你...
把渲染和邏輯分離
構成 小程式 模板 簡單來說就是不要再讓js直接操控dom，js只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。小程式的框架也是用到了這個思路，如果你需要把乙個hello world的字串顯示在介面上。wxml 是這麼寫 text js 只需要管理狀態即可 this.set...
怎樣把桌面移到D盤
一 先修改兩個登錄檔項 hkey current user software microsoft windows currentversion explorer shell folders 和 hkey current user software microsoft windows currentv...