色综合欧美色综合七久久,九九精品影院,国产日韩网站

UI設(shè)計(jì)還有買家秀和買家秀？其實(shí)就是設(shè)計(jì)稿和最后上線頁面的對(duì)比。我們經(jīng)常發(fā)現(xiàn)設(shè)計(jì)稿美輪美奐，整齊工整，最后上線的頁面卻慘不忍睹。今天這篇好文總結(jié)了4個(gè)原因和解決方法，幫你搞定這個(gè)問題。

產(chǎn)品，運(yùn)營(yíng)甚至boss得問了：這做的是什么東西？那這鍋誰來背，測(cè)試？開發(fā)？還是ued？毫無疑問這個(gè)鍋ued是背定了，當(dāng)然有同學(xué)會(huì)說：開發(fā)說實(shí)現(xiàn)不了，只能這樣做了。那么你為什么總是相信開發(fā)說不能做就不能做？說不定只是開發(fā)想偷懶呢？（我的開發(fā)小伙伴請(qǐng)不要打我我知道你們是愛我的）。

設(shè)計(jì)師進(jìn)階利器 —— 學(xué)習(xí)前端

知己知彼，百戰(zhàn)不殆。下面要講幾個(gè)簡(jiǎn)單的前端小知，所有頁面的布局都會(huì)用到，拿安卓舉例，五種常見的頁面布局：

1. 線性布局（LinearLayout）

2. 表格布局（TableLayout）

3. 單幀布局（FrameLayout）

4. 相對(duì)布局（RelativeLayout）

5. 絕對(duì)布局（AbsoluteLayout）

五種常見的布局感興趣的同學(xué)可以自行去了解一下，這里不做解釋了。

另外還有兩個(gè)單詞也是要非常了解的：

margin：元素周圍生成額外的空白區(qū)。“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。

padding：稱呼為內(nèi)邊距，其判斷的依據(jù)即邊框離內(nèi)容正文的距離，而我喜歡CSS權(quán)威指南解釋的“補(bǔ)白”（或者叫“留白”），因?yàn)樗苄蜗蟆Ｑa(bǔ)白（padding）補(bǔ)白位于元素框的邊界與內(nèi)容區(qū)之間。很自然，用于影響這個(gè)區(qū)域的屬性是padding。

總結(jié)買家秀的原因：

溝通不到位
細(xì)節(jié)不到位
驗(yàn)收沒有規(guī)范，不到位
設(shè)計(jì)稿沒有出詳細(xì)

其實(shí)要做好每一點(diǎn)都不是那么容易的事情，真以為UI就只是畫畫圖嗎？資深一點(diǎn)的UI看手機(jī)上就能分辨字體大小，1px甚至0.5px的誤差，控件間距，包括很細(xì)微的顏色誤差等等。

1，溝通不到位

一個(gè)設(shè)計(jì)師判斷他水平的高低，設(shè)計(jì)能力不是最優(yōu)先，而是溝通能力，以及解決問題的能力。

設(shè)計(jì)助理：標(biāo)注切圖，OK！
設(shè)計(jì)師：標(biāo)注切圖丟開發(fā)，OK！
高級(jí)設(shè)計(jì)師：標(biāo)注切圖丟開發(fā)，開發(fā)跟進(jìn)，OK！
資深設(shè)計(jì)師：標(biāo)注切圖的過程中與開發(fā)溝通，確認(rèn)頁面細(xì)節(jié)，根據(jù)驗(yàn)收規(guī)范驗(yàn)收，提供完整的設(shè)計(jì)稿，并有一定開發(fā)知識(shí)，能聽懂開發(fā)說的代碼，并給出建議。
設(shè)計(jì)專家：自己設(shè)計(jì)自己寫代碼。

所以我們能發(fā)現(xiàn)高級(jí)設(shè)計(jì)師這個(gè)級(jí)別開始都將更多的接觸開發(fā)，和其進(jìn)行更多的溝通，舉個(gè)例子：

這是一個(gè)星星的排列，我們通常在一家稍微大型的公司，能發(fā)現(xiàn)，一個(gè)功能模塊對(duì)應(yīng)一個(gè)開發(fā)，但是其中的元素難免會(huì)重復(fù)使用，為了避免資源重復(fù)，開發(fā)就會(huì)使用同一套的資源，也就是同一個(gè)切圖，那么問題來了，星星的排列寫法只有一種嗎？然而并不是，兩個(gè)人的實(shí)現(xiàn)方法不一樣，雖然結(jié)果一樣，但是需要的切圖并不一樣。

寫法一：提供貼邊切圖，開發(fā)代碼實(shí)現(xiàn)其中間距。

寫法二：提供左右有間距的切圖，開發(fā)自動(dòng)排列。

如果沒有溝通到位，我們會(huì)發(fā)現(xiàn)兩邊的效果總是不能保持一致，導(dǎo)致最后和效果圖有了差別。這僅僅是一個(gè)例子，而項(xiàng)目中我們會(huì)發(fā)現(xiàn)許許多多類似的或者其他細(xì)微的問題，如果溝通不及時(shí)，上線之后就只能成為買家秀了。

2，細(xì)節(jié)不到位

注意細(xì)節(jié)，注意細(xì)節(jié)，注意細(xì)節(jié)！

日常的生活中，為什么我們會(huì)對(duì)一家店產(chǎn)生好感，覺得他們服務(wù)好，讓人覺得花大價(jià)錢都值。是因?yàn)樗麄冊(cè)诜?wù)中的細(xì)節(jié)把握的到位，舉個(gè)例子：上周和倆兄弟去擼串，特地找了一家五星級(jí)好評(píng)的燒烤店，一家門面很普通的燒烤店，生意卻極好，足足等了50分鐘終于輪到我們了，在上菜的同時(shí)服務(wù)員會(huì)詳細(xì)給我們說明我們將要擼的幾個(gè)串分別是幾串和幾串，并且每次上菜都會(huì)提醒顧客注意菜品燙口，當(dāng)生蠔有一只偏小的時(shí)候給我們額外加了一只，食用完的鐵簽可以放到邊上的竹筒內(nèi)以便回收同時(shí)安全不至于扎到顧客，最后加上燒烤的味道確實(shí)不錯(cuò)，價(jià)格也很實(shí)惠，這樣的店能拿到五個(gè)星好評(píng)就不奇怪了。

又扯到服務(wù)設(shè)計(jì)上去了，言歸正傳，我們?cè)谧鯱I驗(yàn)收的時(shí)候，是否也會(huì)注意到細(xì)節(jié)，例如對(duì)齊，統(tǒng)一性，1px（dp）的誤差？是否和開發(fā)妥協(xié)并沒有完全按照效果圖來實(shí)現(xiàn)？往往細(xì)節(jié)的忽略會(huì)導(dǎo)致整個(gè)產(chǎn)品看起來不精致。

3，沒有驗(yàn)收規(guī)范

我們通常驗(yàn)收的時(shí)候會(huì)將開發(fā)做好的頁面截圖下來，對(duì)比著效果圖來做大家來找茬。但是往往會(huì)這里漏一些那里漏一些，那么如何才能更完整細(xì)致的驗(yàn)收UI稿呢，這里整理了一下方法：

1. 根據(jù)UI KIT組件整體驗(yàn)收，所有元素－控件－頁面風(fēng)格對(duì)照開發(fā)之前所做的組建庫對(duì)應(yīng)檢查。

2. 對(duì)應(yīng)標(biāo)注后的效果圖來調(diào)整開發(fā)頁面，并按順序列出需要改的點(diǎn)。為什么需要一一列出，因?yàn)槲覀兿胱岄_發(fā)改視覺bug的時(shí)候，如果開發(fā)正在改更為重要的測(cè)試提出的功能bug，這個(gè)時(shí)候不做序列排列bug，開發(fā)會(huì)便會(huì)遺漏。（經(jīng)驗(yàn)tips：文字自帶有上下的空隙，標(biāo)注時(shí)工具會(huì)將空隙自動(dòng)算入標(biāo)注的數(shù)值中）

3. 注意異常流頁面。很多時(shí)候UI驗(yàn)收完所有可見頁面之后，以為大功告成，但是還有一些隱性頁面依然沒有被發(fā)現(xiàn)，比如為空頁面，斷網(wǎng)頁面，請(qǐng)求失敗頁面，toast，彈框等。

4. 控件及頁面的交互。將所有頁面跳轉(zhuǎn)動(dòng)效統(tǒng)一，對(duì)照交互說明幫助交互設(shè)計(jì)驗(yàn)收頁面動(dòng)效，不要怕越俎代庖，不要覺得幫別人驗(yàn)收他們的部分就是吃虧，整一個(gè)產(chǎn)品需要所有人共同努力來完善，產(chǎn)品才能做到極致。

4，詳細(xì)的設(shè)計(jì)稿

到底什么是詳細(xì)的設(shè)計(jì)稿？

1. 補(bǔ)全所有異常流狀態(tài)：為空頁面，斷網(wǎng)頁面，請(qǐng)求失敗頁面，toast，彈框等。

2. 考慮字段為空時(shí)候頁面的展示方式。

3. 設(shè)計(jì)說明（之前的文章中有提到過，其實(shí)所有的設(shè)計(jì)都是有據(jù)可循，而不是空穴來風(fēng)，為什么要這樣設(shè)計(jì)，這樣設(shè)計(jì)能解決用戶的什么問題，最后能到一個(gè)怎樣的效果？）

案例tips：一張頁面你將他信息完全填滿，看上去很飽滿很充實(shí)，信息很完整，但是！這只是設(shè)計(jì)稿最理想的狀態(tài)，實(shí)際狀態(tài)是這些字段后臺(tái)返回給前端是一個(gè)空值，這時(shí)候東一塊空缺，西一塊空缺，在字段缺失的情況下頁面的展示需要也設(shè)計(jì)進(jìn)去，這樣開發(fā)的時(shí)候能針對(duì)性的做出實(shí)現(xiàn)方式。