UI設(shè)計小白最不能視而不見的三個知識點

一、APP到底是如何工作的？

正常情況下，一款上線的內(nèi)容型 APP 要能正常的使用，一般會有客戶端（就是我們的 APP）和服務(wù)器，不過有一些純工具類的 app 只要有客戶端就能正常使用，不需要服務(wù)器配合。

1. 客戶端

客戶端就是我們蘋果手機上或者安卓手機上用的 app，客戶端一般有 iOS 端和 Android 端，現(xiàn)在市面上基本上除了蘋果手機是 iOS 端，其他的都是 Android 端，只不過 Android 因為是開源的，所以有各種各樣的深度定制版本，比如三星，華為，VIVO，小米其實手機系統(tǒng)都是Android系統(tǒng)。

因為二者開發(fā)的編程語言是不同的，負責(zé) iOS 端開發(fā)的就是我們的 iOS 開發(fā)工程師，而負責(zé) Android 端的是我們 Android 開發(fā)工程師。

2. 服務(wù)器

服務(wù)器主要儲存的是兩類東西，app 的內(nèi)容資源（數(shù)據(jù)庫）和各種前后端的代碼。其實服務(wù)器就是一堆的電腦主機里的硬盤，只不過都分布在各個地方的數(shù)據(jù)中心。除了客戶端，基本上所有的和 app 運行相關(guān)的數(shù)據(jù)都保存在了服務(wù)器。我們平常 APP 的內(nèi)容一開始都是在服務(wù)器上，只是當(dāng)你打開 App 時，app 會向服務(wù)器發(fā)送一些請求，告訴服務(wù)器，我這里要一些新的內(nèi)容，你趕緊給我發(fā)過來，服務(wù)器接到指令后就會向 app 發(fā)送相應(yīng)的內(nèi)容，然后該內(nèi)容才會通過 app下載下來，在 app 上顯示出來。

3. 后端

后端，也叫后臺，你可以簡單地理解成負責(zé) APP 后勤的部門，它負責(zé)了客戶端和服務(wù)器端各種數(shù)據(jù)的傳遞和交流。比如說個性化推送這個功能，其實就是后臺代碼根據(jù)你的搜索記錄，然后按照代碼的算法，把他它覺得你會有興趣的內(nèi)容推送給你。

后臺功能的實現(xiàn)主要是由后臺開發(fā)工程師負責(zé)。

4. 內(nèi)容管理系統(tǒng)

內(nèi)容管理系統(tǒng)就是一套網(wǎng)站系統(tǒng)，專門用來對 APP 服務(wù)器上的內(nèi)容進行增刪改查。比如我們可以每天在各種新聞網(wǎng)站上都看到各種各樣的新聞，它背后就是有一個新聞內(nèi)容發(fā)布管理系統(tǒng)，也就是個網(wǎng)站，各個新聞編輯可以登錄那個網(wǎng)站發(fā)布和管理各種各樣的新聞內(nèi)容，只有發(fā)布的內(nèi)容才有可能會被推送到你的 APP 上。而像一些社交類 APP，它們的 app 本身就兼具了一定 cms 的功能，我們發(fā)布的信息和照片，都會上傳到相應(yīng)的服務(wù)器，然后其他人的 app 再從服務(wù)器上把我們發(fā)布的信息獲取下來，這樣別人就能看到我們發(fā)的動態(tài)了。

內(nèi)容管理系統(tǒng)的設(shè)計與開發(fā)主要是一整套完整的網(wǎng)站開發(fā)的流程，不僅需要產(chǎn)品經(jīng)理整理網(wǎng)站的功能需求，也需要 UI 設(shè)計師負責(zé)頁面的交互邏輯和 UI 界面，而開發(fā)工作主要由前端開發(fā)工程師和后臺開發(fā)工程師配合，前端工程師主要實現(xiàn) UI 設(shè)計師設(shè)計好的后臺管理網(wǎng)站的圖形界面，而后臺開發(fā)工程師則負責(zé)搭建內(nèi)容倉庫以及倉庫與外界交互等等一系列的功能。

舉兩個例子：

就拿簡單的一個下拉刷新的功能來說，首先我們在客戶端里下拉，下拉之后觸發(fā)了客戶端向服務(wù)器端發(fā)送了一個請求，客戶端對服務(wù)器中的后臺說，「哥們你幫我看看你的內(nèi)容庫里面有沒有新的，我這里沒有的，有的話就發(fā)給我」，后臺接到指令后，檢查了一遍自己的內(nèi)容倉庫，發(fā)現(xiàn)剛剛有人通過內(nèi)容管理系統(tǒng)添加了一些新的內(nèi)容，符合客戶端的要求，于是就很爽快地把新的內(nèi)容發(fā)給了客戶端，客戶端接收到之后就展現(xiàn)在了 app 的頁面里面。

再比如搜索這個功能，我們在 app 中輸入我們想要搜索的內(nèi)容，然后點擊搜索，客戶端會把這個文字發(fā)送到服務(wù)器中的后臺，讓后臺進行匹配處理，看看內(nèi)容庫中有沒有相應(yīng)的東西，如果有的話，后臺就會把相關(guān)內(nèi)容發(fā)送到客戶端上。

 

二、重要知識點：字段

字段這個概念也是我在正式參與 APP 設(shè)計和開發(fā)的工作當(dāng)中才了解的。它在整個產(chǎn)品的開發(fā)過程中是一個很重要的概念。從產(chǎn)品整理需求開始到開發(fā)完成，每一個環(huán)節(jié)它都有著重要的作用。

我把它理解為，字段是所有 app 頁面當(dāng)中由內(nèi)容管理系統(tǒng)控制或者由后臺動態(tài)生成其顯示內(nèi)容的元素。簡單地說，就是這個元素的具體內(nèi)容是可被改變的，那這個元素就是一個字段。

在一般的內(nèi)容型 app 的頁面中，展示的所有元素的內(nèi)容，有些是會變的，有些是不會變。會變的一般來說，一是通過后臺管理系統(tǒng)來控制內(nèi)容的顯示，比如新聞標(biāo)題，新聞?wù)?，新聞來源等等，二是通過后臺計算后產(chǎn)生的變化數(shù)據(jù)，比如說一篇文章的點贊數(shù)、評論數(shù)，閱讀數(shù)等等。而不變的一些元素一般就是在客戶端內(nèi)寫死的，這些寫死元素的內(nèi)容只有通過更新客戶端的版本才能進行修改。

APP 頁面中有哪些字段是每個崗位都需要知道的，因為這涉及到后續(xù)的一些列設(shè)計和開發(fā)工作。產(chǎn)品經(jīng)理一開始就需要把產(chǎn)品頁面中所有字段整理出來，告知設(shè)計師。

設(shè)計師要清楚知道頁面中的字段，比如說文字字段，文字的內(nèi)容是會改變的，在排版的時候要考慮字?jǐn)?shù)最多和字?jǐn)?shù)最少的情況；圖片字段，你要考慮圖片是會不斷變換的，圖片的風(fēng)格和處理方式對于后期真正 app 上線運營的效果都會有很大的影響。

有一些字段是可以根據(jù)設(shè)計師自身設(shè)計的要求來定義的，比如同樣一個商品的標(biāo)簽的字段，你可以用純文字的方式，也可以用圖標(biāo)的形式，當(dāng)設(shè)計稿確定之后，這些字段的具體要求都需要梳理出來。比如我這個字段是文字的形式還是圖片的形式，如果是文字，最多字?jǐn)?shù)是多少，能不能不顯示，超出這個字?jǐn)?shù)如何顯示；如果是圖片，圖片的尺寸是多少等等一系列的具體問題的解決方案，把這些整理好形成一個文檔交給產(chǎn)品經(jīng)理，以及客戶端工程師和前后端工程師。

客戶端工程師需要知道你的設(shè)計稿中哪些是字段，哪些是寫死的（不可通過內(nèi)容管理系統(tǒng)更改的）。如果設(shè)計稿中某個元素是活動的字段，他們在編寫代碼的時候會在該元素的代碼中留下一個「接收器」，用來接收以后從 CMS 或者后臺中傳過來的數(shù)據(jù)，這樣才能通過 cms 或者后臺來動態(tài)控制元素中顯示的具體內(nèi)容。再比如，如果一個字段限制十個字，如果后端傳過來的數(shù)據(jù)超過了十個字，客戶端工程師也要知道這樣的情況該如何處理，是用省略號，還是讓文字折行或者直接不顯示多出的文字……

前端工程師，CMS 的網(wǎng)站是前端工程師寫的，產(chǎn)品經(jīng)理或者交互設(shè)計師會出 cms 的后臺原型，原型中會告知前端工程師所有的字段，包括輸入文字的字?jǐn)?shù)限制，上傳圖片的尺寸限制，以及哪些是必填項、哪些是選填項等等各種各樣的具體要求。

后臺工程師也要知道有具體哪些字段，他們會跟客戶端工程師、前端工程師進行溝通，這樣他們才能知道把服務(wù)器的數(shù)據(jù)傳到客戶端中的哪個接收器中去，如果有需要，他們也能對一些數(shù)據(jù)進行預(yù)處理。

 

三、怎么改版，才能不讓開發(fā)想打你？

在我自己的工作中，經(jīng)常會遇到各種頁面改版的問題，在原有基礎(chǔ)上進行調(diào)整，是最考驗設(shè)計師和程序員友誼的時候，如果你稍微不控制一下自己的腦洞，可能你覺得很簡單的一個改動就會讓程序員忙活大半天。對于開發(fā)來說，新寫容易調(diào)整難，調(diào)整代碼是一件很費時費力的事情，這有點像我們好不容易合成好一張海報，然后甲方跟我們說，我覺得這個光源的方向應(yīng)該改一下，這下好了，所有場景里物體的光影都要重繪。所以，調(diào)整代碼并不是像外人想象的那么容易，很多代碼調(diào)整的過程中會出現(xiàn)很多新的問題，開發(fā)人員都需要去一一解決。

1. 保證交互流程不變

在頁面改版的時候，除非是產(chǎn)品提出需要，不然盡量要在保持原有交互邏輯和功能的基礎(chǔ)上對頁面進行改版。如果一定要動交互，最好和開發(fā)人員進行一定的溝通，讓他們對改動的方向有一些了解，讓他們有一些心理準(zhǔn)備，同時也可以把你的思路和開發(fā)人員進行探討，說不定一些有經(jīng)驗的開發(fā)者會告訴你一些更好的解決方案。

2. 保持視覺一致性，建立基本的設(shè)計系統(tǒng)

一致性不僅僅是為了視覺上的美觀和統(tǒng)一，在開發(fā)過程中，也可以大大減少程序員的工作量，如果你的頁面的組件都是統(tǒng)一或者有一定邏輯性，程序員在開發(fā)過程中就可以按照你的設(shè)計邏輯進行開發(fā)，建立各種統(tǒng)一或者有一定邏輯變化的模塊組件，后期代碼調(diào)整過程中就能做到像 sketch 中 symbol 的作用，只要簡單地改組件的參數(shù)，就能應(yīng)用到大部分界面里了。