1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手，又在做UI設計，這個教程教你如何使用常用的Photoshop設置來達到更好的效果。本文是以iPhone為實例告訴你怎么在UI設計中使用Photoshop，完全是初學者的教程。

2. How to Design an iPhone App in Photoshop

這篇文章將為我們介紹使用Adobe Photoshop為iPhone設計一個簡單的3頁目錄列表應用程序。并且將一步步地指導你完成這些步驟，還涵蓋了使用Photoshop設計iPhone應用程序的所有基本原則。

3. Design an App Landing Page in Photoshop

在這個教程中，我們可以看到一個應用程序著陸頁的詳細設計過程。設計師使用Tuts Android應用程序進行演示，強調其功能和優勢，利用多個CTA來完善整個著陸頁的設計。

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要設計一個像Facebook或者Instagram這樣成功的登錄界面設計，那么這個完全是你必看的基礎教程，視頻中教你如何選擇顏色，設計按鈕以及詳細的步驟來展示登錄界面的設計過程。視頻雖然是四年前的，但是里面的設計依舊不過時。

如何使用Sketch來設計手機UI界面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

開始一個新的設計項目是很難的，無論你是自由設計師，還是在知名的產品公司工作，時常會感到迷茫。本文將一步步的教你如何使用Sketch開始一項新的APP設計項目。

2. Food App UI ? Sketchapp Tutorial / Sketch 4 Tutorial

視頻主要是介紹如何使用Sketch制作一個美食類APP 菜單欄UI設計，簡單易懂。

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款優秀的矢量設計和圖形程序，很適合用于設計iOS應用程序。在這個視頻中，設計師使用Sketch 3來設計一個iPhone APP用戶界面。

《From Idea To Reality: Designing An App With Sketch And Xcode 》這篇文章是進階版的APP 設計教程，從理論到具體的例子講解，非常受益。

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作為當下主流的設計工具，似乎有超越Photoshop的趨勢。本視頻介紹的是如何使用Sketch來制作一個音樂APP登錄頁設計，可以說是手把手的教程，每一步都非常的詳細細致，非常適合初學者。

看了前面的音樂類APP登錄界面的教程， 你是否也想設計出一個屬于自己的音樂APP呢？接下來我將介紹如何通過結合Sketch和原型設計工具設計一款音樂類的APP（Prototype an music app with prototyping tool）

TIMING

這款原型音樂類的APP在Mockplus設計大賽中斬獲頭籌，設計師通過采用Sketch以及Mockplus的結合，做出了高保真原型。這個APP主要體現一種復古的視覺效果，磁帶轉動的效果是這次視覺上的設計重點。

必讀的手機界面UI設計好文

1. The 10 principles of mobile interface design

計算機和手機是人們日常工作和生活必備的通訊工具。但在許多方面，手機往往更加強大，手機更加的私人化，與我們的聯系更緊密。鑒于移動手機和計算設備之間的許多差異，移動設計與桌面設計的設計大不相同。這篇文章詳細的向我們介紹了移動界面設計的基本原則，幫助設計師們開發移動應用程序的獨特力量。

2. UI Design Do’s and Don’ts

iOS良好的優化了用戶面設計，并提供給用戶優質且具有吸引力的用戶體驗。在開始你的iOS設計之前，一定要清楚Apple官網的關于iOS常見的設計原則，來在增強手機應用的可用性和吸引力。更多關于優秀的iOS界面設計，請閱讀《iOS人機界面指南》。

3. How to use colors in UI Design

顏色可以說在UI設計中至關重要。用的好，那就成功了一半，用不好，可能導致整個應用失敗。在你的配色方案中，最好只使用三種主色跳，使用的顏色越多。越難實現平衡。這篇文章不但提到基礎的用色知識加上實例解釋，還有常用的工具介紹。

4. 10 Best APP UI Design for Your Inspiration

每位UI設計師都夢想著做出最出色的界面（UI）設計， 能夠脫穎而出的手機界面設計則少之又少。設計師們在設計UI界面時，往往會參考來自不同設計師的設計，這篇文章列出了2017年最出色的的10個手機應用界面設計范例，給設計師們謀福利。

總結

移動設計不斷地在發展，如果你想跟上這個時代，你需要不斷閱讀和觀看高質量的教程或文章。在本文中，我收集12個最佳教程的示例來教初學者如何學習手機UI界面設計，希望你們能從中受益。

原文地址：Mockplus

作者：jongde

 轉載請注明：學UI網》“手把手教你設計”—12個最佳手機APP界面設計教程

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1). YONO.MP3 mobile app – 音樂軟件

*設計師：Anton Shmatko, Green Shark Studio, Pavel Khenkin

*軟件介紹：YONO.MP3是一款即可欣賞音樂, 也可收聽廣播節目, 了解最新時訊和趣事的手機端音樂軟件。它會是你閑暇時搜索和分享歌曲，歌手和專輯的理想工具。

*亮點：該款軟件采用了一個極具特色的配色方案 — 所有界面整體使用黑紅兩種顏色的對比， 經典而不失大氣。 而局部漸變色的使用, 也讓其功能和按鈕更加突出，極具層次感。而且, 軟件圖片, 按鈕和圖標的層級疊加, 也使整個界面更加的時尚柔和?？傊?，軟件界面設計整體簡潔漂亮而不失易用性。

2). Watering Tracker App – 生活類軟件

*設計師：Tubik

*軟件介紹：Watering Tracker app, 顧名思義，就是一款可以追蹤盆栽或植物的水分情況，及時提醒用戶澆水的生活類手機應用。

*亮點:首先，這種能夠監測植物水分情況，通知用戶澆水的創意，新穎且有趣。其次，界面背景和局部添加的綠色植物圖片使整個界面更加的直觀舒適，帶給用戶好心情。 當然，作為植物監測的工具，同時也設置了顯示各株植物水分，濕度，光照之類細節信息的功能區，即點即可了解到植物的具體生長情況，簡單易操作。而且，配色方面，黑色背景搭配白色和綠色圖片及按鈕，符合整個植物主題的同時，也更易于用戶接受和使用。

3). Listen – 音樂軟件

*設計師：CD UXT

*軟件介紹：Listen是一款致力于為喜愛不同音樂風格的用戶提供獨特且愉悅體驗的音樂軟件。整個界面設計簡潔清晰，用戶可以簡單的通過不同頻道（例如最新歌曲，電臺，主體和專輯等）和不同場景（例如駕車，運動，工作和約會等）快速的搜尋到最喜愛的歌曲。而且，軟件還特別為用戶提供了根據不同心情播放不同音樂列表的功能，更具個性?？傊?，喜歡閑暇時沉浸在自己的音樂世界的你，它會是你最佳的選擇。

*亮點：軟件整體采用經典的藍色背景搭配白色字體和同色系圖片，更加柔和舒適。一系列插畫風格 的場景和頻道對應圖片，也使整個界面設計更加美觀有趣。結合明亮陰影的圖標和按鈕讓軟件對應功能更加凸顯的同時， 更能易于用戶識別使用。 針對不同部件添加的靈活交互，也能夠使用戶具有更加流暢且愉悅的體驗?？傊?，它是一款以用戶愉悅體驗為基礎而設計的軟件原型，值得嘗試。（點擊這里查看原型詳情）

4). NightOwl Coffee – 咖啡預定軟件

*設計師：Queble Solutions

*軟件介紹：NightOwl Coffee是一款能夠幫助用戶根據自己的需要快速訂購各式咖啡的手機應用軟件。

*亮點：軟件整體采用了獨具特設的插畫風：主頁添加的由明亮顏色和各種幾何元素呈現的卡通咖啡機，可愛且切合主題。純色的背景搭配上灰色插畫以及黃色圖標和按鈕，使整個軟件界面更加干凈整潔，易于用戶使用。

5). Roomframes app – 管理型軟件

*設計師：Adrain Rudzik

*軟件介紹：Roomframe app是一款適用于iOS手機端的應用軟件，能夠幫助用戶記錄并珍藏他們所旅行過的地方的相關記憶，尤其是他們旅行中所居住過的房間的珍貴記憶。所以，從這方面來講，它是一款生活管理型手機應用。

*亮點：軟件多處使用了框架設計，方便用戶根據不同的旅店，工作區和相關新增地點，添加對應的日期，圖片和描述。其簡單的白色背景，使用戶信息更加明顯，也易于用戶隨時回顧或與家人朋友分享這些難忘的回憶。

6). iOS App Slide Car – 生活類軟件

*設計師：Melany Roa

*軟件介紹：iOS App Slider Car是一款專門針對iOS手機研發的應用軟件，能夠幫助用戶分類搜索各式汽車信息，并實現在線交易的一種手機端應用。同時，它也是一款能夠幫助用戶結交不同汽車愛好者的社交工具。

*亮點：簡單純色的背景，使用戶專注于汽車圖片，價格，描述和所有者等信息。搜索界面添加各種搜索參數，用戶簡單點擊即可實現汽車信息搜索?？傊麄€界面簡單，整潔而實用。

7). Karoline – 購物軟件

*設計師：Varduhi Adami

*軟件介紹：Karoline是一款手機端服裝購物軟件，提供了各類服裝的詳細信息和購買渠道。

*亮點：軟件整體的粉色系配色，柔和甜美，對女性購買者極具吸引力。所有界面以服裝圖片為主，更易于用戶根據喜好挑選。而且，添加的簡單且易識別的圖標和按鈕，方便用戶搜索和查詢相關服裝細節。軟件界面豐富，例如主頁，我的賬號，我的訂單，我的購物車，要請朋友，設置，購買等，能夠滿足用戶購買時各方面的需求。所以，如果你有通過手機在線購買服裝的打算，它會是不是錯的嘗試。

8).Space – 管理類軟件

*設計師：Doeun Shin

*軟件介紹：Space是一款能夠幫助用戶更加有效的管理日常生活的手機端應用。主要提供了兩項特色服務：早上，自動結合用戶的日常習慣，提供有用的日程管理信息和建議，例如交通和天氣情況等； 晚上，通過自動分析用戶語音日記，提供符合用戶心情的主體和提示音等等。

*亮點：該軟件以插畫風為基礎，添加了各式動畫按鈕及圖片，直觀生動。藍色主題，漂亮舒適，無論早上還是晚上使用，用戶都不會反感。而且，軟件本身添加多樣的功能性界面，例如語音日記，心情日歷，日常服務，節日簡介等等，簡單全面。總之是一款極具吸引力的管理軟件。

9).QuickBee – 廣告類軟件

*設計師：Monish Mohanan

*軟件介紹：QuickBee是一款廣告分類管理軟件，提供了生活中各個方面的信息，例如汽車，房地產，求職和教育等風方面面信息。使用者只需創建賬號，即可搜尋所需生活信息，了解流行趨勢，瀏覽各類特色廣告。

*亮點：軟件設計簡潔，顏色搭配極佳。彩色按鈕呈現多樣的生活分類，整潔美觀。各式框架呈現流行趨勢和特色廣告，簡潔有序。矢量圖標簡單易識別。添加多種界面，滿足用戶各方面的需求。

10).Wallet – 理財類軟件

*設計師： uixNinja

*軟件介紹：Wallet一款能夠幫助使用者理財的移動端軟件。

*亮點：軟件使用黑色，紅色和紫色三種顏色的對比和漸變，極具特色，漂亮時尚。簡易圖標和多色幾何圖形，是軟件界面更加簡潔使用，令人印象深刻。

結語

這些就是我們所搜集的10款最新的優秀手機端軟件UI設計作品。 希望他們不僅能給你新的設計帶來靈感，同時也能幫助你把握和預計2018年手機應用UI設計的發展趨勢。

原文地址：Mockplus

作者：jongde

 轉載請注明：學UI網》10個最新優秀手機應用界面設計實例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

費茨定律是人類運動的預測模型，主要用于人機交互和人體工程學。該法則預測光標/手指從一個起始位置移動到一個最終目標所需的時間（T）由到目標的距離（D）和目標的大?。╓）所決定，用數學公式表達為時間 T =a + b log2 ( D /W + 1 )。其中a、b是經驗常數，a代表手指開始到停止的時間，b代表手指的移動速度。

舉個生活中一個開燈的例子：

早期的開關只有一個手指大，每次開燈的時候都需要將手移動到開關上方，然后伸出手指調整到適合位置然后在按下。由于按鈕小，在沒開燈的時候你根本不知道它在哪里，需要不停的摸，所需時間就比較長。后期大家意識到了這個問題，將開關按鈕設計變大，人們操作時只需要將手移動到按鈕上方，由于面積大不需要調整直接按下即可，所需時間就比較短。

如何指導界面設計

費茨定律應用比較廣泛，其在移動界面設計中也有很好的啟發意義，結合費茨定律公式可以得出指導我們設計的三個要點：

1. 按鈕越大，所需時間越短

根據公式，當到目標的距離（D）一定時，目標大?。╓）越大，所需時間越短，反之越長。下面以支付寶的登錄流程為例，如下圖所示：

左圖是支付寶初始頁，該頁面主要讓用戶選擇合適自己的操作方式。因此在設計上采用登錄和注冊按鈕并排的方式，目標區域較小，給用戶充分選擇的時間。

中圖和右圖，界面中僅僅只有一個按鈕，其他注冊、遇到問題都可弱化用文字高亮的樣式展示，用戶在操作時基本不用想就知道點擊下一步按鈕。大大的減少了操作時間，讓用戶可以專注于登錄上。

2. 距離越遠，所需時間越長

當按鈕大小一定時，手到目標的距離越遠，所需時間就越長，反之越短。但是這里就發現一個問題，移動端如何判斷手到目標的距離呢？這里我們可以借用拇指熱區來進行判斷。隨著手機越來越大，不同機型的拇指熱區會有所差異，以iPhone6右手操作為例，它的拇指熱區。如下圖所示：

根據圖例可知綠色區域是我們手指最容易輕松達到的，橙色是伸長手指才能觸達，操作相對較難，紅色區域為難以觸及的區域。我們可以判斷手指到綠色區域的時間最短，到紅色區域的時間最長。因此在設計時我們需要將重要層級高的按鈕放到拇指熱區的綠色部分中，讓目標離手指越近，從而提高操作速度。如下圖所示：

以上兩個案例均是Feed流界面，在卡片中露出功能有點贊、評論、分享這三個按鈕，其中大眾點評這三個中點贊的重要性層級最高，因此將其放在綠色最易觸達區域，單手操作離手指距離最近，而分享和評論次之，因此將其放在了紅色和橙色區域，單手操作離手指更遠。

其中微信讀書這三個中分享的重要層級最高，因此將其放在最易觸達的綠色區域，單手操作更近。

3. 手移動越快，越易錯誤操作

其實不管你手的速度有多快，當距離較遠、按鈕較小時，當手移動到按鈕上方就會停下來進行定位然后才能準確得進行操作，如果只要求速度，手移動過來直接點擊有可能就點中不了按鈕，容易進行錯誤操作。

因此在UI設計中，如果我們想要用戶能夠快速操作，可以為用戶打破距離和大小帶來的限制，結合手勢操作來進行設計。如下圖所示：

以微信為例，在微信列表中為了讓用戶能夠快速操作列表，引入了手勢操作（安卓長按、iOS側滑），當長按或側滑列表時，就會在當前位置出現操作內容，提高操作效率。

在移動端界面中的應用

在實際交互設計中，合理使用費茨定律，可以讓我們的界面使用更流暢，錯誤率更低。下面我們一起來看看費茨定律的四大應用場景。

1. 來電顯示場景——不同狀態，不同設計方式

iOS的來電提示在鎖屏和蘇醒狀態分別采用滑動接聽和點擊接聽，可以很好的用費茨定律來解釋。如下圖所示：

鎖屏時：用戶手機場景不確定，很容易意外點擊。在設計時就需要增加操作距離、延長操作時間，防止誤操作的情況，采用滑動解鎖就可以增加操作的距離，放在該場景中使用較為合適。

蘇醒時：用戶正在使用手機，這時候采用滑動操作距離太長了，因此設計為按鈕的樣式，用戶可快速點擊接聽或拒絕，進而提高用戶操作效率。

2. 將返回浮于底部操作欄中——縮短操作距離和時間

隨著屏幕越來越大，拇指熱區也發生了變化，你會發現左上角的返回按鈕單手操作越來越不可能，尤其是Plus、iPhoneX的出現返回按鈕顯得有點雞肋。不過在體驗資訊類的產品時發現，部分界面他們將返回按鈕放到類界面底部左下角的位置，下面將這兩種進行對比下。如下圖所示：

以今日頭條的詳情為例，返回按鈕在常規的左上角。結合拇指熱區你會發現左上角的區域單手是很難到達的。對于資訊類APP需要不斷切換看的文章，返回鍵在左上角無疑加重了操作難度。

以虎嗅為例，他們將返回按鈕移動到了底部左下角，結合拇指熱區你會發現左下角的區域單手是可以輕松到達的，將返回按鈕放在底部，大大的節約了用戶操作時間。

需要注意的是，盡管通過分析，返回按鈕在左下角單手更好操作，但是有時候習慣真的是一件可怕的事情，比如我在華西醫院的微信小程序時，很少能夠記住點擊底部的前進和后退鍵，每次想返回上一級，就習慣性的點左上角，結果就直接退出小程序。如下圖所示：

、

面對頂部返回鍵單手不方便點擊、底部返回鍵又老是記不住點，同時在當前規范下又不適合大面積的使用，怎么樣才能幫助用戶操作呢？其實iOS按住左側屏幕邊緣向右滑既可以返回上一步，安卓自帶虛擬返回鍵都是較為快捷的操作方式。

3. 合理利用手勢操作——提高用戶操作速度

安卓的長按和iOS的側滑編輯大家都比較熟悉，他們多用在列表頁的編輯狀態，用戶長按或側滑列表，操作按鈕就顯示在當前位置，操作效率比較高，如下圖所示：

以天貓購物車為例，大家知道長按是安卓端常用的功能，側滑是iOS端的功能，然后天貓購物車這兩種功能都支持。其主要原因考慮到安卓用戶在使用蘋果手機時，可能不知道側滑的功能，因此在購物車的編輯中還加入了長按功能，讓用戶能夠更快捷的操作。

4. 將操作按鈕進行收納——阻礙用戶操作

在設計時如果控制不經常使用，或者想阻礙用戶操作時，就可以把操作按鈕放遠一點，同時在設計上可以將其收納，加大用戶到操作難度。如下圖所示：

以大眾點評詳情為例，在右上角并沒有直接放舉報到按鈕，而是放到更多到按鈕，一個原因是為了方便后期的拓展，另外很重要到一個原因是不想讓用戶舉報加深用戶的操作難度。

總結

本文主要分享了費茨定律在UI界面中的應用，結合今天的分析，總結起來主要有四個要點：

• 1、我們想要更容易點擊到目標，就需要將一個頁面的主操作按鈕放大。
• 2、我們想要讓用戶快速點擊目標，操作更方便，可以將目標放于拇指熱區輕松觸達區域。
• 3、我們想要讓用戶快速移動時，就可以利用手勢操作，它打破距離和大小的限制，從而讓用戶可以快速操作。
• 4、我們不想要用戶操作或不常用的控件時，就可以將按鈕進行收納，加大用戶操作距離，從而增長用戶的操作時間。

參考文獻：

Technical Artist的不歸路 —— 費茨定律(Fitts’s Law)在UI設計中的使用  

設計法則： Fitts’ Law / 費茨定律（費茨法則）

《通用設計法則》立德威爾著   朱占星 薛江譯 中央編譯出版社 2013年9月北京第1版

原文地址：海鹽社（公眾號）

作者：風箏KK

轉載請注明：學UI網》費茨定律如何指導界面設計

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

Part1 界面設計工具的發展歷程

• 1. 第一階段是最早期界面設計領域剛剛起步，設計師普遍使用PS來制作界面。但PS是一個全面的而非專門針對界面設計的工具，因此界面設計師在界面的繪制、文件的交付上都存在一定不便。
• 2. 第二階段是Sketch的出現。雖然Sketch是一款Mac端軟件，但其作為一款專門針對界面設計的工具，以其高效、小巧的優勢迅速占領界面設計市場，逐步取代PS成為各大設計團隊的首選。由于Sketch在動效制作方面的欠缺，出現了Principle、Flinto、Protopie等專門設計界面動效的工具，一般設計師都會將其搭配使用。
• 3. 當前階段各種新興設計工具如XD、Figma、Framer Web逐漸走進設計師們的視野，它們專注于界面設計領域，不斷挖掘和突破Sketch的短板，為設計師們打造更良好的使用體驗。

Part2 界面設計工具的未來發展趨勢

界面設計工具的發展改變著設計師們的工作方式。界面設計工具也漸漸從單一專注設計本身向云端性、協作性、通用性發展，旨在實現更高效的設計生產活動。

1. 云端性

隨著云計算的發展，界面設計工具也在逐步走向云端化。設計從本地轉向云端，不再依賴于本地硬件的性能，云端的計算能力讓使用性能得以提高。設計也不再受時間和空間的限制，只要有網絡，設計師可以隨時隨地的工作，臨時使用其他電腦工作時省去了安裝軟件、同步設計文件的麻煩。

2. 協作性

3. 通用性

Part3 界面設計工具推薦 

1. UI工具篇

1）Windows用戶也可隨心使用

2）云端文件使用不卡頓，支持離線編輯

Figma創建的文件全部存儲在用戶的云端賬戶中，不占用本地內存。當文件過大時，sketch會出現卡頓現象，拖拽一個圖層都會變得很困難。而Figma對本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。

3）一鍵導入sketch文件

4）更強大的組件功能

Figma和Sketch都擁有組件功能。當原始組件更改時，復制組件就會同步變化，在這點上二者是相同的。但Figma在組件邏輯上比Sketch更進一步，復制組件可以靈活處理與原始組件的同步關系。當設計師修改復制組件的樣式時，原始組件不受影響。此時二者的關聯邏輯仍然存在，當再次修改原始組件，復制組件仍然會同步變化。相比于Sketch，Figma把組件做的更加靈活限制更少。

同時Figma也在不斷優化其組件功能，在Config Europe大會上，Figma預告在今年11月會正式上線組件Variants功能。該功能是將一系列有關聯的內容生成一個Variants組件，在使用時可以直接通過識別出來的組件屬性改變組件樣式。其優勢在于使用組件時可以更輕松的切換所需組件的不同狀態,再也不需要像在sketch中一樣逐級尋找了。

如下圖中的按鈕組件，設計師可以將所有的按鈕狀態都列舉出來并按層級、顏色、狀態、大小命名。然后選中所有按鈕將其組成一個Variants組件。

5）與代碼緊密結合

6）一鍵恢復歷史版本

7）團隊協作

除了設計師之間的協作，Figma也有效提高了設計評審的效率。與在工作群截設計圖標紅再描述相比，Figma的評論功能使得同事可以在設計文件中實時標注討論方案，提高了線上評審效率。

2. 動效工具篇

Framer Web的核心亮點是什么？

1）網頁端全平臺可用

相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦，Framer Web是一款基于瀏覽器的在線設計工具，因此windows用戶也可以安心使用。同時個人版本免費，大大降低了設計師的使用成本。

2）文件導入

Framer Web可通過import選項導入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動效。

3）輕松實現復雜動效

Magic Motion與principle、keynote的動畫實現原理類似。當你選擇目標元素添加了交互行為后，可以在Magic Motion中選擇一個過渡方式。只要兩個畫板中的元素名稱一致且在不同面板中擁有不同的形態，那么在畫板切換時該元素就會生成補間動畫發生相應變化。

4）從設計到代碼

目前Framer Web 已經可以實現導出相應動效代碼，但導出的效果仍有待完善，只是可以導出Transiton的參數而已。

Framer Web放棄了攻占界面設計領域的策略，轉而和Figma官方達成積極的戰略合作，專注于做專業的動效設計軟件。因此Framer Web非常適合和Figma搭配使用。隨著產品策略的調整，相信在不久的將來Framer Web還會為設計師們提供更豐富、高效的動效設計功能，非常值得期待。

3. 插件篇

4. 協作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研發的高效設計協作平臺。XSHOW連接了產品經理、開發等各個不同工種，提高了設計資源輸出和分發效率。設計師將設計文件上傳到XSHOW，就可以將文件鏈接分享給產品經理、開發等同學。

產品經理在手機小程序上就可以預覽方案，設計師每次更新的方案也可以直接預覽。開發同學可以直接查看標注和切片。同組設計師也可以直接下載源文件、甚至查看歷史迭代版本。

XSHOW是如何實現高效協作的？

對于設計師

1）可視化上傳文件

2）記錄所有版本迭代，輕松找回第一稿

3）靈活豐富的分享權限

對于項目管理者

1） 直觀了解團隊輸出,組建團隊展示能力空間

2）方案變更及時知道

 

1 

3）便捷組建項目和管理團隊成員

對于合作產品經理或甲方

1）多端查看更方便

 

2）查看歷史變更

Part 4 結語

原文地址：騰訊ISUX（公眾號）

作者：ISUX

Illustration: Outcrowd

1、構思儀表盤界面的大腦

讓我們深入研究設計解剖學。儀表盤的“父母”是客戶端、設計人員和開發人員，每個組件設計都需要他們的合作產出，所有關鍵點在一開始要做出說明。

智人是由胚胎發展而來的。首先形成的是腦細胞和神經細胞，然后是身體的其他細胞。這正是任何可行的項目應該遵循的方式。第一個階段是最重要的。如果你忽視這個階段，再花哨的設計也不能挽救局面。這正是為儀表盤的長期發展奠定基礎。

儀表盤如果會說話的話，它會問“我為什么出生？誰需要我?“。

試問你能回答嗎？因此你需要明確:

• 儀表盤將如何助力公司目標?
• 什么結構，功能和視覺效果將幫助儀表盤服務好用戶?
• 哪種設計最適合目標受眾?

這些問題的答案將構成你的設計理念基礎。

Perls

儀表盤中沒有瑣碎的細節。

儀表盤顯示的信息應該使用戶能夠做出決策。設計師的工作是幫助用戶解決問題，而不是讓他們使用一堆很酷的小工具。任何對目標不起作用的事情都會與目標背道而馳。

從項目的最初階段到最后階段，設計師必須關注公司的目標、儀表盤的目標和用戶的目標。

否則，儀表盤將永遠不會做的更好。

Clover

2. 數據及關鍵指標選擇:循環系統

儀表盤數據就像循環的血液。我們必須理解它們來自哪里，當用戶需要它們時如何處理，以及應該如何可視化。

設計師需要理解數據的目的。顯然，這將幫助他們選擇合適的組件，但還有更多的工作要做。例如，用戶希望在屏幕上看到大量不同的讀數。你不需要移除任何東西來清除一些空間，但你可以做的是突出最重要的元素，并在視覺上“弱化”次要的東西。然而，要做到這一點，你必須知道數據的優先級。

Bidding Car

最重要的指標是哪些數據能幫助達成目標。例如:

• 顯示實際成功率;
• 影響產品的感知方式;
• 激勵創造產品的團隊。

參數的選擇也需要了解用戶。用戶應該看到哪個關鍵指標，他們認為什么樣的可視化表現最容易理解？

人們喜歡看到與他們的目標相符的數字。

Panch

3. 儀表盤結構:骨架

想象進入一個酒店房間，看到一張床，一張桌子和椅子，一面鏡子和一個壁櫥。甚至不用打開壁櫥，你就能猜到里面有什么。吹風機、拖鞋和毛巾都在你想要的地方——有人確保了這些。一個好的儀表盤就像那個房間。它是干凈的，整潔的，可預測的。你馬上就能看到所有的要點，憑直覺知道在哪里可以找到其余的內容。

設計師有自己的工具來確保整潔。

1) 層次結構

首先，你得整理思緒。在開始設計之前，一定要對所有數據進行排序，將其分類，了解什么是最先發生的，什么是最后發生的，接下來是什么等等。確定用戶必須馬上看到的關鍵內容。

視覺層次結構必須反映信息層次結構。

數據層次結構通過小組件的大小和位置表示。如果你的讀者從左到右閱讀，關鍵信息必須放在左上角，最不相關的信息將在右下角。

對數據排序的方法將取決于儀表盤的用途。重要的是根據信息的優先級組織信息，并創建邏輯場景。

把信息面板看作是一個故事，而不是一系列數據點。

2) 網格

網格對于創建頁面的總體布局、排序、平衡和對齊元素非常有用。

3) 信息模塊

模塊系統類似于公寓的分區。臥室是用來睡覺的，餐廳是用來吃飯的——每個區域都有自己的功能。你的舒適度取決于他們所處位置的便利程度。糟糕的布局不能通過裝修或家具來修復。相應地，必須提前考慮模塊劃分。

模塊幫助顯示內容層次結構，根據數據的重要性、相關性和邏輯連接對數據進行分組。每個模塊都應該在給定的流程中服務于特定的目的。

4) 連續性和接近性

如果你去廚房需要經過有兩扇門的走廊，這是一個糟糕的布局?；ミB的流程假定邏輯接近。如果一個模塊中的流程需要來自另一個模塊的信息，那么布局上應該保證數據的連續性。這一點必須提前考慮，這樣用戶就不必在晦澀的存儲空間中尋找他們需要的信息。

Illustration: Outcrowd

所有相關信息都應按重要到不重要的順序進行分組，并就近放置。

5) 分離模塊

沒有人需要一個延伸到臥室的廚房。為了將一個模塊與另一個模塊分開，你需要負空間。確保從一開始就考慮到這一點:將負空間視為需要視覺平衡的設計元素的組合。

Wingle

4. 功能:肌肉

功能和工具的數量由儀表盤的用途及其用戶的關鍵目標決定。

要想自由活動，人類只需要兩條腿，狗需要四條腿，蜘蛛需要八條腿。一個功能太多的儀表盤就像一條六條腿的狗一樣，這有點令人毛骨悚然。

不要在控制面板上放置過多的工具。用戶只需要手邊有必要的東西。過多的可用工具會讓人們感到困惑，并嚇走他們，因為它看起來太復雜了。個性化總是比標準化好。

Band

5.小組件:重要的器官

如果屏幕上有超過5到7個小組件，人們就很難理解內容。因此，我們的工作是讓相關數據易讀，但不過量。用戶應該在幾秒鐘內理解他們所看到的內容。

數據可視化工具包括:

• 表格
• 圖表
• 示意圖
• 卡片
• 指標
• 地圖
• 圖片
• 分組
• 篩選器
• 列表
• 選擇樹

Activity

小組件的選擇取決于儀表盤的用途和用戶。想想以下幾點:

• 哪個組件能最好地顯示一個特定的KPI?
• 用戶可以立即看到什么?
• 哪個組件是用戶最容易理解的?
• 什么可以幫助用戶更快地找到他們需要的東西?

選擇易于理解和閱讀的小組件。

這里是一個令人困惑的小組件的例子:

想想主要的“目標”來吸引用戶的注意力。例如，如果你的優先級是績效目標，你應該使用數字;如果你需要比較值，用直線或柱狀圖會很好;為了激勵團隊，可以使用帶有相關亮點的排行榜。

不正確選擇的小組件或默認小組件模板可能會使用戶混淆或導致他們誤解數據。

最好的解決方案是分析和測試的結果。

最好的小組件設計是極簡和易于閱讀的。例如，一個3D圖表可能看起來令人印象深刻，但它占用了用戶太多的注意力，最終證明會分散用戶的注意力。這也適用于漸變、過度使用顏色和過多的細節。

6. 視覺設計:一般技巧

我們已經創建了儀表盤的思想和身體。唯一要做的就是皮膚——最外層。這可以根據優秀設計的基本原則來實現，但仍有一些新的需要注意的細節。

1) 簡單

儀表盤應該像你喜歡工作的桌子一樣干凈:它必須只有必要的文件和工具，沒有干擾。

MEMO

2) 顏色

儀表盤顏色的選擇必須有一個目的:盡可能清晰地顯示信息。顏色跨度越大，就越難把數據展示清晰。所以不要讓儀表盤的顏色過多。使用同一顏色的深淺是一個好的辦法。

首先要選擇底色，然后是補色。每種顏色都必須有特定的用途。一種顏色可以用來組合元素，另一種顏色可以用來高亮。顏色還能體現一個元素是積極的還是消極的。

避免使用可能有負面含義的顏色。例如，在這個例子中，紅色看起來像是代表壞的和不受歡迎的東西:

如果儀表盤提供了可定制的顏色，確保所有可用的選擇看起來都比較舒服。

選擇顏色組合的一個好工具是Adobe color CC。

3) 突出

語義高亮應該與視覺高亮相對應。為了突出一個元素，你可以使用顏色(對比度，亮度)，形狀，大小，負空間等。

4) 可讀性和數字格式化

這是確保視覺清晰度的重要因素:干凈的布局，視覺層次，重點突出，對比元素，適當的字體，這些字體也必須具有對比性和易讀性。

高精度的數字格式很難理解。最好把所有的數字都四舍五入，然后把較長的數字尾巴去掉。

7. 適應性

在實踐中，當用戶優先考慮桌面版本時，在移動版本之前創建網頁版本是合理的。如果你的目標用戶主要使用的是手機版本，那么你可以先從移動設備著手構建儀表盤，然后再開發桌面版本。

Snap

總結

設計一個好的儀表盤不是一件容易的事情。我們把它比作人類的發展，因為它是一個很好的方式來呈現重要的東西。當你在設計儀表盤時，請不斷地問自己:是否一切都已就緒？有多余的肢體嗎?身體的各個部位協同工作嗎?用戶會喜歡這個結果嗎？它有用嗎？

正如你所看到的，視覺設計實際上是設計師最不應該擔心的事情。

最后，彩云再分享一組常用的后臺圖表界面組件庫，相信會對大家的日常設計工作有幫助，

本文翻譯已獲得作者的正式授權。

原文地址：medium

作者：Erik Messaki

譯文地址：彩云譯設計（公眾號）

譯者：彩云Sky

轉載請注明：學UI網》后臺界面設計的7條原則

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

背景

活動類項目由于具有玩法時效性強的特點，經常需要快速上線，但是需求變更頻繁、方案難以達成共識、上線物料被忽略等“地雷”遍布項目進程之中，如果不幸“踩到引爆”，必然嚴重影響上線速度。交互設計師作為項目鏈條中承上啟下的重要一環，可以通過提前介入、專業支撐等“排雷”策略對項目高效準時上線起到十分重要的促進作用。

筆者從2019年全面負責網易云音樂會員營收活動的交互設計工作，對從交互側保證活動類項目高效協作和快速上線有一些思考?，F按照一般活動類項目必經的項目立項階段、項目執行階段、項目收尾階段來梳理出影響活動快速上線的“地雷”，并且輸出對應的策略，希望對其他做活動類項目的交互設計同學有所幫助。

一、項目立項階段

項目立項階段主要有兩個“地雷”，一個是運營玩法和策劃需求變更，一個是業務細節和熟識度不足導致的設計返工。交互設計師可以通過提前介入、整體活動邏輯可視化的梳理來避開“踩雷”，下面將分別闡述。

1.排除“運營玩法和策劃需求變更”的地雷

提前介入，從用戶體驗和開發成本角度管理運營玩法和策劃需求。眾所周知，一個活動從發起到下線流程如下圖， 筆者一般是在運營立項階段就開始介入項目，這個階段運營往往會有很多玩法的腦爆idea，且開發資源尚未介入，交互設計師一定要站好這個節點的“崗”，防止有紕漏的玩法方案溜進需求池。

提前參與玩法需求討論可以讓我們更全面地了解活動目標、針對人群，以及運營想推的活動玩法，在想法產生之初通過交互設計師的專業建議使活動玩法更加落地可行、體驗優雅、帶來更多轉化，降低返工可能性，提升上線效率。此時交互設計師一方面要站在用戶體驗角度上跟運營說明哪些idea會增加用戶認知和操作成本，降低活動轉化率，以及優化建議；另一方面站在開發角度跟運營說明哪些想法開發成本高，可能在限定的日期無法上線，如果堅持要做的話，需要與開發同學確認技術方案或申請更多研發資源；第三方面是基于交互設計師對用戶心理學天然的了解，建議運營同學如何在活動中利用誘餌效應、從眾效應、目標階梯效應等方法提升用戶的轉化。

大家一定要謹記“提前介入”，否則等idea經過運營策劃立項后推進到交互階段發現問題要修正的話，會浪費極多的項目時間和團隊精力。一方面是因為重新組織各方討論的協調難度很大；另一方面是因為運營和策劃已為玩法需求付出很多時間和精力，過程中必定相互洗腦要推的方案是可行且完美的，說服他們接受新修改意見的溝通難度和耗費的時間成本可想而知。

2.排除“業務玩法、技術方案等理解不足導致設計返工”的地雷

活動立項之后，盡可能地梳理完整的業務流程圖、功能流程圖。對于一些復雜的活動，業務流程圖一定要輸出（也可以和策劃協作一起輸出，或者規定讓策劃同學輸出）。梳理業務流程圖的過程就是理解活動玩法的過程，將運營用文案表達的玩法規則進行可視化。業務流程圖可以讓各方對活動玩法、流程、功能狀態流轉一目了然，便于讓各方發現新的問題點，及時修訂。梳理功能流程圖是促使策劃和開發將項目中所應用功能的技術方案一一確認，減少后續設計階段的變數，增加輸出設計文檔的確定性。

如果對規則和玩法復雜的活動沒有清晰的理解就盲目開始設計，很容易囿于細節而失去全局概念，后期如果規則玩法、活動流程或技術方案稍改就會被推倒重來，做很多無用功，耽誤上線時間。

二、項目執行階段

項目執行階段主要有三個“地雷”，一個是設計方案輸出效率低，二是各方信息沒有對齊，三是開發過程中各方溝通不順暢。交互設計師可以通過模塊化的組件設計、組織交互評審會和及時跟進開發測試中的突發問題來避開，下面將分別闡述。

1.排除“設計文檔輸出效率低”的地雷

在以往的活動中，我們搭建的活動配置后臺里已經沉淀了很多復用性高的組件，可以用組件像樂高積木一樣快速搭建普通活動，這種方式可以極大的提高活動上線效率。

一些新玩法活動現有組件無法滿足，需要梳理后設計控件的樣式（采用按鍵、熱區、上下結構、左右結構等）。組件交互設計的優先級是：穩定性-易用性-拓展性。所謂穩定性是活動組件設計的第一大原則，需要交互設計師盡量保證組件邏輯簡單、開發難度低且能承受活動短時間高并發環境的壓力，這樣才能保證開發同學在較短時間內快速上線且bug少。所謂易用性是易于用戶理解和操作，這直接關系到用戶在此組件觸點的轉化率。所謂拓展性是兩方面：一是后續可以應用到其他活動中，二是為活動的視覺設計階段保留了更多樣式發揮的可能性；拓展性強的組件可以在后續活動配置中持續使用，長期來看可提升活動上線效率。

2.排除“各方信息沒有對齊”的地雷

交互評審是促進各方信息對齊的最最重要的掃雷秘訣。因為交互設計師需要將運營玩法、產品需求、業務邏輯，以及用戶體驗相結合，轉化為各方可見可理解的低保真模型，所以交互評審十分重要，即使時間再緊也不可或缺。

交互評審的目的是讓運營、策劃、視覺、前后端開發、測試同學更加直觀和形象的了解活動上線的大致呈現效果。運營和策劃可以據此判斷方案是否符合他們的需求，視覺可以構思活動頁面的裝飾元素和視覺風格，研發可以據此確定前后端接口、評估開發工作量和預估工時，測試同學可以以此來進行測試用例的輸出。

評審方案的時候有兩個技巧可以提升評審效率。一是按照活動前中后三個階段來給大家進行講解，這樣會讓各方更易理解。二是前端組件樣式和對應的后臺配置一起講，這樣不僅可以方便運營同學知道如何配置，和各配置項在前端如何展示，也方便開發同學快速梳理數據接口和核對參數。

交互設計師針對會上的功能點實現問題、前后端配置問題等暫時不能確定的，會后一定要拉各方核對定稿。即使活動上線周期十分緊急，也一定要進行交互評審，磨刀不誤砍柴工，千萬不能為了省時間而省略該步驟，否則各方在信息沒有對齊的情況下按自己的想法推進，一旦出現執行偏差，必將需要更多的時間來彌補。

3.排除“視覺、開發和測試過程中各方溝通不順暢”的地雷

視覺設計過程中，視覺同學對活動控件有新的想法或做了方案調整，需要及時溝通確認調整后的方案僅僅是樣式的變更還是修改了控件的邏輯或字段，一方面需要確定視覺改動是否可接受，另一方面如果改動控件邏輯或字段的話需要找對應開發同學溝通，看是否增加開發難度和工作量，是否會影響上線時間。

開發過程中，開發、測試同學中對于交互文檔中的細節有疑問時，交互設計師需要及時答疑。部分功能或流程因為技術實現問題或開發周期問題，需要組織各方溝通討論出新的替代方案時，交互設計師要對設計方案進行及時修訂并將修訂記錄同步全組。

測試驗收過程中，測試同學完成第一輪冒煙測試后，交互設計師就可以進行交互走查驗收。第一，將走查發現的問題創建驗收清單，采用有道云協作來創建截圖、問題、終端、備注的表格，將走查過程中發現的問題整理進去，便于測試、開發同學查看和跟進。第二，確定修bug的優先級，按照普通用戶參與活動路徑設立優先級，及時跟進和更新修bug的結果，上線前一定要再走查一遍，防止一些修好的bug復發和一些修bug過程中新產生的bug。第三，關注高并發壓測環境下可能出現的問題，如果時間緊急沒法變更技術方案，就需要通過采用用戶體驗的方法來進行引導或補救。

為了保證各方溝通順暢，除了及時跟進處理各方遇到的問題外，交互設計師需將每日跟進的溝通結果和修訂記錄在項目組里同步。這樣一方面讓運營、策劃、開發、項目管理等各方了解項目最新變動和進度；另一方面營造一種大家共同推進活動的感覺，讓項目組同事更愿意相互協作配合工作。

三、項目收尾階段

項目收尾階段主要是物料準備不充分的“地雷”，交互設計師可以通過走查物料準備情況來避開。

排除“物料準備不充分”的地雷

活動項目中有很多物料需要準備，在線上活動項目中設計師需要重點關注的是活動冷啟動階段前置假寫數據的準備和上線預演。假寫數據的益處顯而易見，例如在某些活動中前置假寫的彈幕數據可以在冷啟動階段很好的營造場面熱烈的氛圍，激勵用戶“從眾心理”參與活動，但在真實數據進入后要立即清理掉假數據避免造成用戶信任危機。

活動上線前各方聯調時，由于大家都忙于走查功能、合并代碼、準備預發等，經常會出現假寫數據準備不充分或者遺漏的情況，這個階段交互設計師一定要檢查到位，并且確定假寫數據的上下線策略。

總結

交互設計師也可以在整個項目過程中實時收集各方從項目立項到項目收尾過程中對活動項目的想法和建議，包括玩法策略、業務邏輯、交互視覺設計、開發過程等，一些好的建議可以在后續開發中推行，讓項目協作更加順暢，項目上線更加快速高效。

以上是我在近兩年時間參與活動類項目過程中，交互設計師促進活動類項目快速上線的一些經驗沉淀。雖然不同公司、項目在活動流程、團隊協作中有所差異，但交互設計師在項目前、中、后階段遇到的“地雷”大致相似，希望對大家有所幫助。

轉載請注明：學UI網》為了活動快速上線，交互設計師是如何“排雷”的？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

二、看優秀的交互文檔 

目前我覺得交互流程標注比較好的展示方式，是按照一個主流程在一個站點地圖/畫板的形式展示。當一個主流程中存在幾個支線操作流程時，可以分別在一個站點地圖/畫板中，展示出來。同時用標題區分說明分支流程的操作名字。如下圖所示：

全局斷網：一般是在首頁使用tips提示。用戶在其他界面點擊操作時，也會出現toast反饋提示用戶。也有一些app在用戶進入出現對話框提示用戶網絡異常。相對于對話框，使用tips對用戶的干擾更小。

操作成功：一般操作成功都是根據具體的使用場景對出對應的提示。

操作失?。?/strong>異常情況導致操作失敗，這時需要統一的提示，通常使用toast，也有一些使用對話框強提示用戶。

加載：涉及到全局加載和局部加載，全局加載在設計中要統一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區域加載等。

空數據類型一共有三類：

1.初始狀態的定義：初始化狀態，沒有任何內容，需要用戶進行某種操作才能產生內容的界面。

2.清空狀態的定義：通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。

3.出錯狀態的定義：由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。

 

三、思考設計背后的邏輯 

平時在使用產品時，學會思考設計背后的邏輯。以一個美團設計的為例：

美團首頁改版將用戶下單的狀態顯示在首頁。

這樣的改版，作為設計師或者產品經理，應該從兩方面來看待這個事情，即從產品訴求和用戶訴求雙方面來看待，從兩個方面看待得到的結果是迥然不同的。

產品訴求角度：新版將用戶下單的狀態顯示在首頁可提升首頁訪問深度和曝光率。

個人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。

以前用戶查看訂單狀態都是只能去訂單頁面，路徑較長，且訂單頁面沒有產品曝光，無法進行其他轉化，流量無法被多次利用。

所以將用戶的訂單狀態這種高頻操作放置于首頁，可利于其他業務的曝光。

美團的吃喝玩樂，其他業務被用戶查看的概率提升。對產品來說是有巨大的好處。

用戶訴求視角：將用戶訂單狀態放于首頁，用戶的使用場景，會不時的查看訂單狀態，放置于首頁可方面快捷的提供用戶查看訂單狀態，對用戶來說體驗好。

從用戶訴求和產品的訴求來看，這次改版應該是很優秀的。

但是脫離于個體業務，從產品全局來看，這種設計的邏輯方式，會讓用戶對于app的信息的尋找邏輯進行顛覆和破壞。

以后是不是重要的東西都可以放置于首頁？如果這個改版開了個頭，以后其他業務也都有這個訴求，整個產品的生態都會失去控制。

 

四、總結設計方法 

在工作中可以嘗試總結一些設計方法，提升設計能力。

之前我總結了以下5個方法，可以助力設計師做出優秀甚至驚艷的設計方案。分別為：

1、拆解設計需求

2、分析線上數據

3、窮舉設計方案

4、切換用戶視角

5、競品方案對比

 

1、拆解設計需求

設計師接到的設計需求，大部分情況下是通過產品經理那里獲得的。而產品經理的原始需求來源于：業務方、用戶和老板。

產品經理會將原始需求進行整理，從而轉化成產品需求，在這一過程中產品經理可能會出現對原始需求的理解出現偏差（范圍擴大、范圍縮小或者是方向錯誤）。

設計師如果直接拿著產品需求就開始做設計，可能會導致設計方案不符合業務需求。所以設計師進行設計前，最好也了解原始需求是怎么樣產生的，這樣才能做到心中有數。

掌握原始需求和產品需求后，接下來就要對需求進行拆解。

舉個小例子：設計這邊接到了一個產品需求，需求為：為降低產品占用用戶手機存儲空間。優化線上清理緩存功能，提升用戶完成清理緩存的成功率。

通過這個產品需求可以看出，設計師要做的就是提升清理緩存流程的成功率。但是從原始需求可以看出，真正核心需要解決的則是如何降低產品占用用戶手機存儲空間。

所以設計師的方案可以從4方面入手：

• 提升清理緩存的成功率；
• 和開發溝通，是否有更好的更改緩存機制；
• 通過設計的手段引導用戶清理緩存垃圾等。
• 是否可以增加自動清理功能。

這樣的話，設計方案才能更好的服務于產品和用戶。

 

2、分析線上數據

當我們拆解了設計需求后，接下來就需要分析線上數據，看這個業務相關的數據情況怎么樣？

分析數據情況，然后思考線上布局的合理性，然后進行布局設計和流程設計。

舉個例子，在某個操作流程中，發現有一個步驟，用戶操作流失率很高，這時候我們就要分析為什么這一步操作流失率高。

例如注冊流程/綁定銀行卡的過程中，總的轉化率只有0.06%，用戶完成率過低，如果要優化整個用戶注冊操作流程，那么需要找出流失過大的節點進行優化。

從數據可以看出有兩個失敗率最高，分別為：注冊流程和綁定銀行卡流程。

這時候設計師就要分析整個注冊流程和綁定銀行卡流程。哪些設計因素導致成功率低。并針對成功率低進行針對性的布局優化和流程優化。

 

3、窮舉方案方式

當設計出一個方案時，則需要對完成的方案進行窮舉，發散出更多的方案，最后從眾多方案中找到一個更完美的方案。

以表單設計為例。常見的設計方案，是將所有的表單內容按照分組的方式，進行排列，如下圖所示：

但是這種方案存在一個問題，用戶進來之后，發現有大量的信息需要填寫，填寫壓力大，導致用戶的填寫意愿變弱，導致提交成功率降低。

接下來就要嘗試其他方向的設計思路，通過窮舉法可以想到的有分步設計和將表單填寫內容隱藏到下一級界面，從而降低用戶填寫壓力提升用戶的操作成功率。

下圖左邊為分步設計，右圖為表單信息隱藏到下一級頁面。

 

4、切換用戶視角

設計方案確認之后，這時候有一步很關鍵，就是我們要將自己想像成小白用戶。

我們以小白用戶的視角去審視方案?？纯从袥]有不理解的地方。

為什么要有這一步呢？

因為我們設計師在設計方案的過程中，會默認一些設計規則邏輯，而這些規則邏輯用戶是不知道的。

這就導致了我們設計師覺得這個方案可行。但是普通用戶卻不知道這個規則邏輯，導致我們的方案用戶看不懂。

當我們切換用戶視角發現方案存在的問題后，再嘗試如何讓用戶更好的理解的前提下去優化方案。

 

5、競品方案對比

為什么我將競品方案放在后面呢？

如果做設計之前就參考競品，那么就容易默認為競品的方案是標準的，是優秀的方案。

會不由自主的按照競品的思路去做設計，最終導致的后果就是和競品方案相似。

由于我們和競品的人群，業務背景等方面都不相同。

競品的設計方案基于開發或者老板等業務背景，才不得已使用非優秀的方案，我們如果參考競品的話，最后的結果也可能難以做出優秀的方案。

當我們的設計方案做好之后，這時候我們就可以分析我們的設計和競品的區別和差異性，從而得到靈感， 優化出更好的設計。

 

五、項目復盤 

項目復盤的意義：

1、提升設計師多種設計方法能力

2、提升設計師整體設計思維推導能力

3、提升設計師整體匯報、述職和晉升答辯能力

所以在工作中，每做完一個重要項目都要做好項目復盤。這樣的話，既是是階段性工作的總結，也是為下一次做項目提供更好的經驗。

復盤的方法有多種，可以結合設計方法來做總結，在復盤的過程中，要體現最終的結果，即通過數據或用戶反饋對我們設計驗證。

也要總結其中的不足，為之后工作中避免踩坑，并更好的為以后的工作提供服務。

以上就是交互設計從入門到精通的5個途徑，如果你有其他想法，歡迎在評論區留言。

 

原文地址：Echo的設計筆記（公眾號）

作者：Echo

轉載請注明：學UI網》交互設計從入門到精通的5個途徑

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司