UI綜合設(shè)計(jì)：如何以開發(fā)的視角做設(shè)計(jì)?

面對(duì)完全不一樣的媒介，設(shè)計(jì)師們會(huì)有不一樣的目標(biāo)，也會(huì)使用不一樣的手法進(jìn)行設(shè)計(jì)。 比如說一名 UI 設(shè)計(jì)師與平面設(shè)計(jì)師的最大區(qū)別，大概就是在于 UI 設(shè)計(jì)師能夠以開發(fā)的視角來做設(shè)計(jì)。

UI 這個(gè)詞或許聽起來非常新潮，但是 User Interface 這個(gè)詞組及其含義其實(shí)很早就已經(jīng)出現(xiàn)了。古時(shí)候的設(shè)計(jì)師使用 GIMP 對(duì)用戶界面進(jìn)行設(shè)計(jì)，后來我們使用 Photoshop 進(jìn)行這項(xiàng)工作，而現(xiàn)我猜大多數(shù) UI 設(shè)計(jì)師們都已經(jīng)用上了 Sketch。

UI 設(shè)計(jì)與其他的一些設(shè)計(jì)行當(dāng)最大的一點(diǎn)區(qū)別就是，UI 設(shè)計(jì)師輸出的并不是最終的作品，他們通常還要把自己的設(shè)計(jì)先交付給開發(fā)，而且交付這個(gè)過程非常重要。

你怎么去設(shè)計(jì)以至到你怎么輸出你的設(shè)計(jì)將會(huì)直最終的產(chǎn)品產(chǎn)生重大的影響，所以對(duì)于這種媒介(software)，設(shè)計(jì)師會(huì)面對(duì)的問題將會(huì)面對(duì)什么樣的新問題。開發(fā)使用他們的開發(fā)工具(iOS 的 Xcode、Android 的 Android Studio 等等)按照你的設(shè)計(jì)來構(gòu)建界面的的方法和思路會(huì)與你在使用 Sketch 來設(shè)計(jì) UI 的思路非常不一樣。所以，既然 UI 設(shè)計(jì)師的主要工作是交付，那么學(xué)會(huì)以開發(fā)的視角和分析方法來進(jìn)行設(shè)計(jì)將非常重要。

開發(fā)眼中的設(shè)計(jì)稿長(zhǎng)什么樣

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

當(dāng)然了，開發(fā)在使用他們的工具(Xcode、Android Studio 等)來控制布局，構(gòu)建我們的UI肯定不會(huì)像你在 Sketch 里面來得那么簡(jiǎn)單直接，但是設(shè)計(jì)師并不需要實(shí)際地去學(xué)習(xí)如在使用這些工具來對(duì) UI 進(jìn)行構(gòu)建(當(dāng)然如果你感興趣的話，深度地了解一下這些又遠(yuǎn)又近的知識(shí)對(duì)你將有非常大的裨益)。我們可以將視圖想象成一個(gè)類似于 Sketch 里面的 Symbols 或是 Group 的東西，樣式、邊框和大小都被規(guī)定好了，然后各個(gè)不同小視圖以合乎道理的層級(jí)和順序構(gòu)建成我們的理想中的界面。

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

最上方的專輯詳情區(qū)域。

中間的歌曲列表頁(yè)。

我們熟悉的 Tab Bar。

這三個(gè)大視圖之中又包含了從屬于自己的小視圖，譬如說專輯的照片就是屬于專輯詳情區(qū)域的視圖，每首歌曲的名字也是屬于歌曲列表視圖內(nèi)的小視圖。

上面那個(gè)充滿了藍(lán)色框框的圖顯示的是每個(gè)視圖的邊界，Sketch 里面可不會(huì)給你顯示這些東西，不過我們有 Zeplin 和 Sketch Measure 這樣的插件幫助我們標(biāo)注并輸出每個(gè)圖層的邊界大小，這對(duì)于實(shí)際開發(fā)來說非常有幫助。

我們?cè)賮碛^察一下 Tab Bar 在 Sketch 里面的圖層結(jié)構(gòu)。

這樣的排列是比較接近在開發(fā)環(huán)境下搭建 UI 所使用的結(jié)構(gòu)的。有太多的設(shè)計(jì)師并不會(huì)將圖層整理得那么整齊，認(rèn)為整齊與否并不影響視覺效果。這的確不影響視覺效果，但是這有可能會(huì)嚴(yán)重影響交付效果。所以下一次畫 UI 的時(shí)候請(qǐng)盡量合理地安排好圖層的結(jié)構(gòu)和從屬關(guān)系，多去閱讀各個(gè)平臺(tái)和系統(tǒng)的設(shè)計(jì)規(guī)范，別使用奇奇怪怪的數(shù)字來定義元素的尺寸和它們之間的距離。軟件是程序?qū)懙?，在這些層面上它就是那么方方正正，沒有什么創(chuàng)新的空間。

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

像開發(fā)安排視圖一樣安排好圖層的結(jié)構(gòu)，然后使用 Zeplin 或者 Sketch Measure 一鍵自動(dòng)標(biāo)注并且輸出，加之及時(shí)有效的溝通和認(rèn)真專業(yè)的態(tài)度，將大大減少你的程序員和你日后的改改改工作?？萍既招略庐悾氵€有很多別的新玩意要去學(xué)習(xí)，程序員也有很多新的技術(shù)要去專研，學(xué)會(huì)以開發(fā)的視角去做設(shè)計(jì)非常重要。切不要把為了一兩個(gè)像素的偏移而爭(zhēng)吵視作是自己具有工匠精神的體現(xiàn)，華為已經(jīng)開始裁撤 35 歲以上的員工了，我漸漸覺得這樣的雞毛蒜皮的小事情簡(jiǎn)直就是浪費(fèi)時(shí)間。

關(guān)于使用一倍還是二倍做圖的爭(zhēng)論還是比較多的，國(guó)外的設(shè)計(jì)師喜歡用一倍，國(guó)內(nèi)的設(shè)計(jì)師比較多用二倍，實(shí)際上兩種選擇都有自己的好處，好多高手也寫了不少優(yōu)秀的教程，在下就不在這里班門弄斧做比較了。

我簡(jiǎn)單說說做一倍圖的好處。

一倍圖計(jì)算起來很簡(jiǎn)單，要輸出幾倍就乘以幾倍，如此你就能在 Sketch 里面使用插件一鍵輸出所有倍數(shù)的圖了。開發(fā)在搭建 UI 的時(shí)候還能直接使用你標(biāo)注在上面的數(shù)字，大大較少了出錯(cuò)的可能。還有兩點(diǎn)個(gè)人總結(jié)的小經(jīng)驗(yàn)，就目前來講，你能在官網(wǎng)或者是一些權(quán)威組織網(wǎng)站上面下載到的有關(guān)平臺(tái)規(guī)范的設(shè)計(jì)源文件以及大部分素材都是用一倍圖做的。另外，使用一倍圖導(dǎo)出到目前比較主流的可交互原型制作軟件(Framer Studio、Flinto、Principle、Form、Origami 等等)內(nèi)制作可交互原型將會(huì)有更加良好的體驗(yàn)。

輸出色板

設(shè)計(jì)師會(huì)在設(shè)計(jì)之前定好需要用到的各種顏色，開發(fā)其實(shí)也需要，他們會(huì)在一個(gè)文檔里面將所有要用到的顏色先寫下來(這些顏色也由設(shè)計(jì)師給到)，然后再在需要的地方隨時(shí)調(diào)用，概念就跟設(shè)計(jì)師參照視覺規(guī)范做設(shè)計(jì)一樣。

所以在設(shè)計(jì) UI 的過程中請(qǐng)妥善保管你選定的顏色。如果時(shí)間充裕的話最好專門新建一個(gè)畫板來保存你的顏色并使用 Sketch Measure 與其他 asset 一并輸出。這樣開發(fā)就能夠復(fù)制上面的十六進(jìn)制碼直接粘貼到他們規(guī)定顏色的文檔里面去了。

為你能想到的所有情況而設(shè)計(jì)

程序不可能總是在理想的狀態(tài)中工作，故障與錯(cuò)誤總是會(huì)有的。當(dāng)出現(xiàn)比如說斷網(wǎng)、弱網(wǎng)或者暫時(shí)沒有內(nèi)容可以展示時(shí)，程序的頁(yè)面該怎么呈現(xiàn)并傳達(dá)正確的信息給到用戶?

所以設(shè)計(jì)師在設(shè)計(jì)的時(shí)候一定要審慎處理各種不一樣的情況。假如一個(gè)頁(yè)面有可能會(huì)有不存在內(nèi)容的狀態(tài)，那么該怎么對(duì)這種狀態(tài)進(jìn)行設(shè)計(jì)?

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

另外幾件細(xì)碎的事情

對(duì)于語言文字的處理一定不能掉以輕心，因?yàn)檫@有可能會(huì)將你的頁(yè)面毀掉。如果一個(gè)視圖內(nèi)文字有可能會(huì)很多，那么要做截字處理還是自適應(yīng)處理?如果某處會(huì)有出現(xiàn)大量英文的情況的話呢?

不要太過追求完美，錙銖必較地去要求一個(gè)兩個(gè)像素的完美并不值得提倡。就像前文提及的一樣，我們最好能在前期就避免這些情況的發(fā)生。而且，軟件開發(fā)過程中會(huì)有很多不可控、不可預(yù)估的情況發(fā)生，有些問題誰也沒辦法解決。學(xué)會(huì)接受一點(diǎn)點(diǎn)的瑕疵更有助于項(xiàng)目的推進(jìn)。

為軟件添加上一些優(yōu)雅的轉(zhuǎn)場(chǎng)和漂亮的動(dòng)效確實(shí)能改善用戶體驗(yàn)，但設(shè)計(jì)師不需要要在軟件的每一寸土地上都要施展自己的才華，使用系統(tǒng)自帶效果不丟人。如今無論是安卓還是 iOS，系統(tǒng)本身所能提供的動(dòng)態(tài)效果已經(jīng)非常不錯(cuò)了，學(xué)會(huì)怎么合理地使用它們也是一門考驗(yàn)功力的活兒。（文章來源于網(wǎng)絡(luò)）