在終端APP中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現(xiàn)卻是設計師和研發(fā)群體的一個痛點。如何輔助設計師設計高性能炫酷的動畫、如何將設計師設計的動畫準確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。
圖1 傳統(tǒng)動畫實現(xiàn)流程圖
當前最好的動畫設計軟件是Adobe After Effects（簡稱AE），從AE動畫制作到終端APP呈現(xiàn)，傳統(tǒng)的實現(xiàn)方式如圖1所示，有三大痛點：實現(xiàn)成本高、溝通成本高和性能難以保證。
近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動畫工作流解決方案，雖然在一定程度上提升了生產效率，但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。
PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺自主研發(fā)的一套完整的動畫工作流解決方案，助力于將AE動畫方便快捷的應用于各平臺終端。PAG的流程圖如圖2所示，設計師在AE上設計出動畫后，可以通過導出插件導出pag文件，同時PAG提供了桌面端預覽工具，支持實時預覽效果，在確認效果后，通過運行配置上線，各平臺終端可以通過PAG SDK加載渲染pag動畫。
圖2 PAG動畫工作流流程圖
與Lottie、SVGA相比，PAG增加支持了服務端。除此之外，如圖3所示，PAG動畫方案在導出動畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢。
圖3 PAG和Lottie對比圖
和Lottie、SVGA實現(xiàn)不同的是，PAG不依賴平臺端渲染接口，可以實現(xiàn)各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設計師的創(chuàng)造力。針對這個問題，PAG新增了BMP預合成的導出方式，支持導出所有AE特性，適用于不可編輯的場景。其原理如圖4所示，在合成的層面將渲染結果截取成圖片，然后進行視頻編碼。
圖 4 BMP預合成原理圖
針對視頻不支持透明通道而動畫需要包含透明通道的問題，在編碼的層面擴展了透明通道的支持，如圖5所示。
圖6 PAG矢量和BMP預合成混合導出
針對導出動畫和AE設計動畫存在偏差的問題，PAG導出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。
圖7 PAG導出面板
在預覽界面，同樣有不支持特性的提示，如圖8所示。
圖8 PAG導出面板預覽窗口
在使用AE設計動畫的過程中，設計師可以方便快捷的提前查看使用了那些不支持直接導出的AE特性，換種實現(xiàn)方式或者導出成BMP預合成，有效的解決了設計動畫和導出動畫存在偏差的問題。
在AE動畫設計的過程中，PAG導出面板提供了一鍵設置BMP預合成的方法，如下圖9所示。需要提示的是，一旦設置了BMP預合成，該合成中的文本和圖片將不能再被用戶編輯。
圖9 BMP 預合成設置
由于BMP預合成可能會影響到可替換圖片的數(shù)量，PAG同時會實時更新可替換圖片的數(shù)量給設計以提示。
在用pag設置的素材中，經常會遇到用戶填充的圖片與默認占位圖尺寸不一致的情況，在導出面板中PAG增加圖片填充的四個規(guī)則，如圖10所示：
圖10 可替換圖片填充設置
其中：
不縮放：畫面不縮放，從左上角位置開始裁剪
黑邊：在保持高寬比的情況下縮放到設備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會出現(xiàn)黑邊，為默認填充模式
拉伸：不保持寬高比填充，會發(fā)生失變形
裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
具體效果如圖11所示。
圖11 圖片填充效果圖
PAGViewer支持桌面端預覽PAG文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設計師本地填充素材，實時預覽填充效果，無需等待上線后才能確認真實效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內置了音頻文件，支持播放音頻效果。具體效果如圖12所示。
圖12 PAG效果預覽
在pag動畫實際使用的過程中，PAG經常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現(xiàn)不佳，需要進行返工優(yōu)化，同樣的問題在使用Lottie方案時候也會存在。
除了效果預覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動畫的基本信息，如時長、幀率、尺寸、bmp預合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標，定量的評估pag文件的性能，如圖13所示，方便設計師進行針對性的優(yōu)化，而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。
圖13 PAG性能展示面板
目前PAG方案已經廣泛應用于騰訊公司內外幾十款產品中，涵蓋了眾多的國民級應用。
總結下來，PAG目前主要使用在以下幾大場景：
圖15 UI動畫場景
設計師設計出動畫文件后，研發(fā)只需要替換預設的文本內容即可，并且文件體積非常小。
圖16 貼紙動畫場景
圖17 照片/視頻模板場景
PAG支持將內置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個PAG動畫設計成一個模板，把預設的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設計師自由批量生產模板，無需研發(fā)介入。
仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實現(xiàn)視頻模板功能。
圖18 智能剪輯場景
智能剪輯是圍繞用戶上傳的視頻內容，生成定制化的模板，模板本身是不固定的，可以從多個PAG文件組合而成，類似活字印刷。設計師可以利用這個特性，構建自己的特效組件庫，然后對接AI的識別能力，根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰(zhàn)報功能，隨機生成游戲高光時刻視頻。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文從What和How兩個部分闡述如何輸出清晰有效的設計方案，為大家建立系統(tǒng)的設計思路提供幫助。
很多初入職場的設計師在審美和平面圖形基礎上都比較扎實，對軟件的操作也出神入化，單個方案的界面視覺表現(xiàn)完成度和細致度也沒有太大問題。但卻往往在實際輸出項目方案的時候碰到瓶頸，方案反復地修改還不盡人意，設計能力無法得到質的提升，晉升的腳步也從而停滯。
本文從What/How兩個部分循序漸進地闡述如何輸出清晰有效的設計方案，希望給大家一些建立系統(tǒng)性設計思路的啟發(fā)，幫助大家更好地輸出設計方案，為決策設計方案提供更有力的參考。
WHAT: 什么是清晰有效的設計方案
首先我們需要對清晰有效有一個整體的認知。所謂清晰，從字面上理解是指看得很清楚、明朗，設計層面來說就是方案能做到方向明確，方案明了。而有效字面上指的是有效果，有效力，從設計層面來說就是輸出的方案可以解決存在的問題，能達到設定的目標以及可以切實落地。
清晰和有效的考量維度是不一樣的：清晰更多是針對設計這一環(huán)節(jié)，在于不同方向/方案的差異度和側重點；而有效則更多需要聯(lián)合設計上下游（用戶/產品/開發(fā)）。對于優(yōu)秀的設計方案來說兩者相輔相成，缺一不可。
接下來我們來詳細拆解什么是清晰和有效。
1.清晰 - 方向明確，方案明了
——————————
很多設計師對方案輸出的數(shù)量有個認知誤區(qū)，認為設計方案越多越好，可以給老板、合作方更多選擇，往往不假思索地用大量的時間輸出所有可能的方案，并拿出來讓別人評審，認為把所有的可能性列出來就不會錯，這正是對方案清晰性缺乏認知的表現(xiàn)。
在設計最初期，不要著急動手輸出界面，先結合目標（近期目標和遠期目標）綜合考量，系統(tǒng)性地思考有哪些途徑達到目標，確保所有實現(xiàn)手段的方式都有考慮到，并且可以整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸，才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。前期規(guī)劃思考的深度決定了方案的廣度，只有清晰的思考方案才會創(chuàng)造無限的可能。
用案例來讓大家對清晰這個定義有更具象的認知：
相冊小程序Logo這個需求的目標是需要突出相冊元素，并強化品牌識別度。
這是設計師輸出的Logo提案初稿，雖然輸出了28個方案之多，但沒有設計思路的規(guī)劃，想到哪就畫到哪，很多方案是重復的，還有一些方案在設計初期就應該Pass，設計的整個細致度也不夠充分。
于是設計師對設計方向重新進行規(guī)劃整合，按照輸出形式重新規(guī)劃了分類。
按照分類篩選出四個可以繼續(xù)優(yōu)化的方案。并且拿著四個不同方向的方案去匯報。最終確定D方案。
我們重新回顧一下這個需求，28個方案 VS 4個方案，設計師需要的不是盡可能輸出多方案的能力，方案越多可能表示你在錯誤的道路上越走越遠，需要的是通過前期系統(tǒng)的思考能一次把方案做對的能力。
2. 有效 - 解決存在的問題、能達到設定的目標、可以落地的方案
——————————
很多設計師拿到產品需求會立即動手，認為滿足了產品這個角色提的需求便是好的設計輸出，或者把方案出的天花亂墜，當產品或者其他角色提出不同意見就會覺得他們不懂什么是好的設計。這些現(xiàn)象大多是因為設計師在項目前期沒有正確思考和評估這個需求本身需要解決什么問題、方案能否達到團隊共同設定的目標，以及方案是否能平穩(wěn)落地這三個維度。
解決存在的問題—從問題出發(fā)
我們在實際輸出方案的時候，不能從產品經理的需求文檔開始，而是要把考量維度更前置，從項目現(xiàn)有的問題出發(fā)。這個問題的搜集包括外部用戶的反饋，內部團隊的聲音，但需要注意的是用戶的反饋不一定是真正的問題，需要做到篩選和甄別。比如新發(fā)布一個版本可能會碰到的一個情況是很多用戶打一星反饋說界面太難看太丑，這種屬于用戶感受，我們可以再深挖一下用戶覺得丑的原因，是不是改變了太多用戶習慣，但又沒有給用戶真的帶來更好的體驗和更多的收益。
能達到設定的目標—從目標啟動
問題還需要結合目標一起考慮，解決問題的思路并不完全等同于目標，目標是大家一起制定的未來產品的發(fā)展方向。比如我們新發(fā)布的版本里面新加了一個Tab改變了用戶習慣，大批用戶投訴，但如果這個新Tab是符合我們目標的，我們不能為了短期解決用戶投訴把這個Tab下掉，應該繼續(xù)觀察用戶在這個使用過程中碰到了什么問題，解決實際操作中碰到的問題。
用案例來讓大家對問題和目標有更具象的認知：
我們需要優(yōu)化QQ空間的為空界面，首先我們梳理下現(xiàn)網存在的問題，風格整體比較老舊，很多圖形表意不明確，新出模塊就會有新風格，所以存在很多不統(tǒng)一的地方，空間整個業(yè)務有一百多個為空界面，導致開發(fā)也不清楚到底應該怎么用，用什么，所以很長一段時間是處于亂用的狀態(tài)。
接著我們梳理了這次優(yōu)化的目標：
1 界面統(tǒng)一，用戶能對表意感知明確（解決現(xiàn)網問題）
2 強化QQ的品牌
3 做成基礎組件，保證復用性
4 低成本開發(fā)
確定了優(yōu)化目標以后我們沒有馬上急于嘗試風格，而是先遍歷了所有為空異常頁，整合了所有場景最后梳理出八種情況，這八種情況可以覆蓋所有的為空場景，梳理整合場景是目標1、3、4能實現(xiàn)的前提。
然后我們基于這八個場景來輸出設計風格，要低成本開發(fā)，所以這里沒有考慮加動畫，用企鵝剪影結合具體的場景來表意，不僅強化了品牌，也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規(guī)范，Push給對接的開發(fā)同學方便調用。
在輸出方案過程中，始終都要緊緊貼合問題和目標，避免無效設計。
能落地的方案—技術可以實現(xiàn)
在輸出設計方案的時候，設計師需要考慮到開發(fā)成本是什么，需要消耗多少資源去實現(xiàn)這個需求，最低成本達到目標的路徑是什么。如果有些方案開發(fā)成本很大卻收益價值卻很小，我們就需要斟酌它是否仍有執(zhí)行的必要。避免一味的追求設計效果不去對齊成本、人力，最后也只會是設計的自嗨。
用案例來讓大家對清晰這個定義有更具象的認知：
產品提了好友生日推送禮物的需求，目標是想用生日這一比較溫情的場景去設計專門的祝福頁，用來提升寫操作和大盤活躍。我們需要設計送給用戶的禮物卡片，從實現(xiàn)手段的難易規(guī)劃了三個方向：
A 手勢交互但開發(fā)難度大: 3D手勢交互動畫
B 趣味動圖且開發(fā)成本適中：局部小動畫
C 靜態(tài)但開發(fā)成本低：全靜態(tài)視覺，復用已有開發(fā)流程
最后團隊對齊了人力成本，決定采用方案C，把設計精力放在本身卡片的表現(xiàn)上。
HOW: 如何輸出清晰有效的設計方案
那如何才能輸出清晰有效的設計方案呢？設計方案歸根結底是思維方式的具體體現(xiàn)，輸出清晰有效的設計方案最核心的點在于體系化的思考方式，我總結了一下幾點：
1 拓寬邊界
——————————
拓寬邊界需要設計師站在更高的視角和有更廣的視野，把設計從表現(xiàn)和執(zhí)行抽離往前后延展，在整個設計過程中往前去挖掘需求和規(guī)劃產品結構，往后做到把控和沉淀，能站在上下游各維度去Review整個項目，只有站在更全局的視角審視，才能跳出片面設計的維度。
2 轉換視角
——————————
從不同的視角看待問題，學會拆解問題和解決問題，從產品/開發(fā)不同的角度來全盤看整個產品，分析這個需求的投入產出比是不是足夠，是不是能達到目標（包括設計目標和產品目標）。設計、產品、開發(fā)從來都不是對立的，都是不同角色為了整個產品發(fā)力。
舉個例子，產品同學覺得輸出的方案不好看，是在用感性表達，我們可以嘗試繼續(xù)拆解不好看背后的原因，比如是不是核心內容不夠突出、擔心按鈕轉化率等，一開始就抱著產品不懂設計這種想法是沒有辦法解決問題的。
還有一個就是用戶同理心，很多時候我們不能只站在設計師和產品的角度看待用戶反饋的問題，比如新功能內部團隊覺得很厲害，但實際門檻太高，用戶根本不知道怎么操作，而我們長期體驗這個產品反而忽略了產品的易用性。
3 結構思維
——————————
我們在啟動項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產品同學對齊好目標，結合設計理念，最后找到發(fā)力點在哪里，循序漸進，這樣很大程度上能避免項目的反復，對設計流程的準確把控也是輸出優(yōu)秀設計方案的基礎。
舉一個日常生活的例子幫助大家理解，比如我的問題是長得丑，我的目標是要變得更年輕漂亮，我的理念就是改善體型和優(yōu)化五官，最后找到具體的發(fā)力點比如晚上不吃晚飯，去美容院打美容針、學會怎么化妝等。
4 認知創(chuàng)新
——————————
有些新設計師對設計創(chuàng)新的認知還停留在是去做一些創(chuàng)造世界、改變世界的事情，認為創(chuàng)新就是把原項目進行翻天覆地的改變，初入職場會覺得負責的業(yè)務和項目都很小，沒有什么意思，其實創(chuàng)新的維度有很多，包括設計工作流程的優(yōu)化、還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節(jié)給用戶創(chuàng)造驚喜。擺正心態(tài)才能做對事做好事。
5 及時復盤
——————————
完成項目以后需要不斷的總結方法，遇到的問題，除了技法層面的提升，更重要的還包括思考層面的提升。學會去總結之前踩過的坑，避免重復性的問題，比如你的輸出一直存在層級不清晰的問題，那么你需要關注后續(xù)輸出的界面里大模塊之間以及元素之間的層次是否還存在這個問題?？梢苑稿e誤，但是盡量避免總是犯同樣的錯誤，這樣才能加速成長的腳步。
寫在最后
進入互聯(lián)網公司工作之前，我們對設計的理解更多停留在表現(xiàn)層面，所以對好設計的判斷標準更多是好不好看、喜不喜歡。當進入互聯(lián)網公司后，隨著工作經驗的積累，我們會發(fā)現(xiàn)設計不只是狹義地使用軟件繪制圖形，背后需要很強的邏輯和系統(tǒng)思考的能力、結構化的思維、溝通能力等，需要我們不斷的學習補齊自己的短板，及時轉換職場心態(tài)。
文章來源：站酷 作者：騰訊ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這雖然是交互基礎的概念但對我們設計師來說也極其重要，概念雖然很簡單，但實際在設計中也會頻繁的遇到問題。我們先用比較正緊的文案來描述一下這些比較“枯燥”的概念，映射是一個術語，從數(shù)理理論借用而來，表示兩組事物要素之間的關系。（書中諾曼先生的原話）
上兩篇文章我們說的示能和意符，表示了事物本身具備或傳達的功能和被交互性，而映射則是表示了控制器和被控制對象的關系。
好的示能和意符的設計，可以讓映射變的自然。
第一篇示能我們舉了一個開關的例子，多控開關之所以讓人抓狂首先是缺少了意符的表達，其次是映射的不合理。就如同我們在書中見過的一個煤氣灶的案例，4個灶頭下方有4個控制開關，左右兩種不同的排列方法，體現(xiàn)出好的映射有多重要。
諾曼老師在如何設計映射中提到，自然映射設計可以分為3種層次
這三種映射的層次在體驗中的滿意度與效率一次遞減，我們依次在舉例說明
例如門把手在門上，我們就覺得這映射設計的很自然，通過轉動把手可以對門進行開和關。再例如我家的洗衣機上有一個用來選擇洗滌模式的旋鈕，洗滌模式圍繞在旋鈕的周圍，旋鈕上有光點，旋轉旋鈕光點就會旋轉到我們需要的洗滌模式上，這也是控件與對象一體的形式，滿足用戶對控制器與被控制對象的心理預期。
那在數(shù)字產品中我們也會遇到類似的情況，例如我們想展開放置在一個卡片中的文字，我們通常最好的方式是在文本的邊上設計一個提示展開的“可點擊按鈕”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的區(qū)域，因為映射關系逐漸減弱到無關。
再舉個例子iOS系統(tǒng)中如果要調節(jié)音量，可以在音量模塊中直接通過手指的滑動來調節(jié)，而不需要在模塊中或者模塊外部加上兩個用來增減音量的按鈕。不過說實話，華為的曲面屏雙擊側邊喚出音量控制模塊，個人覺得成本還要比物理實體按鍵更高一點。
除此之外，智能手機在逐漸演變進化的過程中，手勢操作功不可沒，利用手勢代替按鈕也節(jié)省了更多的成本并且在效率方面也得到了提升。例如視頻播放器的應用中，會有相應的控件用來控制視頻的播放、暫停、聲音、進度、亮度、橫豎等等，這些按鈕其實就是最佳的映射設計
這個也就是我們常說的格式塔心理學中的接近原則，因為越靠近越相關，很好理解。某些物件在設計時無法將控件和被控對象結合設計，那么我們只能退而求其次，讓他倆能更靠近一些，在映射關系上可以更清晰。
接下來我會給大家看我家的冰箱和電飯煲的操作界面，大家就知道，次佳的映射如果不好好設計，也會顯的很糟糕。
如圖所示，其實界面的信息設計無非就是這樣，如果你可以把這些界面的信息設計的有邏輯有層次，那么在其他的用戶界面中也能夠如法炮制。
例如電飯煲的烹飪模式和其對應的按鈕，都是通過點擊多次按鈕進行控制，而不是在單獨的模式中具有單獨的按鈕，而最好的方法那肯定就是想選什么模式直接選，而不是做一個按鈕來多次切換。
這里是因為本身這款電飯煲沒有智能面板，所以通過物理按鈕只能這么做，否則，按鈕一多就更難操作了。那有小伙伴問他能不能和洗衣機一樣做個旋鈕呢？當然也可以，因為旋起來也比多點幾次按鈕來的方便，只不過旋鈕做上去之后其他的按鈕可能也要變成旋鈕，在產品設計上就有更多的問題要探討啦。
所以我們再來看它的按鈕分布，發(fā)現(xiàn)其實控制按鈕和被控制的參數(shù)其實缺少了距離關系，當你看著想要控制的參數(shù)卻找不到控制按鈕的時候就會比較抓狂，因為在這個布局中既沒有滿足最佳也沒有滿足次佳，甚至連在空間分布上也無法產生對應。
然后我們再看這個電冰箱，這個西門子電冰箱的用戶面板我也屬實沒有看懂，但距離關系已經做的比咱電飯煲要好一些了，至少左右兩側的按鈕應該是控制左右兩側不同的溫度。
左右兩側分別是冷凍和冷藏的設置，但是中間只有兩個溫度，一共4個按鈕和兩個溫度，這顯然在自然理解下是不能理解的，這就和艾爾登法環(huán)里的boss們的關系一樣混亂，那4個按鈕為什么只有2個溫度呢，因為左側的兩個按鈕分別是切換不同的溫度設定，而右側的一個按鈕和溫度并沒有任何的血親關系，因為它就是一個鎖！不仔細看還以為它是用來控制溫度的，因為和其他三個按鈕太像了！這不就是在濫竽充數(shù)么。
這里的兩個案例我們發(fā)現(xiàn)，在次佳的映射中，其實就對格式塔心理學里的原則應用的比較多，為了讓控制器和被控制對象的關系更緊密。
在某些場景下，我們是無法通過設計讓控件與對象滿足1、2兩個要求，所以就會有第三種，在空間分布上一致，例如在一個大空間中的燈與開關，開關不可能做在燈本體上，也沒有辦法讓它倆靠的更近，所以只能在空間分布上更加一致，才能夠讓映射關系合理。
其實數(shù)字產品的用戶界面設計，基本上我們可以做到1、2點，因為本身區(qū)域有限，控制器和對象也幾乎在彈丸之地互相映襯，大部應用的控件操作起來也都很簡單，但是不外乎一些較為復雜的工具類產品，例如車機系統(tǒng)，通過中控屏來控制車輛的一系列功能例如：空調、座椅、車窗等等，那我們也發(fā)現(xiàn)其按鈕的分布也是滿足了這樣的交互映射，將物理按鈕變?yōu)樘摂M按鈕集成在中控屏幕中，為了讓用戶更好的映射出它們之間的關系，于是我們就需要利用空間分布的關系，來讓用戶明白，按鈕與控制對象的關聯(lián)邏輯。
例如在特斯拉的UI界面中，將整體分為3塊區(qū)域，左邊是形式儀表右側是多功能區(qū)域底部則是車輛相關的控制功能，你想控制前后車燈，那么按鈕就會在車輛模型的前后兩側，如果你想打開空調則在底部工具欄的中間即可打開，如果你想給座椅加熱那么也可以像圖片中那樣在4個座位的圖片中進行交互就可以實現(xiàn)。這樣的設計讓控件與被控制的對象能夠遠距離在控件上形成一個映射關系。
還有在日常生活中，大家家里是否用過升降式晾衣架，通過旋轉把手來操控升降，這里其實也很難應用到空間部分，因為兩者所處的平面不同，就更加無法對應起來，有沒有一種比較好的方式來解決這個問題呢，我覺得可以用顏色或者標記來做映射的對應。所以為了映射的相關性、同型、同色、靠近等方式都可以用來提升二者的相關性。
數(shù)字產品中的映射也是關于控制器和被控制對象的故事。數(shù)字產品中也有不少的控制器我們就稱之為控件，例如一個圖標按鈕、一個下拉列表或者一個滑塊，它們都有各自的控制對象。而我們常說什么樣的設計滿足用戶心智，指的就是讓用戶覺得當他操控控件后帶來的結果與反饋是他預期之中的，這就會讓其覺得是合理的、自然的。
例如在這個案例中，設計師其實是想通過按鈕來控制車中相關的功能，但是大家能發(fā)現(xiàn)問題嗎？映射的前提是控件要先滿足示能和意符的表達，其次再通過映射告訴用戶，誰控制誰。但我們發(fā)現(xiàn)這個界面中的按鈕其實在示能和意符上出現(xiàn)了歧義，例如熱車的圖標，我們通常認為這樣的宮格形式布局都是以入口形式存在，點擊后會進入下一個界面，但是設計師在這里其實把一些情況搞混了。
所以我們仔細看，這些圖標就像是電飯煲上的按鈕，只要點擊就會觸發(fā)車輛狀態(tài)的變化，相當于一個開關，咱們先不說這樣的設計是否方便用戶，我們看映射其實就會發(fā)現(xiàn)用戶其實很難做到空間布局上的對照，從而更高效的來對車輛進行控制。并且也存在一定的邏輯錯誤，例如熱車和解鎖是什么邏輯，車窗開到一半想停止怎么辦，空調要調節(jié)冷熱和溫度怎么辦，所以這里不再單純的是一個開關集合的區(qū)域，會遇到很復雜的情況。
我們再來看一個案例，其實在數(shù)字界面中很多映射并非有直接對應關系，而是需要用戶通過交互來觸發(fā)。在下面的界面中，是一個課程的詳情頁面，用戶可以發(fā)布自己的學習筆記通過音頻的方式發(fā)布在該頁面中，而底部的工具欄在當前的設計中就會出現(xiàn)映射相關的問題。
我們即然要發(fā)布音頻那么我們有這些問題可以提前預設好
1.需要有什么控件來控制嗎？例如一個按鈕
2.那么這個按鈕是點擊后松開再開始錄音，還是需要長按開始錄音，亦或者點擊之后進入一個編輯頁面，再通過錄音或者上傳音頻的形式來編輯呢？
3.點擊麥克風錄完音頻后頁面會怎樣顯示
4.能否試聽、編輯，邊上的輸入框和麥克風有關嗎？
5.我可以直接輸入文字再點擊發(fā)布嗎或者直接點發(fā)布會出現(xiàn)什么呢？等等
不管如何我們從需要有一個入口，所以這個入口比較關鍵。通過這個入口（按鈕）來觸發(fā)上傳音頻的整個交互流程，它也是一個映射關系，只是沒有全部展開，因為這里無法展開。
有同學想問，為什么不能展開呢？其實這個很好理解，就像我們做登錄和注冊的時候不會把兩個流程做在一個界面中一樣，造成頁面的復雜、不兼容。所以如果這里不需要音頻以外形式的發(fā)布內容那么就無需把麥克風、輸入框和發(fā)布按鈕拆解開來做，造成了沒有必要的浪費。
一個按鈕可以作為一個入口來開啟一個單獨的任務流程，但是如果這樣拆解開那么任務流程就無法再高效的完成，并產生很大的歧義。數(shù)字化產品的映射往往是線性的
再說一個類似的案例，這個也是小伙伴做的一個界面。初學者的問題就比較明顯，在于他們沒有分步和階段性控制的概念。總想著一個界面能完成多個任務，當然在這里也沒有考慮好映射怎么做。
從這界面我們能很明顯的看出來這其實是一個發(fā)布的界面，從外部一個按鈕中進行跳轉而來的。
如果讓你去評價你會怎么說，是不是哪里都想說一點，好像里面的信息、按鈕、功能就不應該在這個界面？
你可能會有這些問題：怎么把視頻、音頻、圖片做成tab，選擇不同的類型去發(fā)布？點擊錄制后音頻會出現(xiàn)在哪里？錄好一條后錄制按鈕還在不在？錄好一條后我切換到圖片再傳一張圖片再點擊下一步會出現(xiàn)什么？點擊草稿箱又會進入什么界面？我什么都不操作直接點下一步會怎樣？這些問題都將困擾我們完成一個發(fā)布任務。
將一個交互流程做清晰，就需要讓用戶有一個清晰的功能映射。所以點擊發(fā)布后，按鈕應該要先控制發(fā)布類型這個對象，讓用戶選擇發(fā)布類型，然后再跳轉出對應類型的發(fā)布流程。
3.總結
映射在交互體驗的設計中也是很重要的概念之一，要結合示能和意符一起思考。同時剩余的概念我們也會在下期一起分享給大家，對于初學者來說，這些概念很重要，在我們設計案例的時候務必要時刻思考與結合。
聽到“約束”這個詞，但從字面意思大家可能會覺得它有多層含義，比如你小時候，媽媽總是約束你不能吃很多的糖，不能在地上滾來滾去，這是來自父母的約束。那么我們在生活中還有很多的約束，比如道德約束、法律約束、規(guī)則約束等等。
所以從字面意思上約束的意思就是：限制管束使不越出范圍。在體驗設計中，約束也被分為了4個大的類型，分別是：物理約束、文化約束、語義約束以及邏輯約束。接下去我們通過對這四個約束類型來聊一聊在設計中，如何利用這些約束來提升用戶體驗。
這個很好理解，一個圓形的井蓋只能用對應尺寸的圓形來覆蓋住，其他形狀或者尺寸就不能匹配。一把鎖也只能通過相應鑰匙才能打開。所以物理約束取決于物體本身外部的特性，決定了其操作方法。設計師們在設計一些產品、界面的時候，務必要考慮物體的物理特性，例如不同的設備、不同的材料等等。
諾曼老師在設計心理學中舉了一個電池正負極放置的例子，我打算換一個手機的例子。大家是否有想過為什么手機是豎著操作的，橫著操作不行嗎？當然不排除我們在玩游戲看電影時一些特殊場景需要將手機橫過來，但是日常我們通過手機來使用應用的時候為什么不是橫過來的。
大家可以嘗試著單手橫過來去發(fā)一個微信給好友信息，或者在淘寶買一件商品，首先這倆產品在移動端的手機上都沒有支持橫版適配的設計，因為橫置無法有效進行導航，而且很難瀏覽內容，更不要提用單手橫過來去做一些交互行為。
所以我們發(fā)現(xiàn)移動端手機本身的物理特性和受到的約束來自于我們人類的手，四根較長的手指在一側，一根較短的拇指在另一側，這種自然生物的進化就告訴我們，我們的祖先是習慣通過“握”這個行為來對物體進行交互的，而手機除了滿足人手的特性約束以外，也要滿足日常使用的場景：單手手持（單手握比單手托省力很多）、打電話（如果你的聽筒和麥克在屏幕的兩側，腦補一下打電話的樣子）......
所以手機的外形設計，是受到了使用者本體的物理約束，我們的手、我們的耳朵、嘴巴等等，大家也可以再試想一下，如果我們要設計一款專門為沒有手的殘障人士用的通訊工具，我們該怎么設計？例如他們習慣用鼻子操作、用腳掌操作等等。
好了，講完了人類對手機的約束后，我們再來看手機本身對我們數(shù)字界面有哪些物理約束。即然手機現(xiàn)在被設計成了豎著的樣子，于是我們的口袋也變成了豎著的，同時我們數(shù)字界面的內容也變成了自上而下的內容顯示順序。觸摸式智能手機也將原來只支持點擊操作的手勢進化出支持滑動、3d觸摸的更豐富的交互手勢。
我們在設計界面中元素、組件的時候其實也可以把他們理解為一種“物體”，既然是“物體”那么必然有其特性，例如屬性、狀態(tài)、布局規(guī)則....，具有一定特性的組件就只能使用在其固定的位置，并給予一定的尺寸范圍和交互方式。
例如現(xiàn)在我們有這樣幾個信息，人物頭像、人物昵稱、個人簡介、關注按鈕這四個元素，我們需要做一個用戶信息模塊，我們會怎樣布局。很顯然將這幾個元素通過排列組合放進一個容器里，有無數(shù)種排列方法，但如果我們提前給這個模塊加上一些物理約束，比如它的高度和寬度是30px*100px，同時滿足信息閱讀的順序和效率最優(yōu)，那就只有一種排列方式。如果這個容器的尺寸變成100px*100px，那么就會有更多的布局，例如居中對齊，個人信息與關注按鈕上下分布等等。而且不同的排列布局、呈現(xiàn)位置給受眾帶來的視覺感知、瀏覽效率也是不同的。如果這個容器是可折疊、可滑動的呢？那么布局又會發(fā)生什么變化？
所以物理約束在生活中可能是一種硬約束，但是在數(shù)字化設計中，我們用的更多的是“偏軟”的物理約束，例如一張卡片的大小、圖文的間距、控件的展開面積等等，無法用硬約束來控制，因為受到更多因素的影響，不適合用硬約束來規(guī)范這些設計元素。
設計師們在做方案的時候要學會尋找最優(yōu)解，做設計不像是用鑰匙開門或者拼圖這樣每一塊都有他固定的位置，有時候就像是你身邊有幾根不同粗細和長短的木棍，你需要插到一個洞里，不可能有非常完美契合的情況，那我們就要考慮你更在乎的是插緊？填滿？還是堵??？要靈活運用。
文化約束在書中的原話是：每種文化都有一套社交行為準則，如果置身于不熟悉的文化環(huán)境，原有的準則和行為就會不適用。
例如大陸的駕駛室在左側，但是香港地區(qū)就是在右側。再例如日本東京和大阪搭乘電扶梯的站位也有左右的區(qū)別。所以文化的約束就更像是不同的社會認知、習慣、歷史造就人群的行為差異。
例如在不同文化中，信息閱讀的順序并不一樣，就像阿拉伯地區(qū)在閱讀時順序是從右往左。再例如國際版本的amazon在新增收貨地址的時候，無論哪個國家，只提供輸入框讓用戶自己填寫，但是在本地化產品中，就會針對中國用戶的特殊地址進行設計。
文化差異還有很多，例如不同國家有不同國家的禁忌和喜好，例如顏色，俄羅斯比較極忌諱黑色、黃色，巴西比較禁忌紫色、黃色，而英國則不喜歡墨綠色。同樣還有手勢、動植物、數(shù)字、肢體語言、信仰等等。
文化約束不僅僅存在于國家、宗教之前，人與人之間都會有不同的文化差異。所以文化說白了就是不同群體的認知與共識。說起文化約束讓我又想起了設計師與業(yè)務方之間的交流，為什么總是會存在障礙?；蛟S一部分原因就是因為我們各自有著文化差異和立場。業(yè)務方在自己的文化認知中會提出同時放大并縮小、五彩斑斕的黑這樣的需求，而設計師聽到這樣的需求就會覺得有點無理取鬧，其實這很正常，這就和我們在裝修時給設計師提出的要求一樣，想要在10平方米的空間打造出多個大面積的空間一樣。其實這些都是我們對另一方的一種期望，只是在表達的過程中不那么專業(yè)，作為專業(yè)的設計師，我們要學會理解客戶/業(yè)務的真實需求，并幫助他們去拆分目標，一步一步接受最后的結果。
語義約束在書中提到的不多，但是我想展開聊一聊。諾曼老師在解釋語義的時候是這么說的：語義約束是指利用某種境況的特殊含義來限定可能的操作方法。舉了一個例子就是摩托車的擋風玻璃之所以這么設計是因為人駕駛摩托車的方向位置從而使得擋風玻璃必須這么設計。所以一個事物被設計后的結果取決于它是為誰而設計的，同時語義約束依據(jù)的是我們對現(xiàn)實情況和外部世界的理解。
現(xiàn)在我們可以通過門把手的轉動來開啟門，那么如果我通過人臉識別認證后，是否可以自動開門而不需要再設計一個門把手呢？這種案例其實很多了，例如醫(yī)院的手術室等場所。隨著科學技術發(fā)展，人與物的交互方式在不斷的改變，從小屏幕到大屏幕的發(fā)展，我們觀察到移動端設計中的返回上一頁、滾動至頂部、鍵盤的拆分等等設計應運而生。
我再拿數(shù)字產品中的一些組件給大家舉個例子，在以前的文章中，我找到了一個產品的交互有些問題，就是在某個界面的頂部導航中嵌入一個下拉的控件。
在這里，無論該控件本身示能表達還是用戶的預期理解，都表示這當我們點擊下拉按鈕后，會展開更多同類型的選項，并且導航欄是保持固定位置的，而不會將導航欄給頂下去，出現(xiàn)原本不存在的新模塊。那么為什么就不可以像后者一樣，點擊下拉控件后將導航給頂下去呢？
這就要歸結于頂部導航和下拉控件本身的用法與規(guī)則。
導航欄嵌入下拉實際上就是導航+下拉控件，那么該控件就具備了兩個屬性，那就是原本導航欄的屬性和下拉控件的屬性，導航欄需要固定在頂部。
在移動端本身的組件定義中，它是一種固定在頂部不可動搖的一個bar，所以很早以前的移動端、web端設計的時候，頂部導航欄在視覺上也是優(yōu)先級很高的，例如微信、淘寶等頂部導航欄在舊版本都是帶有顏色的，就像是一個盒子必須有一個蓋子，沒有蓋子的容器不嚴謹，不安全。
同時這個“蓋子”有幾個作用：
1.當前定位/說明 ，可以放單個頁面的標題也可以放幾個tab來切換頁面
2.當前界面輔助操作 ，例如分享
3.可以嵌入入口，例如搜索框、設置等等。
即然是一個下拉控件，那么你要下拉的是你本身，而不是整個導航。所以導航本身就有它自己語義，導航+下拉控件，也必須滿足這些約束條件。
語義約束需要設計師們時刻觀察當下用戶的認知水平以及設計的發(fā)展階段，去做更合理的運用，我們之前說創(chuàng)新，其實也只是在不斷的跟著科技、文化、用戶習性在進行同步更新，保守未必是錯的，但是想要有所突破不能一味墨守陳規(guī)。
這個概念諾曼老師在書中舉的是一個修水龍頭的例子，說的是當你把水龍頭修好，最后發(fā)現(xiàn)有一個零件沒有安裝上去，那么顯然是裝錯了。這個和我們之前講的映射是一個道理，自然映射為我們提供邏輯的約束，元素的組成可能存在空間或功能上的邏輯關系，例如不同的開關控制不同的燈。
那么我們還是簡單的來看一下“邏輯”這個概念，我們是不是經常會遇到這樣的場景，當我們把方案或者一個事情講述給別人，會聽到別人說：你這個邏輯不對，那到底什么是邏輯呢？這里不進行長篇大論的解釋，邏輯的概念很大，但是我們可以來比較形象的了解一下。
首先我們要知道在邏輯推理的過程中需要先對概念進行客觀描述，例如男人喜歡女人，這是一種自然的客觀規(guī)律。其次我們要對事物中的對象進行判斷是否為真，例如，老王是男人。當我們已知這兩個條件后，可以推導出一個結論，那就是老王喜歡女人。但是這樣的推理并不嚴謹，因為老王可能喜歡女人或者都喜歡。如果有其他的條件，結論才會更準確，例如老王交往過5個女朋友。
設計中，也會存在很多的邏輯，例如業(yè)務邏輯、交互邏輯、視覺邏輯等等。業(yè)務邏輯指的是商品的展示排列規(guī)則、每簽約一個供應商就會展示該供應商的詳情、權限角色的類型不同導致判斷順序不同等。交互邏輯指的交互過程中出現(xiàn)的狀態(tài)變化和規(guī)則，例如點擊卡片跳轉至xxx界面，點擊后若用戶未登錄則跳轉至登錄頁。而視覺邏輯則是指根據(jù)用戶的瀏覽順序和信息的優(yōu)先級進行視覺布局的設計。
這里我們來舉一個美食產品的智能組菜的功能設計，來看看在這個方案中，邏輯約束是如何影響到我們整個設計過程的。智能組菜這個功能是這樣的，用戶可以將想要烹飪的食材進行自由組合成為一道美食，進而衍生出了該功能。在做這個方案之前，我們要對這些概念進行描述和解析
1.解析概念
智能組菜：
1.智能：通過什么算法，如何通過算法呈現(xiàn)給用戶？如何讓用戶感知到智能？（業(yè)務邏輯）
2.組菜：組是什么意思？（把食材搭配到一起）怎么組？（用戶選擇食材后生成）組什么（各種食材）？（交互邏輯）
2.設計策略與交互邏輯的思考
1.怎么把食材搭配到一起：讓用戶自由選擇食材
2.怎么才能讓用戶自由選擇食材：提供食材的搜索、分類
3.怎么提供食材的分類和搜索：設計搜索功能流程、食材分類功能流程
特殊場景思考：對于食材的名稱用戶是否知道，如果不知道該如何搜索？可以提供食材分類和拍照識別這樣的功能。
我們先做的簡單一點，只做食材的搜索。然后接下去思考他的交互邏輯
當用戶進入搜索流程后狀態(tài)會發(fā)生什么變化？選擇的食材會出現(xiàn)在哪里？如何新增繼續(xù)新增、刪除食材？這里有兩種做法：
1.用戶選擇完食材后就進入一個新界面，界面中可以繼續(xù)添加食材。
2.用戶選擇完食材后在當前界面出現(xiàn)“菜籃”模塊用來承載已經選擇的食材
如果是你會選擇哪種方式？這兩種交互方式在邏輯上都是正確的，但是邏輯正確并不意味著交互體驗和效率是最優(yōu)的。
例如搜索場景中需要考慮鍵盤遮擋的問題，如果是第一種，那么沒有鍵盤遮擋的困擾，但是每次選完都要重新點擊新增按鈕，并且新頁面的版面利用率很低。而第二種在當前界面出現(xiàn)菜籃則會被鍵盤遮擋，只能在頁面上方出現(xiàn)，但上方的內容比較飽和，需要再進一步思考。那么當前遇到了兩個問題比較難以權衡，于是我們需要根據(jù)更多的條件來約束最后的結果：
1.用戶在選擇食材的時候大概率是目標明確的，搜索類目不會很寬泛，例如青菜、排骨，所以搜索結果不會很多。
2.大部分用戶的手機為某為p40、某果12，頁面較長，空白區(qū)域比較充裕。
3.大部分情況一道菜的主要食材在3種左右。
也有小伙伴會問，會不會出現(xiàn)批量選擇的情況?；静粫驗榫拖裎覀儎偛耪f的，組菜是基于用戶對當前已有的食材進行組合的行為，所以用戶的目標是單一、明確的，我有什么菜，我看看能組合出什么。而不是直接搜一個蔬菜，然后批量選擇蔬菜類目下的其他食材，這不符合用戶場景。所以不需要提供批量選擇。
最后結論是第二種方式有足夠的區(qū)域來放置需要選擇的食材。
3.最后的方案
當我們確定好了策略后，我們可以大致繪制一下原型方案。用戶通過在當前頁面搜索后選擇搜索結果的食材，顯示在鍵盤上方。鍵盤收起后會置于底部。食材搜索的結果不需要分類，用宮格形式鋪開，盡可能的利用頂部的面積去展示，不要用列表。然后不需要做搜索按鈕，因為這里的數(shù)據(jù)量很小，直接輸入完文字后就可以自動聯(lián)想匹配。同時我們再把組菜記錄和拍照識別的功能放進去。
做完這些基本的交互后我們不要忘了思考一些異常流程和場景，例如搜不到內容怎么辦？用戶同時搜索了兩種不同的食材怎么辦？用戶第二次選擇了同樣的食材怎么辦？選擇超過5個怎么提示？等等。
好了，這個案例講完后，大家有沒有發(fā)現(xiàn)，其實一個方案的產生，其中要思考很多的條件、邏輯來約束不同的設計結果。
假如我們需要加入食材的分類模塊，那么現(xiàn)在的方案和流程還合適嗎？如果業(yè)務覺得用戶使用智能組菜是不知道吃什么，一種“窮途末路”的場景，那么我們是不是可以提供一種送即食菜肴的服務，例如最近在電梯廣告里看到了一個“舌尖英雄”的app，他就是將一道菜的食材進行單獨包裝，然后賣給用戶，把烹飪的步驟也用線上視頻的方式教給用戶，用戶一學就會。這也是一種業(yè)務創(chuàng)新，同時在智能組菜的場景種插入也不失為一種辦法。
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你們會發(fā)現(xiàn)其實想做交互設計比UI設計難很多，那為什么交互設計比較難呢？因為UI設計相當于從0.5到1，而交互則是從0到1。但并不意味著UI就比交互來的層次低，交互注重邏輯，UI注重對品牌和質感的表現(xiàn)，沒有孰優(yōu)孰劣，但是在入手和執(zhí)行層面，UI相對簡單一些。
交互設計也可以說是體驗設計的核心。我們需要根據(jù)已有的“材料”來進行任務流程、用戶行為的設計，以確保用戶能高效、滿意的完成任務達成目標和解決問題。所以在這整個環(huán)節(jié)中，要思考的信息和判斷的邏輯會更復雜。交互設計往往覺得很有成就感的地方在于自己設計的流程或者一些創(chuàng)新的交互能夠獲得用戶的好評以及業(yè)務數(shù)據(jù)的提升，在這個方面UI設計的成就感知會來的不夠明顯，因為視覺表現(xiàn)很難量化，用戶也只能通過好不好看來表達，所以UI設計師們也希望通過一些方法來找到屬于自己的成就感，例如我們也會選擇一些平臺發(fā)表自己的視覺創(chuàng)意來獲得同行們的認可等等。
那么今天我們一起來聊一個交互案例，來看看需求從“材料”到具象化表現(xiàn)都需要思考什么。當然，學案例是為了擴充自己的知識面，但是想要真正學會，我們要從底層開始學。
首先來講一個發(fā)布菜譜的功能：一個美食類產品中需要設計一個用戶自己創(chuàng)建菜譜的流程，基于這個概念我們可以如何設計流程。我們都知道商業(yè)設計離不開業(yè)務，那么這里我們先不考慮這么多，只考慮如何將流程設計做到最高效，有需要的時候再將業(yè)務加入進來。
這里和工作中常規(guī)的步驟不一樣，在工作中我們往往第一步都是去分析這個需求的背景、用戶的定位、業(yè)務目標什么的，但是這里不用，我們只單純的做交互方案，所以就不去啰嗦那些了。
在腦爆前，準備好3個問題：
1.什么是菜譜
2.為什么要發(fā)布菜譜
3.怎么發(fā)布菜譜。
通過這3個問題我們就可以大致知道這個任務所包含的信息、形式、流程。
1.什么是菜譜：菜譜是通過圖文、視頻等方式給用戶提供做菜步驟的教學內容
2.為什么要發(fā)布菜譜：希望通過用戶自主發(fā)布內容的形式來提高整體用戶的活躍度以及平臺對用戶個人品牌的塑造。讓用戶之間產生更多的互動。
3.怎么發(fā)布菜譜：這里要根據(jù)第一個問題腦爆之后再進行流程的設計。
接下來我們根據(jù)菜譜這個概念進行拓展：1.菜譜的基本介紹 2.菜譜的制作流程 3.其他支線選項。
在真實工作中其實產品經理會把這個流程要包含的功能和信息點都列舉清楚，只是我們現(xiàn)在自己來從0到1設計一次。
菜譜的基本介紹可以包含菜譜的封面、菜譜的名稱、菜譜的簡介、難度、時間、食材，菜譜的制作流程可以包含需要的圖片、文字描述。但是這里的顆粒度大小不一，例如難度、時間顆粒度小，但是食材我們可以再繼續(xù)細化拓展：食材的名稱、用量。菜譜的其他編輯選項，例如菜肴的口味、菜系的分類，編輯這個選項是有助于其他用戶在篩選菜系和分類的時候更快的找到這個菜譜。
例如菜譜的封面，那么我們就需要一個容器來上傳圖片或視頻，可以用一個占位圖image來代替，先不用考慮放什么位置以及在哪個節(jié)點，先將每一個信息點都進行控件化。接下來菜譜的名稱和簡介都是輸入模塊text。難度和時間有兩種形式：輸入和選擇，那我們當然用選擇，因為操作和理解成本更低，能用選擇就不要用輸入。選擇用什么形式呢？可以用picker、actionsheet動作面板、展開單選，那哪個更方便高效呢？這里如果需要選擇的選項不多，也不需要滾動、聯(lián)動，那么用actionsheet就可以了。如果你想讓選項更直觀更方便操作那么你可以把選項直接放出來。
接下來是食材，食材又分為食材的名稱和用量，那么也是一個輸入的行為，需要兩個輸入框，這里就不能用選擇的交互了，因為在這個場景中選項是根據(jù)用戶需求隨機、特定的，需要用戶自己輸入。
最后是菜譜制作流程中的圖片和文字描述，也是圖片和視頻的上傳和文字輸入模塊。這樣我們就把這些控件具像化了，就更直觀的幫助我們進行接下來的操作。
根據(jù)用戶的操作習慣和場景，我們將操作順序捋一遍。什么樣的操作順序更符合我們上傳的習慣呢？先填寫制作順序嗎？不對，應該先編輯基本信息，也就是我們通過烹飪的流程，先想好要做什么菜，再去準備食材，再開始一系列烹飪的步驟。
所以我們要先讓用戶去添加封面編輯標題和介紹，烹飪難度和時間其實放在開頭和末尾都可以，但是考慮到這些信息在列表中會一起展示，那么我們索性就在開頭就直接一起編輯。
接下來是添加食材，添加食材的場景中會涉及到對食材的添加、刪除、清空以及智能編輯（類似添加收貨地址），所以這里的場景不要漏掉。那有的小伙伴要問是不是可以再加一個拍照識別食材的功能？其實不需要，因為我們在準備做菜譜之前肯定對這道菜有了解，知道每一個食材的名稱我們才會去做菜，否則連什么食材都不知道就去做，那萬一有毒呢？所以這個場景是不存在的。
再接著是編輯制作步驟，依然是思考用戶場景，除了上傳圖片和文字以外，還需要提供步驟添加、刪除、調整位置、批量傳圖等功能。這些場景我們在腦爆的時候或多或少會遺漏掉。
移動端產品的層級和路徑主要是根據(jù)頁面來劃定的，所以頁面越多路徑就越深，但是路徑深并不意味著一定就多余，路徑少也并不意味著操作就簡單。路徑階段的劃分主要是根據(jù)這幾點來考慮的：
1.當前頁面內容是否溢出、符合場景、滿足預期也就是說當前頁面中的內容是否符合當前場景的用戶，以及是不是過載了。例如我們去購買電影票的流程，當我們在查看電影詳情的時候，不會出現(xiàn)電影院和電影場次的選擇，因為不符合當前場景的用戶需求。
2.場景是否獨立我們在選擇回收自己的手機時，在選擇型號頁面不會再讓用戶編輯估價信息。這個場景是獨立的，并且只有完成了前置操作步驟后才能進行下一步。
3.任務是否需要階段性結束 為什么需要進行新建界面，是因為當前界面在滿足1和2兩個約束后，要考慮第一個步驟是否階段性完結了，例如我如果把菜譜編輯基礎信息界面單獨做一個界面，而編輯步驟再單獨做一個界面，這里第一界面是否階段性完結呢？還沒有，因為你可以隨時要去修改標題、封面、食材等等，而經常返回上一頁并不是一件很簡單的事，用戶也會擔心我編輯好的步驟會不會保存等一系列問題。
這里再用一個蔚來app中選購車輛配置的流程舉個例子。他這里也將選擇配置流程劃分成了幾個界面，但這個流程結構就不是單純的線性結構了，雖然他每個不同的配置單獨做成一個界面但是頂部利用tab來切換不同配置選項的界面。
所以當任務需要階段性完成時候，例如只有先輸入手機號點擊發(fā)送驗證碼之后才能收到驗證碼，在這樣的流程中我們可以使用下一步來進入下一個環(huán)節(jié)。如果要分不同的界面，而又沒有出現(xiàn)階段性完結的情況，那么前一頁的內容編輯再下一頁也需要有，例如我們把標題編輯單獨做一個界面，但是下一個編輯基本信息界面也依然要能夠編輯標題。
通過對用戶場景和觸點的分類，以及對第四步的思考，我們可以發(fā)現(xiàn)其實編輯基本信息和編輯步驟是需要放在同一個頁面中去完成的，因為沒有階段性結束。但是放在同一個界面也有一些問題比如單個界面需要編輯的信息太多，比較繁瑣，再次編輯需要上下滑動瀏覽不方便等問題。所以我們也可以看一下市面上的競品都是怎么做的，有一些產品會將編輯標題單獨劃分出一個界面，這其實沒改變前者的問題，單獨作為一個頁面或許是基于這兩點考慮：
1.希望用戶通過認真對待標題來提高菜譜的點擊率和引起別人的興趣
2.業(yè)務需求，通過讓用戶了解優(yōu)質內容的協(xié)議來謹慎對待上傳菜譜的質量
3.對于一個復雜操作前的一個準備和引導，讓用戶更容易接受接下來的大量表單的填寫。
接下來是填寫的界面，那么我們就可以根據(jù)信息展示的優(yōu)先級和第三步設定好的控件進行布局，這里涉及到的原理就不講了。我們主要來分析一下某些功能在布局的時候為什么這么放。
首先封面和標題還有簡介從上至下應該沒有什么問題，因為有兩個輸入模塊咱就無法左右放，因為這3者是強關聯(lián)信息所以是一個整體。其次是難度和時間，這兩個字段包含的內容和形式我們在之前的步驟中提到有兩種形式，一種是actionsheet還有一種是選項標簽化平鋪，前者的好處是節(jié)省空間，易擴展，后者則更加直觀和方便選擇，另外也要考慮類似控件在整個產品中的統(tǒng)一性。
接下來是食材添加和編輯，這里涉及到食材名稱和用量的文本輸入，這里可以直接用一行輸入模塊來放單個食材的編輯，因為整個頁面表單很長所以盡量簡化上下空間。同時還有對食材的刪除、清空、調序和新增。那這三個按鈕怎么放比較合理呢？我們要看用戶使用的場景，可以考慮的維度有：操作頻率、操作優(yōu)先級以及任務的主方向。
所以在食材編輯這個模塊中，最高頻的是新增其次是刪除再次是調序最后是清空。而當食材新增后內容會向下延伸，所以新增的按鈕不適合放在上方，也不適合放在每個輸入模塊的右側。刪除和調序則是最某個食材信息的編輯所以是針對單個輸入模塊的，那必須跟在后面。最后的清空可以放在新增按鈕的左側。這樣就完成了添加食材的模塊。
再接下來是烹飪步驟。上傳圖片和編輯文本沒什么問題，上下布局是因為在正式瀏覽的時候需要大圖和文字搭配的形式，所以為了形式統(tǒng)一就只能這樣布局。
目前調整步驟在最底部，同時刪除操作也需要點擊調整步驟后才能出現(xiàn)，這里因為調整步驟和刪除不是高頻操作，弱化層級可以理解，但是如果放在底部那么如果我想要刪除第一步和調整前2步順序的時候，就要上下來回滑動，不是很方便。
那其實我們可以這么做，把烹飪步驟作為一個bar，在頁面向上滑動的時候置頂，添加食材也可以這樣操作。就是為了讓用戶在上下滑動的時候可以隨時進行一個編輯，步驟在任何位置都可以直接進行換位和刪除。另外由于是大圖模式，在換位的時候進行長按拖動其實對拇指的操作有一定的要求。既然這樣為什么不用上下切換的按鈕進行調序。
我們來看一下拇指拖動要激活兩個階段，首先要長按激活拖動，然后需要按住不放進行拖拽，由于卡片面積較大拇指滑動的距離就要長，對于手小的用戶就不太方便了。那我們是否可以做成一個上下切換的按鈕，這樣只要通過單擊就可以完成順序的調換，并且通常調換順序并不需要跨越多個步驟進行，一般也只是相鄰兩個步驟的順序換一下即可。所以這里首先我會把編輯按鈕和批量傳圖都放在烹飪步驟bar右側并置頂。
最后再補上剩余的選項模塊和發(fā)布、預覽、草稿的按鈕即可。預覽和草稿必須放在導航欄，因為這倆功能是隨時需要進行操作的所以不能在頁面底部，而發(fā)布按鈕可以放在最底下。也有小伙伴想問，為什么不在底部做一個固定的bar來放這些按鈕呢。因為頁面縱向信息很復雜，不僅底部占用了高度也容易誤操作，在沒有編輯完時，發(fā)布按鈕還是比較雞肋的，所以是不會出現(xiàn)一個底部固定的bar。
好啦，今天分享的交互流程案例大家學廢了嗎？我們下期再見，有更多想法和交流歡迎在留言區(qū)留言！
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
之前為大家分享過很多工作的案例，很多伙伴表示收獲頗多，之所以分享工作案例是為了，給大家講解設計思路，讓大家明白，為什么這樣設計，出于什么目的，要解決什么問題，這些正是UI設計的根本所在，掌握了設計思路就能應對各種問題。
接下來本期的分享，依舊會用真實案例解析從需求到設計的完整過程。
接需求與案例解析
我司的運營小姐姐@我要改個產品的UI，下午找我聊需求。
一、準備工作
提前了解產品，從視覺、交互上感受一遍，標記產品中有疑問的地方，這樣大概對產品有個概念，為接下來的溝通做好鋪墊。
二、了解業(yè)務
首先需要運營小姐姐講解一下業(yè)務邏輯，了解產品涉及到的各種角色，產品使用場景等等，期間把疑問一一了解清楚，盡可能對業(yè)務、角色、使用場景有充分的了解。
通過溝通，了解到這個產品是一個H5問卷后臺，業(yè)務上用來查看問卷統(tǒng)計的結果，使用的人群是公司的運營人員，產品時常會打包賣給客戶，客戶的使用場景不定，多數(shù)用戶會用手機端查看統(tǒng)計結果。
三、溝通需求
接下來，溝通中我會先聽她講解需求，講完后我會問她一些問題，確保我理解的正確。
需求溝通后，此產品問題為：界面太亂，很難用，需要改的好看舒服好用。
這時候就要想到她是不是用了其他體驗好的產品，如果是的話，這個產品可能是重要的設計參考，然而了解后并不是因為用了其他產品，是一直以來就不好用，沒時間改而已。
接下來的需求溝通就要落實到頁面中，需要一起探討產品，不明白的地方要了解清楚，從中總結優(yōu)化的地方。
下面開始案例分享：
第一個頁面改版
上圖為“統(tǒng)計問卷”首頁，A、B、C處為頁面中較為突出的點，其中C處最為明顯，溝通后得知C處圖表的切換是為了截取圖表做ppt，僅此而已，所以此處UI設計上需要弱化。
其實用戶之所以覺得頁面看起來不舒服，是因為想看的元素被弱化，而不該看的卻過度設計，這樣用戶在看頁面過程就會很費神，因為獲取信息要躲開視覺上被過度設計的地方。
例如A處，用了頁面中唯一的橘黃色，當初設計者應該是為了能強化區(qū)別上下題目的分界，但也成了突出的視覺干擾項。
其實分析后，頁面中用戶要看的是兩個地方，一個是B處答題的比例數(shù)據(jù)，另一個是旁邊的“小記”數(shù)據(jù)量，而B處進度條的設計過于突出，與文字沒有良好的視覺比重。
結合以上問題進行改版：
解決A處問題
把每道題設計為卡片式，這樣能很好的區(qū)別上下題的界線，題號從突出的橘黃色改為黑色，使得頁面視覺上不那么跳躍。
解決B處問題
弱化變細進度條，與文字視覺比重相當，不會顯得突兀，排版上下排列改為左右排列，這樣能夠縮減表格的高度，頁面可以顯示更多的內容。
解決C處問題
圖表切換是個弱功能，使用頻率較低，所以放到卡片的右上角弱化設計，用切換的方式展示。
不僅僅是以上的問題，排版的細節(jié)也會大大提升產品的質感。
舊版所有元素的排版間距幾乎沒有什么規(guī)律，這也是導致用戶對產品有亂糟糟印象的原因。
改進后，用間距去表達元素之間的關系，間距設計常常會用到“黃金比例”或“五分原則”，黃金比例不必多說，五分原則就是相關的元素用周邊0.5倍的距離表達親密關系。
當設計好第一個頁面后，需要先給到需求方評審，確認沒問題后再繼續(xù)，這樣就盡可能保證了后面的設計是符合他們需要的。
上圖只是個最終的結果，過程中做過一些小改動，最初發(fā)給需求方設計的頁面，需要做簡單的設計注解，這樣才會更容易被理解，且具有說服力，最終確認沒問題再繼續(xù)其他頁面的設計。
第二個頁面改版
上圖是給做問卷的人配置紅包獎品的頁面，看完后我表示心疼我們的運營人員。
A處本可以切換項目，但現(xiàn)在的設計顯然是不可點擊切換的狀態(tài)。
B處是這個項目總金額統(tǒng)計，目前排版色彩雜亂且擁擠。
C處是給問卷配置紅包獎品的各個屬性信息，然而元素間沒有層次，依舊雜亂擁擠。
D處按鈕沒有主次關系，排版擁擠。
E處是個“增加獎品”按鈕，現(xiàn)在看起來沒太大問題。
改版后頁面延續(xù)了首頁的卡片風格，保持一致性。
解決A處問題
“子入口切換”用戶很難理解，因為不是確切詞，例如換成“項目切換”“問卷切換”就很容易理解，當然也是可以去掉的，因為運營人員對每個項目都很熟悉，沒必要注解。
解決B處問題
重新定義排版后，顯而易見會比之前要清晰透氣很多，動態(tài)變化的金額用顏色突出強調，未配置金額為次要信息，用灰色表示。
解決C處問題
改變排版樣式，視覺上有主有次，“配置數(shù)量”跟“個數(shù)”為重復信息，只留一個即可。
解決D處問題
按鈕“已啟動點擊禁用”拆分為“點擊下線”按鈕，和問卷狀態(tài)（進行中），“展開”按鈕放到最左邊，和“編輯”并列。
解決E處問題
“新增獎品”按鈕，如果增加配置獎品列表，就會把按鈕擠到不可視區(qū)域，這樣的設計不是特別推薦，所以設計成懸浮按鈕，舊版本已經建立用戶的按鈕功能認知，懸浮按鈕上面配加號圖標，用戶就會很容易理解。
第三個頁面改版
上圖還是第二個改版頁面，此次要改版的是，點開“展開”按鈕顯示的屬性，目前的問題是有很多重復的信息，例如時間，上面已經顯示時間，最下面又出現(xiàn)同樣的時間。
最嚴重的問題是，所有灰色字的注釋，不符合邏輯，不應該在展開的屬性下面提示，因為這已經是編輯好的內容，再去提示就意義不大了。
模擬一個場景，比如上圖紅圈的地方，已經設置好了獎品名稱為“幸運紅包”，展開后有個灰色字提示“用戶中獎后，用于顯示給用戶看”，如果發(fā)現(xiàn)理解錯了，然而在此頁面是不可以改正的，所以灰色字應該在“新增獎品”的編輯中提示，用戶在輸入信息的場景下，提示才是最合理的。
頁面改進后，去掉重復的屬性信息，去掉灰色字的提示，（去掉這些內容是提前跟需求方探討過的）最后用最少的空間展示了所有的信息，更清晰明了，其實展開后的卡片高度，完全也是可以考慮去掉“展開”“收起”的功能。
然后
第四個頁面改版
當我看到這個頁面時，不知道為什么要有A處的信息，所以再次請教需求方尋求答案，給我的答案是“子入口”“IP”是為了給開發(fā)人員提供便捷查詢，例如這個中獎者存在刷紅包行為，可以通過A處的信息進行查詢。
很顯然這并不合理，因為對用戶來說沒有用，還造成了認知負擔，如果存在不良行為，提供編號信息就可以搞定了。
B處的設計，讓頁面沒有條理，更是一個信息干擾項。
頁面改進后，依然沿用首頁卡片式的設計，去掉“子入口”“IP”“昵稱”多余屬性，去掉昵稱是因為答問卷一般不會獲取到用戶昵稱。
“中獎”和“未中獎”卡片，設計上有明顯的視覺比重差異，去掉未中獎的綠色標示，只突出中獎者。
最后一個頁面改版
上圖是做問卷用戶答案頁，頁面的彈窗偏小，使用起來很憋氣，A處不知道什么意思，詢問后可以直接去掉，B處是一個不合理的“確定”按鈕，原因是用詞錯誤，應該叫“關閉”更合適，因為這個頁面是查看信息，并沒有執(zhí)行某些任務操作。
改進后加大彈窗，去掉頁面中的多余元素顏色，上下題目用留白間距隔開，去掉“確定”大按鈕，因為太占面積，改為右上角“關閉”按鈕。
最后
當我們看到一個頁面時，如果只看到美與丑，那是不客觀的，這可能是對UI設計最大的誤解，UI的美不只體現(xiàn)在表面上，還有內在的體驗中。
UI設計一般都會帶著一種目的進行設計，目的絕不只是設計的好看，更多的是創(chuàng)造一個良好的產品體驗，同時能夠助力業(yè)務，實現(xiàn)產品價值。
UI設計師對于業(yè)務要積極的去了解，對需求不要總被動接收，要有意識的去探討挖掘，對業(yè)務的熟知，需求的準確拿捏，是你開始設計前最好的基石。
看了一位著名設計大師Aaron Gustafson關于UI設計的演講報告，討論和剖析了幾個自適應界面，并演示了他們如何智能地變形以滿足用戶的需求。這里我有一些心得體會分享給大家。
當我開始我的職業(yè)生涯，我還是一個簡單的網頁設計師。我在網頁設計工作了一年，從小型商業(yè)網站開始，最終轉移到更大的客戶。我發(fā)現(xiàn)對它并不感興趣。我對分頁模式，用戶與表單交互的方式，以及感覺到的性能，比網頁的視覺設計更感興趣。我發(fā)現(xiàn)我愛上了交互，體驗各種的性能。
當我看科幻電影時，我會看看界面。當我玩視頻游戲時，我會觀察菜單的布局方式。如果任何這些特質聽起來很熟悉，你也可能有一顆UI設計師的心臟。
于是我退出我的之前的設計公司，開始了我自己感興趣的項目與目標。在我的LinkedIn頁面上，我試圖總結我的新職業(yè)目標：創(chuàng)作出不僅具有視覺，交互，體驗，還應更加智能，更加方便的大膽構想。自從我愛上了我現(xiàn)在這份工作以來已經有三年了，我并不是把它當作工作，而是把它當作我興趣慢慢去培養(yǎng)，所以我的旅程并沒有停止。我目前在一家創(chuàng)業(yè)公司，這里有我們共同的夢想與信念，我們想把東西做好，做全面，希望廣大用戶會喜歡，我每天逼著自己去思考，去學習，去看一些書籍資料，但是很多時候事與愿違！
在這篇文章中，我主要想描述一個UI設計師是什么樣子：
這些工作是什么構成的？
哪里是最好的學習資源？
你如何在你的技藝得上展現(xiàn)更好？
UI設計的工作
我會將用戶界面設計的工作分為四類。與客戶溝通，研究，設計和原型，并與開發(fā)人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。
溝通
客戶溝通是關于理解客戶的問題。目標是掌握客戶的業(yè)務。項目的開始通常包括很多的談話。在工作開始時，不要太多地去了解客戶的想法- 你可以設想可能的設計解決方案時，以全新的方式展現(xiàn)給她們看，然后接受需求，進行分析。
要成為一個好的UI設計師，你需要能夠最終考慮你的客戶的意愿。例如，您的客戶可能在航空，為他們工作最終將使你對這個行業(yè)有很多認知。所以，你會感受到：不能明智的去選擇你的工作行業(yè)，也就不會成為這行業(yè)的專家。我們需要對自己有足夠的認知。
在項目期間，溝通不會停止。作為設計師，你將不斷地展示你的工作。產品的誕生需要有火花的碰撞，所以我們迭代好，不斷的進行溝通與討論。
研究
與客戶溝通，你會做很多研究。這可能包括實地研究，與客戶的研討會，分析競爭或定義一個策略 - 基本上，只是幫助你理解手頭的問題。
研究是什么？研究可以告訴你的設計選擇。這是你讀過的文章，或者蘋果剛剛發(fā)布的新東西。當你解釋為什么做出一個特定的設計選擇時，你的研究會幫助你。
研究可以非常廣泛。我經常測試新的設備用于研究目的; 或注冊新的網絡應用程序以研究其用戶界面。
設計和原型
作為設計師，你可能會花大部分時間做設計調整工作。UI設計項目可以以多種方式前進，從素描，詳細設計到編碼。
您使用的方法在很大程度上取決于項目的類型。你在設計什么？這是一個網站，還是應用程序，或者你寧愿稱它為一個應用程序嗎？它使用本地技術嗎？是重新設計還是從頭開始？
在我們公司沒有固定的過程，但大多數(shù)項目遵循相同的粗略順序：他們從草圖和線框開始，繼續(xù)詳細的視覺和交互設計，并以一個原型結束。
作為設計師，我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要，但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應用程序是相當于能夠使用鉛筆繪畫或刷子來繪畫。
話雖如此，對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設計工具，可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator，但我的大部分視覺設計工作是在這些天在PS上完成的。其他團隊成員已經切換到較新的工具，如Sketch,Affinity Designer,這些工具我們都需要了解，找到適合自己的就行。
工具是一個非常個人的選擇。只要我們能輕松地一起工作，每個人都可以自由選擇自己。為了使與客戶的討論，我們的設計更簡單，我們使用Axure制作原型。對于更高級的原型，我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。
開發(fā)者溝通
溝通設計有多種形式：詳細規(guī)格，提供資產，一起審查設計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應用程序。
傳統(tǒng)的方法是在屏幕設計旁邊交付資源。屏幕設計可用于查看設計整體看起來是什么樣子，而資產是即用型PNG和圖標的SVG，因此開發(fā)人員不必處理圖形編輯器。
在我們公司，我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設計的一致性。當我們處理一個web項目時，我們提供了詳細的HTML和CSS集合，逐條記錄，準備實施。我相信在軟件開發(fā)的每個階段都有設計眼光是實現(xiàn)我創(chuàng)建一流級軟件目標的唯一途徑。
Web與本機應用程序
然而，這些指南傾向于針對營銷網站進行調整，并且其中的內容并不總是導致良好的用戶界面決策。字體傾向于出于營銷原因而選擇，而不是為了易于理解。顏色可以是粗體和醒目的，它可以在廣告活動中使用，但不會在您日常使用的應用中使用。這些指南必須解釋。
有幾個UI設計的網絡指南。你可以認為網絡是不同風格的熔爐。如果你做任何感覺更像一個應用程序而不是一個網站，你需要知道廣泛使用的框架如Bootstrap和ZURB基金會?？蚣芟却蚝?，再開始確定事情應該如何去做，因為你不想重復做某一件事。
我比較喜歡使用Bootstrap。它為常見的UI元素（如按鈕，數(shù)據(jù)表和模態(tài)）提供了合理的默認大小。
在網頁設計中，您受網絡技術能力的限制。它曾經是很難實現(xiàn)簡單的視覺華麗像網站上的圓角?，F(xiàn)在很多構想都可以做了 - 你現(xiàn)在可以自由繪制大量的陰影，過渡，動畫甚至3D的用戶界面。
作為設計師，在瀏覽器中控制流程和設計是更加現(xiàn)實的。我還沒有看到許多UI設計師接管本地應用程序的UI編程，但是設計師做一個網絡應用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設計，你將有一項專業(yè)獨特的技能在你的同行，也會增加你許多優(yōu)勢。但是對我來說，這也是唯一的方式，真正了解網絡的工作原理。所以作為一名設計師，還是需要懂代碼的。
Web約束
您很快就會發(fā)現(xiàn)，并非所有的瀏覽器都支持您學習的所有酷技巧，這是網頁設計的現(xiàn)實。這是很好的遵循著名的原則，如漸進增強，你盡可能加載增強內容，但也想想如何內容降級。
最近，“切割芥末”已經變得流行。在BBC的網絡團隊的支持下，這包括區(qū)分“好”和“壞”瀏覽器，并為“壞”瀏覽器提供有限的體驗。但是，它真的只適用于內容網站。
當涉及到類似應用程序的體驗，許多人只限于支持一些領先的瀏覽器，使開發(fā)更容易?？杀氖牵@讓我們回到1996年的情況，你需要一個特定的瀏覽器來查看內容。
改善你的技能
那么，你如何跟上快速移動的網絡行業(yè)的最新發(fā)展，并提高你的技能？讓我們看看幾種不同的方法提高你的技能...
平臺知識
設計師的主要部分是平臺知識。你應該知道各種操作系統(tǒng)，以及如何使用它們。作為設計師，我們傾向于使用Mac，但是很容易忘記，大多數(shù)人使用Windows框來完成他們的工作。
我覺得你只有真正理解的東西，如果你自己使用它。我喜歡使用我的Mac設計，但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構建，以檢查UI中的各種更改。
我也經常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它，因為我覺得它并不是必要的。
此外，web可以被視為其自己的操作系統(tǒng)。它不斷發(fā)展，每周都會向每個瀏覽器供應商添加新功能。非常值得了解瀏覽器的技術方面，特別是關于CSS和圖形能力。你需要知道SVG和WebGL是什么，以及如何使用Web動畫API。
每個平臺隨著時間演變，作為一個用戶界面設計師，它是你的任務，保持最新。畢竟，無論你在設計什么，都不是孤立生活，而是一個更大的軟件生態(tài)系統(tǒng)的一部分。
回到基本
我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設計的網頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學者。
如果你不知道概念，如模態(tài)和可承受性，你需要讀。你應該能夠解釋Fitts的定律是什么。格式塔的鄰近法？這是UI設計的面包和黃油。
受游戲和電影的啟發(fā)
作為UI設計師，我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復雜，UI設計人員不得不解決與UI設計師在商業(yè)項目上工作相同的復雜界面問題。
游戲也可以表示趨勢。在Colin McRae Rally的菜單中發(fā)現(xiàn)的極簡主義讓我想起了iOS7的方向。在某種程度上，現(xiàn)在時尚的UI動畫設計出現(xiàn)在幾年和幾年前的游戲中。從skeuomorphism到裸，功能界面和“平面設計”的轉變在游戲中也很明顯。比較2006年的湮滅與2011年的天際。這兩個游戲都是同一系列的RPG，但差異是驚人的。
Marvel電影中的未來派界面如鋼鐵俠也是我的靈感。他們不是完全可用的例子，但他們確實讓我更多地關注計算作為一個整體。我們想要一個未來的屏幕，或者我們想讓屏幕消失？這可能是一個很好的問題，在一個酒吧的設計師。
有了解和學習 B 端的同學必然都聽說過 SaaS 這個詞，這在 B 端行業(yè)是個非常重要的產品形式和分支。
雖然它重要，但新手對這東西的理解充滿了讓人遺憾的扭曲。比如常見的誤解式提問，Saas 應該怎么設計？適用哪些設計風格？
……
所以我從最底層的技術層面，來解析 Saas 到底是什么，在未來你再也不用擔心對這個詞匯一知半解，無法正常參與業(yè)務討論了。
講解什么是 Saas，或者剛剛圖例出現(xiàn)的 Paas、laas 是什么，首先要認識一個問題，一個需要聯(lián)網的軟件，是如何落地的，需要哪些前提條件。
通常，我們可以把一個普通的聯(lián)網產品要正式上線并使用，需要滿足 9 個層級的條件，我們簡稱 “9層塔”，分別是：
下面，我們根據(jù)每個大層級來解釋一下，它們分別都是什么。
1.1 基礎設施層
基礎設施層是一切網絡服務的根基，由現(xiàn)實世界的硬件組成，是所有技術、代碼、數(shù)據(jù)的運行基礎。
層1：網絡（Networking）
即基礎的互聯(lián)網電信寬帶服務，通過電信運營商在各地搭建聯(lián)網用的設備，并使用線纜相互連接，滿足數(shù)據(jù)的物理傳輸可能。
比如你想要在家上網沖浪（非移動上網），最基礎的條件是就是購買和開通寬帶服務，通過接入光纖的形式，實現(xiàn)從家中連接到互聯(lián)網世界的可能。
層2：服務器（Serves）
服務器，本質上也是一臺電腦。有了聯(lián)網的條件，我們就要把網絡接入到這臺 “電腦” 上，讓它來完成各種數(shù)據(jù)的處理和存儲。
但不管它能做什么，要做什么，首先你得先有這臺設備，不然后續(xù)的工作都無從談起，所以服務器指的就是用來完成后續(xù)工作的電腦設備。
層3：存儲（Storage）
存儲就是硬盤，你想要運行的任何程序、代碼，還是想要收集的數(shù)據(jù)，都需要容納的地方，那就是硬盤空間。存儲就是關聯(lián)到服務器的硬盤，是數(shù)據(jù)存儲的物理環(huán)境。
之所以硬盤被獨立出出來，而沒有把 CPU 內存這些拿出來，是因為數(shù)據(jù)的存儲和安全（物理上）是網絡服務的重中之重。CPU、內存、電源壞了，替換就可以，硬盤損壞導致數(shù)據(jù)的丟失是無論如何不可能接受的。
所以，工程師們開發(fā)了非常多特殊的技術來保障存儲的穩(wěn)定和安全。
1.2 技術應用層
技術應用層，就是具備了網絡、服務器、硬盤以后，讓這些基礎設施充分發(fā)揮作用和能效的相關技術。
層4：虛擬化（Virtualization）
虛擬化是個比較抽象的概念，它是一種資源利用的技術，讓服務器最大化的利用和分配自己的資源。
比如一臺服務器，有8核心、8G內存、8G存儲，如果賣個一個客戶運行一個程序，那么很可能這個這個程序日常只使用一個核心的算力，1GB內存，1G不到的存儲，剩下的算力資源不就浪費了嘛？
于是，虛擬技術就可以把這臺服務器切割成 8 臺 “虛擬機” 賣給 8 個這樣的客戶。讓他們在這臺設備上運行 8 個不同的程序，并根據(jù)它們各自使用的消耗靈活分配 CPU 和內存資源。
所以，今天如果你想要搭建一個網站，云服務商出售的 “虛擬主機”，就是在實體服務器主機上切割出來的一部分。這樣客戶省錢了，商家利潤率也更高了！
層5：操作系統(tǒng)（OS）
每臺電腦都有自己的操作系統(tǒng)，我們熟知的 Windows、Mac OS等等。如果硬件沒有搭載操作系統(tǒng)，那它們就只是一堆工藝精密的廢鐵。
對于服務器來說也是，任何服務器想要正常運行，都必須搭載相關的服務器操作系統(tǒng)，有了基本的系統(tǒng)，我們才能創(chuàng)建程序，讓服務器去運行我們想要的功能。
前面提到的虛擬機，就允許同一臺服務器通過虛擬技術運行多個系統(tǒng)。
層6：中間件
中間件也是個比較復雜的技術概念，它是個獨立系統(tǒng)軟件服務程序，是軟件的直接面向對象（而不是服務器），是一種支撐軟件。
舉個不太嚴謹?shù)睦?，我們常?guī)的邏輯是一個程序對應一臺服務器（或虛擬機），但真實情況往往是一個程序會關聯(lián)好幾個服務器和不同的系統(tǒng)，來完成不同的網絡服務。正常情況下，你需要對每個服務器和系統(tǒng)進行適配。
而中間件的作用就是幫助你省掉這個麻煩的步驟，讓你只需要對接唯一的翻譯和話事人，他會幫你向不同的任務對象傳達你的要求。
層7：程序環(huán)境（Rumtime）
程序環(huán)境，就是編譯代碼用的環(huán)境。我們常聽說的 C 語言、C++、PHP、Java、.Net 等編程語言，都需要安裝一個對應的運行環(huán)境。
許多熱衷電腦游戲的同學一定很熟悉游戲第一次啟動觸發(fā)的 Java 安裝界面，那就證明這個游戲中運用到了 Java 的代碼，如果你沒有 Java 的運行環(huán)境，那么它們就無法生效。
1.3 產品表現(xiàn)層
層8：應用（Application）
在這個系統(tǒng)下，應用程序指的不是你在自己電腦手機上安裝的程序。而是安裝在服務器上運行的程序，不管是后端程序還是前端程序。
它們需要使用某些特定的程序語言來編寫，并運行在上面所說的對應環(huán)境中。我們所說的后端開發(fā)，通常就是開發(fā)服務器所運行的程序的程序員。
層9：數(shù)據(jù)（Data）
這個詞放在這里可能有比較大的歧義，數(shù)據(jù)實際上就是使用這個程序所產生出來的數(shù)據(jù)，而不是單指數(shù)據(jù)庫（數(shù)據(jù)庫也是環(huán)境的一部分）。
比如你打開一個網站注冊了賬號，上傳了頭像，那么這些信息就是使用程序所額外產生的數(shù)據(jù)，它是項目正常運作的必然產品。
1.4 SaaS 到底是什么
理解上面的9個層級的內容是什么，我們就可以看下面這張圖表了。
SaaS 全程 Software-as-a-Service，翻譯叫 “軟件即服務”，講人話就是 “賣聯(lián)網軟件” 的。
前面提的 9 個層級，除了最后一層數(shù)據(jù)是我們普通人可以負責的，其它每個層級都需要對應的開發(fā)和工程師來負責對吧，那么我們普通人還是企業(yè)就不能使用網絡軟件服務了嘛？
這肯定是不符合事物發(fā)展規(guī)律的。
SaaS 的存在，就是讓用戶不用管什么服務器、代碼、中間件這些有的沒的高深玩意，直接讓你在瀏覽器或本地客戶端上直接使用這款聯(lián)網軟件，并創(chuàng)建對應的數(shù)據(jù)信息。
換句話講，只要這個軟件是聯(lián)網的，且軟件本身的功能就是服務的核心（劃重點：社區(qū)電商類軟件的服務顯然不是軟件功能本身），它就是 SaaS。SaaS 既可以免費，也可以是通過批量出售軟件功能的使用權來賺取收益。
免費情景：
微軟：如果你使用了基于 Web 的電子郵件服務（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已經使用一種形式的 SaaS。
https://azure.microsoft.com/zh-cn/overview/what-is-saas/
付費情景：
在 B 端的語境下，SaaS 通常就是指制作一個面向商業(yè)用戶的聯(lián)網軟件，然后批量出售這個軟件的使用權。它并沒有特指這個軟件必須是 CRM、ERP、HRM 還是商用 HMI……
所以明白了嘛，SaaS 只是一個商業(yè)形式或技術形式的統(tǒng)稱，它根本沒有具體的設計規(guī)范或者學習方法，完全根據(jù)業(yè)務的實際需求和場景決定。
最后，再問你們一個問題，你們現(xiàn)在負責的項目是 SaaS 嘛？
在 9 層塔中，SaaS 是完全制作好軟件讓用戶直接上手使用的軟件，而 PaaS 和 IaaS 就不一樣。
2.1 PaaS
PaaS 全文 Platform as a Service，是平臺即服務的簡稱。這屬于完全技術化的服務，是非程序員的一般用戶難以參與到的業(yè)務類型了。
即服務商提供了基礎的 7 層服務，只要用戶購買了這些使用權，那么就可以直接在這個基礎上編寫或安裝運行的程序進行使用了。
比如全球最大的開源 CMS 博客程序 WordPress，是由 PHP+MySQL 編寫的，如果要創(chuàng)建這樣的網站，就可以直接購買符合程序對應環(huán)境的服務器，再進行安裝部署即可。
2.2 IaaS
IaaS 全文 Infrastructure as a Service，就是用戶只購買一個完全空白的虛擬主機，類似你購買了一臺硬盤格式化后完全空白的虛擬電腦。
用戶可以自己選擇安裝什么樣的系統(tǒng)，編寫什么樣的中間件，最后再搭建自己的框架。這適合定自定義要求更高的用戶，完全根據(jù)自己的需要 DIY 項目的服務器功能。
2.3 Hosting
Hosting 則是比 IaaS 更進一步的服務，從原本的虛擬服務器升級到了完整的服務器。
也就是說，在一些特定業(yè)務環(huán)境下（比如特殊的數(shù)據(jù)安全要求），用戶需要購買完整的服務器硬件使用權，從原本的合租換成整租。
所以，Hosting 就是服務器托管的意思，用戶向一些服務商購買了完整的服務器硬件使用權和聯(lián)網功能，然后遠程進行控制和使用。而商家負責硬件層面運維，防止服務器斷電、斷網、損壞、過熱、故障等一系列硬件問題。
2.4 Co-location
九層塔中，我們其實還省略了一個更底層的環(huán)節(jié) —— 數(shù)據(jù)中心。
數(shù)據(jù)中心是一個物理名詞，在今天指的是大規(guī)模的服務器數(shù)據(jù)設備安置和運行的空間。比如蘋果的云上貴州，就是典型的數(shù)據(jù)中心。
Co-location 的服務也叫場地出租，就是數(shù)據(jù)中心的商家，把數(shù)據(jù)中心的物理空間使用權租用給用戶，用戶自己購買服務器或商家的（不是臨時租用）放進去，再借助數(shù)據(jù)中心的網絡和其它基礎服務實現(xiàn)服務器的正常運轉。
這個概念大家簡單理解就可以，我就不多做介紹了。
所以，九層塔中包攬了不同層級數(shù)量的技術，就可以形成不同的服務，每一級服務有各自的優(yōu)缺點，是由項目的實際情況決定的。
相信看完前面的介紹大家已經知道，SaaS 等服務是建立在聯(lián)網的基礎之上的，也就是說，除了可以獨立運行在你客戶端里的本地軟件，還包含更多需要聯(lián)網的軟件，或者干脆運行在遠程服務器主機上的軟件。
這是一個發(fā)展的過程……
最早的軟件安裝是我們到軟件店里購買軟盤、光盤，回到家里的電腦安裝，這些軟件往往只在本地運行，是不需要聯(lián)網的孤島。
隨著互聯(lián)網行業(yè)的發(fā)展，孤島漸漸被消除，聯(lián)網上傳和獲取數(shù)據(jù)越來越普及，甚至，軟件都不需要再下載和安裝，直接用瀏覽器就可以訪問使用。
這種模式，就催生了軟件的開發(fā)維護與服務器、網絡的硬件運行進行了分工，一般的產品開發(fā)團隊專注在軟件應用層面的開發(fā)工作，而把網絡、遠程服務交給其它商家，并付費購買。
這樣不僅帶來更高的效率，而且降低了各自的成本，實現(xiàn)了多方的共贏。
所以，我們再來理解云服務這個詞就很容易了，云就是網絡，云服務就是基于聯(lián)網實現(xiàn)的各種軟硬件服務的總和。
除了遠程的虛擬機、中間件、數(shù)據(jù)庫外，還有遠程計算、渲染、CND加速、直播分流等等。
這也是為什么云服務會成為互聯(lián)網發(fā)展的基礎，因為它實在太重要了，幾乎所有互聯(lián)網公司都無法脫離云服務帶來的支持。
這也是為什么各個大廠紛紛投入云服務的賽道中，因為這是互聯(lián)網的基建和命脈之一，擁有非常廣闊的前景與市場。而在馬太效應強者越強的現(xiàn)實環(huán)境下，頭部的廠商擁有更好的機群、技術、人員，可以大幅度降低運作成本，提供更優(yōu)質但價格更低廉的服務。
雖然云服務在今天不可或缺，價格也越來越有優(yōu)勢。但是，并不是所有企業(yè)都一定要選擇購買外部的云服務，這就是我們要理解的另一個課題 —— 私有化部署。
云服務再怎么便捷，也有一個缺陷，那就是數(shù)據(jù)是存儲在別的商家、企業(yè)的服務器中，有一定的數(shù)據(jù)安全隱患。
雖然數(shù)據(jù)安全是云服務的最基本保障，但很多對數(shù)據(jù)隱私、安全極度重視的企業(yè)，是不愿意承擔任何外部風險的。所以他們就會通過自建本地服務器（私有云）的方式，實現(xiàn)從網絡、硬件到軟件全局私有化的部署。
也就是說，服務器機房是自己公司的，網絡是自己遷進機房的，服務器自己買的，環(huán)境、虛擬化、數(shù)據(jù)庫自己搭建的，后端程序也是自己寫的，最后電腦手機上運行的客戶端，是連接這些服務器的。
哦對了，當然這些硬件日常的維護也要由自己公司的運維負責……
這樣的成本高嘛？非常高。但類似國企、銀行、證券、國防、政府機關等機構，對數(shù)據(jù)的安全性是異乎尋常的執(zhí)著的，他們是有足夠的動力劃出預算來確保數(shù)據(jù)的私密與安全，用來運行自己內部的 B 端系統(tǒng)。
這也是為什么這些機構從一開始就拒絕使用 Figma 這種公有云端軟件，尤其是服務器在國外的。
再問下一個問題，私有化部署，就意味著這個環(huán)節(jié)中所有步驟全是自己搞定嘛？
當然不可能，因為應用這個層面，有時候不是想開發(fā)就開發(fā)得出來，或者成本實在超出了預算。因為私有化的主要目標是數(shù)據(jù)安全，但不是應用的工具一定得個性化定制。
比如在即時設計官網的價格頁面，就可以看到 “私有部署” 這個選項。它的實際作用，就是允許客戶在自己的服務器上安裝它，讓內部的員工使用設計軟件時是同步到公司指定的服務器而不是官方的公共服務器中，滿足客戶的數(shù)據(jù)隱私需求
注：這例子大家討論最多適合理解，非恰飯
所以，了解完上面的概念，你也就大概能明白什么是云服務，什么是私有化。如果需要在工作中碰到更細節(jié)的名詞還是概念，可以再進一步做理解。
文章來源：UI中國 作者：超人的電話亭
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多產品經理和設計師在設計 B 端產品界面的時候不知道該怎么辦，今天筆者給大家匯總了一些 B 端典型界面及其設計原則，幫助大家從容應對界面設計，不再不知所措。
Dashboard 頁通常作為產品的首頁出現(xiàn)，產品內各種重要的數(shù)據(jù)和信息都會展現(xiàn)在 Dashboard 上。用戶可以通過點擊 Dashboard 上的卡片或卡片上某條數(shù)據(jù)，快速鏈接到詳情，這大大縮短了用戶獲取信息的路徑。產品團隊也可以通過 Dashboard 頁，向用戶傳遞產品迭代、運營活動等內容。
模塊獨立
Dashboard 是由承載不同內容的卡片組成的，每塊卡片的內容都要獨立，不該交叉。
有效統(tǒng)計
Dashboard 上所呈現(xiàn)的數(shù)據(jù)最重要的就是該數(shù)據(jù)是否為用戶真實所需，如果統(tǒng)計數(shù)據(jù)不對用戶產生任何價值，那還不如不統(tǒng)計，否則會干擾用戶。
短路徑導航
了解用戶需要使用 Dashboard 的核心目標，為用戶通過 Dashboard 達到數(shù)據(jù)詳情頁提供最短的路徑導航。
使用場景
將用戶需要待辦的事項、事項處理的進度等都完整的展示出來，方便用戶隨時查看，提升用戶的工作效率。
核心功能
核心統(tǒng)計數(shù)據(jù)、待辦任務、快捷入口、通知公告等。
設計建議
使用場景
當新用戶第一次使用產品時，為了減少用戶的困難和快速完成用戶的任務，新手引導頁可以將核心操作鏈路展現(xiàn)給用戶。
核心功能
產品介紹、核心功能使用手冊、相關內容指引。
設計建議
使用場景
監(jiān)控頁是數(shù)據(jù)可視化頁面中的一種，它通過一系列對數(shù)據(jù)高度概括的圖表來展現(xiàn)系統(tǒng)的核心指標。指標監(jiān)控頁的使用者通常是管理者（即決策者），他們需要看到系統(tǒng)整體的運行狀態(tài)，監(jiān)控全局數(shù)據(jù)，從而調整自己的決策。
核心功能
關鍵指標統(tǒng)計。
設計建議
使用場景
分析頁也是數(shù)據(jù)可視化頁面中的一種，它通過對系統(tǒng)多維度的詳細分析來展示系統(tǒng)的情況，從而使使用者可以發(fā)現(xiàn)問題，并盡早找出解決辦法。監(jiān)控頁重在總覽，而分析頁重在明細，因此，分析頁的使用者通常是執(zhí)行者。
核心功能
關鍵指標明細分析。
設計建議
表格頁可以處理大量的數(shù)據(jù)條目，同時可以導航至對應數(shù)據(jù)的詳情頁。在表格頁中，用戶可以查詢自己所需要的數(shù)據(jù)條目，以及對比數(shù)據(jù)條目、新增數(shù)據(jù)條目、刪除數(shù)據(jù)條目等。
模塊清晰
表格頁通常由查詢區(qū)、按鈕區(qū)、表格區(qū)、分頁器等模塊組成，要保證模塊間層次合理與清晰。
數(shù)據(jù)格式
表格頁中最大的模塊為表格區(qū)，該區(qū)域由列組成，列由數(shù)據(jù)構成，列中的數(shù)據(jù)格式展現(xiàn)要符合業(yè)務及用戶的需求，例如“星期三”不能表現(xiàn)成“星期 3”。
數(shù)據(jù)對齊
對齊方式合理的數(shù)據(jù)，有利于用戶定位數(shù)據(jù)、分析數(shù)據(jù)。通常數(shù)據(jù)對齊方式為數(shù)值右對齊，文本左對齊，特殊情況居中對齊。
全表格頁是最常見的產品界面，全表格頁主要由篩選條件、按鈕區(qū)、表格區(qū)、分頁器組成。表格區(qū)是表格頁中的主角，當界面數(shù)據(jù)只需要一張表呈現(xiàn)的時候，使用全表格頁。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設計建議
使用場景
左樹右表頁的界面布局基本與全表格頁差不多，只不過其多了一顆左側的樹來幫助用戶導航。
核心功能
導航樹、多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設計建議
使用場景
上下表格頁是表格嵌套表格幻化過來的，通常上表格為主表，下表格為子表，子表展示了主表中某條數(shù)據(jù)的詳情。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設計建議
使用場景
左右表格頁與上下表格頁有異曲同工之妙，左右表格頁通常左表為主表，右表為子表。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設計建議
使用場景
折疊表格頁的出現(xiàn)通常是頁面上表格的信息需要分組，每一張表格展現(xiàn)一類信息。
核心功能
分組、操作區(qū)、表格區(qū)、分頁器。
設計建議
表單頁是用于信息添加和錄入的頁面類型，用戶根據(jù)系統(tǒng)的要求將必填字段信息填寫完成，從而提交給系統(tǒng)，由系統(tǒng)接收并輸出信息。
控件合理
通過選擇合理的數(shù)據(jù)錄入控件，及通過合理的信息組織形式，幫助用戶可以快速完成數(shù)據(jù)錄入的任務。
明確好用
表單頁面中，每個表單項都要做到自身體驗的明確與好用，例如針對一些有通用值的表單項建議設置默認值，針對必填項要明確標明，針對表單項標題、錯誤提示要明確傳達含義。
清晰反饋
表單錄入完后，允許用戶進行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。
使用場景
表單項較少，表單信息直接平展即可，表單錄入任務簡單且快速。
核心功能
表單項、填寫說明、操作按鈕區(qū)。
設計建議
使用場景
高級表單頁通常需要用戶填寫大量的信息，這樣大型而復雜的數(shù)據(jù)錄入任務需要被拆解為多個部分進行。
核心功能
分組/卡片分組、表單項、操作按鈕區(qū)。
設計建議
使用場景
當表單填寫有相應的步驟順序時，采用分步驟表單較為合適。
核心功能
步驟條、表單項、操作按鈕區(qū)。
設計建議
使用場景
當表單塊歸屬不同的分類時，需要使用帶樹表單頁去處理。
核心功能
導航樹、表單項、操作按鈕區(qū)。
設計建議
詳情頁的作用是向用戶展示一個對象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時允許對詳情頁整體的數(shù)據(jù)或某部分數(shù)據(jù)發(fā)起編輯等操作。
層次分明
針對信息較少的詳情，平鋪展示即可；針對信息量大的詳情，需進行合理組織，保證層級分明。
結構相近
針對詳情信息的模塊化組織，要求盡量模塊的結構相似，減少復雜性，降低用戶的理解成本。
使用場景
基礎詳情頁信息量較少，信息復雜度低，直接平鋪展示即可。
核心功能
詳情信息。
設計建議
使用場景
高級詳情頁需要展示的內容量較大，且復雜度高，需要拆分為多組來幫助用戶瀏覽信息。
核心功能
卡片、分組、詳情信息。
設計建議
圖
使用場景
詳情頁中有部分字段由于業(yè)務需要，會進行修改。
核心功能
詳情信息、可編輯信息。
設計建議
我們如果能做到對 B 端通用型界面了然于胸，那么在面對用戶需求時才能從容應對，舉一反三。不斷總結和抽象，是我們應對各種需求的不二法寶。
文章來源：優(yōu)設網 作者：知果日記
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在開發(fā)一款高品質的產品的過程中最重要的一個環(huán)節(jié)是了解誰是你的用戶，他們的需求是什么。
設計著作《軟件創(chuàng)新之路——沖破高技術營造的牢籠》里首度提出產品設計和開發(fā)的用戶“人物角色”概念。正如設計師金·古德溫在2005年所述：“人物角色就是一個用戶原型，可以用來幫助指導產品功能、導航、交互、甚至視覺設計方面的決策?！边@種原型并不是真正的人，而是結合對真實用戶的事實和觀察而形成的一個令人記憶深刻的人物。
與市場細分不同，用戶畫像代表著目標和行為模式，而不是人口屬性或工作職責。用戶畫像可以幫助設計成為共同參考點，有助于在設計討論時聚焦在特定用戶上，使用場景可幫助測試系統(tǒng)將用戶需要的功能點集成到產品上。
*注：用戶特征、人物畫像和使用場景對比表
用戶畫像常用于以下三個場景：
產品設計：開發(fā)前期的產品定位設計，幫助確立產品定位、設計目標、設計策略與準則；
產品營銷：促進其他工作，如指導運營對特定用戶進行推送活動信息，推廣信息，個性化推薦等。
產品決策：分析用戶畫像，對產品的發(fā)展現(xiàn)狀和發(fā)展趨勢進行預測，及時調整產品發(fā)展路線。
整體來說，用戶畫像多采用定性的研究方法來進行角色劃分，主要可采用的資料來源有：人種學研究、情境調查、觀察法、訪談法、桌面研究等，具體實行時會根據(jù)業(yè)務情況稍作調整。
用戶畫像的范圍可以很廣，也可以很窄。需要先確定這些用戶畫像是用來做什么的？只有回答了這個問題，才能確定用戶畫像的適當范圍。
范圍越廣，支持這些用戶畫像的數(shù)據(jù)就越淺。在廣泛的情況和場景中尋找具有相似動機、目標、信息需求、態(tài)度和行為的客戶群體是不現(xiàn)實的。
可以在大量的產品和服務中找到相似的部分，但是您需要使用更少、更通用的屬性來描述它們。
范圍越小，數(shù)據(jù)就越豐富。在范圍狹窄的情況下，用戶畫像屬性將直接與特定產品或場景相關。人們的行為和需求會受到相關產品或服務環(huán)境的極大影響。
有針對性的用戶畫像范圍將允許您在用戶的動機、目標、態(tài)度和行為中找到更多的主題。此類信息使團隊能夠做出特定的設計決策。
首先了解公司對現(xiàn)有用戶和目標用戶的理解程度，對他們有什么看法。
如果產品擁有確定的客戶基礎，就與直接接觸這些工作的人進行交談，例如：銷售人員、客戶支持人員、市場調研員、技術銷售咨詢師、培訓師等。
如果公司嘗試著為產品拓展用戶或者打入新市場，就與負責相關事宜的人交談。就這些人對用戶和客戶的個人經驗以及用戶不同的方面進行訪問。
圍繞用戶對產品的整體體驗來組織訪談或實地訪問，而不是圍繞特定任務。
銷售和市場營銷人員通常擁有詳細的人口概況和市場研究，能夠提供完整的用戶分類。如果有市場細分，尤其是借助于使用數(shù)據(jù)或其他行為數(shù)據(jù)所得出的，就值得咨詢。
用戶常見的疑問和遇到的一些問題，應該咨詢論壇或社區(qū)站點以及支持系統(tǒng)，它們能夠提供支持性數(shù)據(jù)，將這些信息變成人物角色的一部分。
從所收集的信息中提取共同主線。如：用戶擁有哪些共同點？頻繁出現(xiàn)的內容有哪些？共同的期望？
然后列出用戶的重要不同點。例如影響產品用戶行為的不同屬性范圍：使用頻率、使用強度、業(yè)務規(guī)模等；
一旦決定要包含哪些屬性以及每個屬性在用戶群體中如何變化，就該借助于研究中觀察到的個人細節(jié)和軼事從屬性群組中合成現(xiàn)實的用戶了。
在一些情況中，需適當增加細節(jié)、創(chuàng)造一個界定屬性范圍內的具體事實。
例如：
可調整為：
使用從訪談中收集的資料，充實剩余的屬性，合并從相似用戶中提取出來的細節(jié)；
增加一些針對產品領域的具體信息；
然后與她具體的技術細節(jié)相結合；
情景描述的是一個人對一個活動或一種情形如何表現(xiàn)或思考的故事。與故事一樣，情景傳達的是產品使用方面的細微差別，幫助利益相關者把產品放入真實生活情境中。
描述現(xiàn)狀的情景通常叫情境式情景（也稱問題情景），因為它們試圖展現(xiàn)如何改善現(xiàn)狀。對改進方案進行預想的情景叫設計情景。
情境式情景——主要用于設計早期階段。通過生動地闡釋現(xiàn)有實踐中的問題或空白，使團隊開始設想可能的解決方案。
設計情景——適用于整個設計和開發(fā)過程。在早期的頭腦風暴中，設計情景能夠激發(fā)對概念的討論和反饋。有了早期的概念，設計情景可以幫助團隊完成可能的成果。早起的設計情景也可以作為訪談提示，探出潛在用戶的反饋。
情景是通過講故事來創(chuàng)造的，可以提取自研究中所聽到的故事加以處理，把一堆故事減少到只剩最相關的。
情景基于以目標和人們?yōu)閷崿F(xiàn)目標而采取的行動。如果有現(xiàn)成的人物角色，就說明可能已經確立了目標和行動，這些將形成情景的基礎。如果沒有可用的人物角色，就返回研究分析報告，列出每個目標受眾最緊迫的目標。
決定把哪些活動包含在情景中時，針對研究人物角色的每個主要目標：
為了實現(xiàn)這一目標，這些活動中的哪些最經常采用？
為了實現(xiàn)這一目標，這些活動中的哪些是必需的？
哪些頻繁或必要的活動會作為單一序列的一部分發(fā)生？
情景是以用戶視角為基礎的。用戶無法認知的任何東西都不應該納入情景的一部分，尤其是情境式情景。情景必須要概要描述最重要的用戶行為和系統(tǒng)反應。
情境式情景通常給人一種“XX的一天”的感覺，描述幾個小時內或一天當中的一系列任務。
例如：
情景盡量概括一些，不要詳述界面元素或系統(tǒng)實現(xiàn)。詮釋故事的整體結構比解釋所有細節(jié)更重要。
分享人物角色時最難的莫過于用一種簡練且有益的方式來表達他們。
用一種方便使用的形式概括人物角色。例如可將其制成板狀使其更易于保存、更容易找到，并且不太可能被弄丟；也可以把用戶的圖片和關鍵屬性做成海報，并把它們訂到墻上，強化其存在感。
為避免完成畫像后將其束之高閣，需要鼓勵部門員工在開會期間使用人物角色進行討論，并且思考各個功能如何為各種各樣的人物角色服務。
項目需要多樣化的視角，用戶畫像自身尚不足以傳達一系列的設計見解。用戶畫像要與情景、體驗模型、任務分析和傳統(tǒng)的書面報告結合使用，而不是替代他們。 最后，感謝大家的閱讀，希望本篇文章能夠對大家有所幫助！
* 注：本篇文章有借鑒網站資料和書籍等多方面內容。
文章來源：站酷 作者：禾x日
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
綜合監(jiān)管平臺是對自然資源管控的一個OA系統(tǒng)。主要功能是對國土資源相關業(yè)務的監(jiān)測、評估和統(tǒng)計，將各專項規(guī)劃實現(xiàn)“多規(guī)融合”，從而優(yōu)化城市自然資源配置，做好國土空間規(guī)劃統(tǒng)籌。
為什么要有設計規(guī)范
1、多個設計師同步設計
我們部門有2名UI設計師，所以在我們同時畫同一個項目界面時，為了保持整個設計的統(tǒng)一，就需要我們設定設計規(guī)范。
2、設計與前端之間的溝通
與設計同理，開發(fā)人員參照統(tǒng)一的設計規(guī)范寫頁面，可避免同一系統(tǒng)中出現(xiàn)設計控件混亂的情況，從而提高開發(fā)效率、減少溝通成本、減少返工率。
3、在公司內部復用
在公司內部，設計規(guī)范可運用在多個項目中，從而減少開發(fā)的工作量、提高開發(fā)效率。
建立設計規(guī)范前的工作
從產品經理手中接到原型圖，首先是與產品經理的溝通，包括客戶需求、設計風格的確定、頁面內容的布局等等，關于設計尺寸，因為我們客戶用的是1920*1080分辨率的電腦，所以設計就基于1920*1080尺寸來做；但有時會基于1440*900的尺寸來設計，然后上下適配1920*1080和1366*768。所以設計尺寸要根據(jù)具體情況而定。
頁面框架
a、主體框架分為四個區(qū)域：頂欄、左側欄、頁簽、主體內容
b、主體內容上、左邊距為10px，默認顯示一屏高度，超出的內容加上下滾動條
c、頁面中的各個組件根據(jù)不同屏幕分辨率采用自適應
如何建立設計規(guī)范
1、顏色規(guī)范
后臺系統(tǒng)主色調大多運用藍色，這是因為藍色往往圍繞著科技、安全、信任等等，很符合業(yè)務場景，比如智慧城市、智慧醫(yī)療、智慧交通等。但是藍色用多了也會讓人感覺沒有新意、審美疲勞，所以在色調這塊，后臺系統(tǒng)可以采取皮膚功能的擴展，做兩套配色好的皮膚供客戶選擇，這樣避免了因客戶的不滿而一次次的修改，從而提高工作效率。
2、文字規(guī)范
因為我們面向的客戶多為政府工作人員，且年紀稍長，所以字號要比平常的網頁設計要稍大一些；常用字體，中文：微軟雅黑，英文或阿拉伯數(shù)字：Arial；行間距=字體+8px。
3、按鈕規(guī)范
按鈕是用戶與系統(tǒng)間交互的一個重要觸點，用于特定觸發(fā)事件的發(fā)生。按鈕類型可分為線性按鈕、面型按鈕、文字按鈕、圖標按鈕、圖標+文字按鈕，按鈕狀態(tài)分為常規(guī)、懸停、按下、禁用。按鈕的寬、高、曲率、文字離邊框的間距需要在規(guī)范中寫明。
4、表單規(guī)范
在后臺系統(tǒng)中，表單多用于登錄注冊、搜索框、選擇器、信息錄入等。表單類型可分為輸入框、下拉框、時間選擇框、單選框、多選框等等，表單狀態(tài)分為默認、輸入/選中、填寫完成/已選擇、不可填寫/不可選、錯誤提示。對于必填表單，需在標簽前后或輸入框后增加“紅色*號”。輸入框的高度、曲率需要在規(guī)范中寫明。
5、表格
此圖為可進行單選或批量選擇、排序、表頭分組和帶有凍結列的復合型表格：
a、固定列表格：對于屏幕無法展示完全的內容，可以采用凍結重要列的方式，然后橫向加滾動條左右滑動
b、可對數(shù)據(jù)進行排序：升序和降序
c、文字類字數(shù)限制：重要字段全部顯示，其他文字信息超出寬度以“...”代替，鼠標懸停時顯示全部內容
d、對齊方式：文字信息左對齊，因為人的閱讀習慣是由左到右、由上到下的，此外在主從型列表中，采用左對齊錯開文字，可使用戶一目了然，降低視覺噪音；數(shù)據(jù)信息右對齊，因為數(shù)字單位個十百千萬...是由右向左，方便比較數(shù)據(jù)大小
文章來源：站酷 作者：Alice冰冰
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.yvirxh.cn