如何基於開發的視角進行產品設計？

既然UI設計師的主要工作是交付，那麼學會以開發的視角和分析方法來進行設計將非常重要。

面對完全不一樣的媒介，設計師們會有不一樣的目標，也會使用不一樣的手法進行設計。 比如說一名UI設計師與平面設計師的最大區別，大概就是在於UI設計師能夠以開發的視角來做設計。

UI這個詞或許聽起來非常新潮，但是User Interface這個片語及其含義其實很早就已經出現了。古時候的設計師使用GIMP對用戶界面進行設計，後來我們使用Photoshop進行這項工作，而現我猜大多數UI們都已經用上了Sketch。

UI設計與其他的一些設計行當最大的一點區別就是，UI設計師輸出的並不是最終的作品，他們通常還要把自己的設計先交付給開發，而且交付這個過程非常重要。

你怎麼去設計以至到你怎麼輸出你的設計將會直最終的產品產生重大的影響，所以對於這種媒介（software），設計師會面對的問題將會面對什麼樣的新問題。開發使用他們的開發工具（iOS的Xcode、Android的Android Studio等等）按照你的設計來構建界面的的方法和思路會與你在使用Sketch來設計UI的思路非常不一樣。所以，既然UI設計師的主要工作是交付，那麼學會以開發的視角和分析方法來進行設計將非常重要。

開發眼中的設計稿長什麼樣

人們總是會帶著自己既有的知識和以往的經驗來分析客觀事物，開發眼中的設計稿跟設計師眼中的設計稿差異其實非常大。開發通常以視圖(Views)為單位排布各個元素，Sketch裡面的Symbols功能和Group的概念其實與視圖的概念非常相似，都是事先規定好樣式與屬性，然後再在需要的地方重複使用。

當然了，開發在使用他們的工具(Xcode、Android Studio等)來控制布局，構建我們的UI肯定不會像你在Sketch裡面來得那麼簡單直接，但是設計師並不需要實際地去學習如在使用這些工具來對UI進行構建（當然如果你感興趣的話，深度地了解一下這些又遠又近的知識對你將有非常大的裨益）。我們可以將視圖想象成一個類似於Sketch裡面的Symbols或是Group的東西，樣式、邊框和大小都被規定好了，然後各個不同小視圖以合乎道理的層級和順序構建成我們的理想中的界面。

拿Apple Music舉個小栗子。Apple Music的專輯頁面大致可以分為三個大視圖：

• 最上方的專輯詳情區域。
• 中間的歌曲列表頁。
• 我們熟悉的tab bar。

這三個大視圖之中又包含了從屬於自己的小視圖，譬如說專輯的照片就是屬於專輯詳情區域的視圖，每個歌曲list也是屬於歌曲列表視圖內的小視圖。

上面那個充滿了藍色框框的圖顯示的是每個視圖的邊界，Sketch裡面可不會給你顯示這些東西，不過我們有Zeplin和Sketch measure這樣的插件幫助我們標註並輸出每個圖層的邊界大小，這對於實際開發來說非常有幫助。

我們再來觀察一下tab bar在Sketch裡面的圖層結構。

這樣的排列是比較接近在開發環境下搭建UI所使用的結構的。有太多的設計師並不會將圖層整理得那麼整齊，認為這並不影響視覺效果。這的確不影響視覺效果，但是這有可能會嚴重影響交付效果。所以下一次畫UI的時候請盡量合理地安排好圖層的結構和從屬關係，多去閱讀各個平台和系統的設計規範，別使用奇奇怪怪的數字來定義元素的尺寸和它們之間的距離。軟體是程序寫的，在這些層面上它就是那麼方方正正，沒有什麼創新的空間。

同樣地，大家所說的保持軟體的一致性，除了出於美觀好用等各方面的考慮以外，其實也是為了更高效地進行開發。對於一套好的UI來說，它上面的幾乎所有元素都需要是可以用數字描述的，包括多少像素的圓角，多少像素的描邊。以開發的角度來看，只有數字才是描述你的UI的最有效的語言，有規律的數字才是維持一致性的保證。

像開發安排視圖一樣安排好圖層的結構，然後使用Zplin或者Sketch measure一鍵自動標註並且輸出，加之及時有效的溝通和認真專業的態度，將大大減少你的程序員和你日後的改改改工作。科技日新月異，你還有很多別的新玩意要去學習，程序員也有很多新的技術要去專研，學會以開發的視角去做設計非常重要。切不要把為了一兩個像素的偏移而爭吵視作是自己具有工匠精神的體現，華為已經開始裁撤35歲以上的員工了，我漸漸覺得這樣的雞毛蒜皮的小事情簡直就是浪費時間。

@1x

關於使用一倍還是二倍做圖的爭論還是比較多的，國外的設計師喜歡用一倍，國內的設計師比較多用二倍，實際上兩種選擇都有自己的好處，好多高手也寫了不少優秀的教程，在下就不在這裡班門弄斧做比較了。

我簡單說說做一倍圖的好處。

一倍圖計算起來很簡單，要輸出幾倍就乘以幾倍，這樣的話你就能在Sketch裡面使用插件一鍵輸出所有倍數的圖了。開發在搭建UI的時候還能直接使用你標註在上面的數字，大大較少了出錯的可能。還有兩點個人總結的小經驗，就目前來講，你能在官網或者是一些權威組織網站上面下載到的有關平台規範的設計源文件以及大部分素材都是用一倍圖做的。另外，使用一倍圖導出到目前比較主流的可交互原型製作軟體（Framer Studio、Flinto、Principle、Form、Origami等等）內製作可交互原型會有更加良好的體驗。

輸出色板

設計師會在設計之前定好需要用到的各種顏色，開發其實也需要，他們會在一個文檔裡面將所有要用到的顏色先寫下來（這些顏色也由設計師給到），然後再在需要的地方隨時調用，概念就跟設計師參照視覺規範做設計一樣。

所以在設計UI的過程中請妥善保管你選定的顏色。如果時間充裕的話最好專門新建一個畫板來保存你的顏色並使用Sketch measure一併輸出。這樣開發就能夠複製上面的十六進位碼直接粘貼到他們規定顏色的文檔裡面去了。

為你能想到的所有情況而設計

程序不可能總是在理想的狀態中工作，故障與錯誤總是會有的。當出現比如說斷網、弱網或者暫時沒有內容可以展示時，程序的頁面該怎麼呈現並傳達正確的信息給到用戶。

所以設計師在設計的時候一定要審慎處理各種不一樣的情況。假如一個頁面有可能會有不存在內容的狀態，那麼該怎麼展示。

總有你想不到的情況會發生，所以如果不明白的話多去詢問一下傳說中的知情人士，相信他們也會很樂意幫助你找出一些需要設計的異常情況。

另外幾件細碎的事情

• 對於語言文字的處理一定不能掉以輕心，因為這有可能會將你的頁面毀掉。如果一個視圖內文字有可能會很多，那麼要做截字處理還是自適應處理？如果某處會有出現大量英文的情況的話呢？
• 不要太過追求完美,錙銖必較地去要求一個兩個像素的完美並不值得提倡。就像前文提及的一樣，我們最好能在前期就避免這些情況的發生。而且，軟體開發過程中會有很多不可控、不可預估的情況發生，有些問題誰也沒辦法解決。學會接受一點點的瑕疵更有助於項目的推進。
• 為軟體添加上一些優雅的轉場和漂亮的動效確實能改善用戶體驗，但設計師不需要要在軟體的每一寸土地上都要施展自己的才華，使用系統自帶效果不丟人。如今無論是安卓還是iOS，系統本身所能提供的動態效果已經非常不錯了，學會怎麼合理地使用它們也是一門考驗功力的活兒。

好的產品需要大家共同的努力！(ง •̀_•́)ง加油！

作者：Zhuyuxuan，追波：Zhuyuxuan，知乎專欄：DesignCoder