UI設(shè)計(jì)小白最不能視而不見(jiàn)的三個(gè)知識(shí)點(diǎn)

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

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

1. 客戶端

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

因?yàn)槎唛_(kāi)發(fā)的編程語(yǔ)言是不同的，負(fù)責(zé) iOS 端開(kāi)發(fā)的就是我們的 iOS 開(kāi)發(fā)工程師，而負(fù)責(zé) Android 端的是我們 Android 開(kāi)發(fā)工程師。

2. 服務(wù)器

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

3. 后端

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

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

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

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

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

舉兩個(gè)例子：

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

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

 

二、重要知識(shí)點(diǎn)：字段

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

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

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

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

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

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

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

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

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

 

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

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

1. 保證交互流程不變

在頁(yè)面改版的時(shí)候，除非是產(chǎn)品提出需要，不然盡量要在保持原有交互邏輯和功能的基礎(chǔ)上對(duì)頁(yè)面進(jìn)行改版。如果一定要?jiǎng)咏换ィ詈煤烷_(kāi)發(fā)人員進(jìn)行一定的溝通，讓他們對(duì)改動(dòng)的方向有一些了解，讓他們有一些心理準(zhǔn)備，同時(shí)也可以把你的思路和開(kāi)發(fā)人員進(jìn)行探討，說(shuō)不定一些有經(jīng)驗(yàn)的開(kāi)發(fā)者會(huì)告訴你一些更好的解決方案。

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

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