地理空間數(shù)據(jù)可視化 (Geo Spatial Data Visualization) 是近年來興起的一個熱門領(lǐng)域，越來越多的政府、企業(yè)青睞于通過這種強(qiáng)視覺的形式來展示政績與實力。市場需求的增長也吸引了越來越多的設(shè)計師投身于這個領(lǐng)域。而在這樣一個細(xì)分領(lǐng)域，也對設(shè)計師的能力提出了全新的要求。在該領(lǐng)域，我們團(tuán)隊沉淀出一套固定且可復(fù)用的設(shè)計模式。
調(diào)查問卷，是一個低成本快速收集資料的定量分析工具。這是個看起來簡單，產(chǎn)出的問卷也看似很簡單，但是在整體設(shè)計的過程卻是需要很多的思考和預(yù)備。
關(guān)于調(diào)查問卷，會分成三個部分來解說，
廢話不說，直接開干！
1. 為什么做問卷
這個是問卷的目的，也直接影響后面問題的設(shè)計。
2. 如何使用問卷的研究結(jié)果
這是關(guān)于問卷解決方案的落地。不需要太過細(xì)致的落地計劃，但是至少要清楚，這份問卷的研究成果，可以獲得多少支持力度。不管問卷發(fā)現(xiàn)了多么偉大的問題，如果沒有落地，其實是沒有無意義。也切忌不要今年做的研究結(jié)果，明年來實施，那問卷的時效性和準(zhǔn)確性就會大打折扣了，因為市場的瞬息萬變。
這是做所有事前，都要問的問題，「為什么做 Why」。而這個問題為什么重要呢，因為這會關(guān)系到設(shè)計問卷的核心內(nèi)容是什么，會影響問卷的構(gòu)成，當(dāng)然最后也會產(chǎn)出不同的結(jié)果。
問卷的目的主要可以分為六個方面
1. 收集用戶信息
很多時候，我們或許知道理想目標(biāo)用戶是誰，但是誰才是真正使用我們產(chǎn)品的用戶呢？了解真正使用的用戶，可以對用戶進(jìn)行更針對性的分析和設(shè)計。
2. 了解用戶使用習(xí)慣
了解用戶在產(chǎn)品上是如何使用產(chǎn)品的，以及用戶的使用路徑是否按著我們期待的方式進(jìn)行，這是很有必要，這也是一個驗證的過程。
2. 滿意度
了解用戶對產(chǎn)品的滿意程度，對于用戶不滿意的方面，可以進(jìn)行歸納總結(jié)，并給出合理的解決方案
3. 建議反饋、吐槽、好評
從問卷中收集用戶的心聲，明白槽點(diǎn)是什么。同時也收集用戶的好評，這也是激勵團(tuán)隊一個很好的方法，因為是直接來自用戶。
4. 體驗優(yōu)化
對一個成功的產(chǎn)品來說，它要好用，它也要好看。產(chǎn)品有大改版前，可以用問卷來評估整體產(chǎn)品的體驗如何，以便在重新設(shè)計的方向上能更好聚焦。
5. 需求驗證
很多時候，需求可能沒那么明確，用戶和產(chǎn)品間始終存在著 gap， 所以我們有時對方案琢磨不定時，可能會試運(yùn)行，后續(xù)看用戶反饋。通過合理設(shè)計問卷，我們也可以稍微窺探到用戶的想法
但是對需求的驗證，單通過問卷還是比較難的，只能窺探到比較淺的一層，最好后續(xù)可以對用戶進(jìn)行訪談來做后續(xù)跟蹤，以便了解事情的全面。
這里要注意的是，問卷不適合探索用戶的新的需求，或者要驗證很精準(zhǔn)的信息等比較復(fù)雜性的問題。
如果你問用戶，近期會推出新功能，問他會不會用。大致上，你得到的回答都是肯定。很多時候，同意比拒絕更簡單。
根據(jù)提問的方式，可以分為 「是什么」「怎么樣」「怎么辦」
1. 是什么
主要是用戶信息、使用習(xí)慣等問題。
例如，年齡層、職業(yè)、使用產(chǎn)品目的、知道產(chǎn)品的渠道、使用頻率、使用競品軟件、整體滿意度等
2. 怎么樣
主要是詢問用戶原因，比如打這個分?jǐn)?shù)的原因，某功能使用如何等
3. 怎么辦
主要是詢問用戶的建議、期待產(chǎn)品改進(jìn)的地方
問卷中并不是所有問題都適合問，有一些比較敏感的問題需要去避免，以免激起用戶的負(fù)面情緒
1. 敏感性問題
個人信息類的問題比較容易會有敏感信息存在，就像你問用戶工資區(qū)間，和在問卷最后告知用戶參與問卷都有獎品，需要填寫收貨地址。很明顯收貨地址的準(zhǔn)確性會比工資更高。
2. 措辭嚴(yán)謹(jǐn)
3. 問卷的順序
先簡單后復(fù)雜，并注意整體邏輯性的表達(dá)。循序漸進(jìn)，如果一開頭就是很難的問題，用戶很容易放棄答題
4. 問題長度
盡量保持所有問題在一個差不多的長度呢，保持一樣的節(jié)奏。避免時長時短
5. 避免專業(yè)詞匯
很多時候，我們會用一些所謂的“行話”來表達(dá)，但是在問卷當(dāng)中，無法保證用戶同樣是理解的，而且也會讓用戶產(chǎn)生距離感，非必要情況下，不要使用專業(yè)詞匯
6. 選擇題枚舉要窮盡
題目數(shù)最好不多于 7 個，太多也會造成用戶選擇困難，最后記得加個其他并提供文本框輸入
7. 避免互斥、重復(fù)、相似
問題避免前后矛盾，造成用戶困擾，也不要重復(fù)或相似度極高的問題，除非這個問題是陷阱題，為了檢驗用戶是否認(rèn)真答題。但是在數(shù)量有限的問題中，一般比較少使用陷阱題
8. 保持開放性
為所有選擇的選項，加入「其他——」「以上都不是」「不知道」，用戶可能會覺得問題或答案不匹配，而不知道選什么，這時需要給用戶一個出口，避免產(chǎn)生無效數(shù)據(jù)
9. 避免詢問引導(dǎo)性的問題
大部分用戶認(rèn)為 XX 功能，很好用，你覺得呢？
如果看到這樣問題，大概可以從中讀出兩個信息，1. 大家都覺得好用 2. 平臺希望我說好用。
這個問題所傳達(dá)出來的隱藏含義會引導(dǎo)用戶做出不真實的反饋，這是沒有意義的問題
10. 避免讓用戶選擇「 是/否」「真/假」「好/壞」
強(qiáng)制選擇非黑即白，大部分情況下沒什么意思，因為用戶可能不確定。這個問題本身也沒有太大價值，也會錯過用戶一些比較有趣的回答。
所以如果這個問題的目的，是一定要知道的，可以更改提問的方式。
對于用戶的問題，答案要可以量化表達(dá)，來產(chǎn)生數(shù)據(jù)，才便于后續(xù)數(shù)據(jù)的分析
11. 避免問用戶將來的事，或回憶許久前的事
當(dāng)人們將自己的行為投射到未來時，通常會過于簡單化和理想化，人們更擅于解釋當(dāng)下進(jìn)行的內(nèi)容。
所以，如果要知道特定環(huán)境下用戶的操作，則要配合合適的場景預(yù)設(shè)，并且是用戶熟悉的場景。或者可以直接問，今天你會如何如何
所以可以通過詢問今天的行為來，確定將來會不會使用。當(dāng)然這不是絕對的，畢竟未來存在太多變數(shù)。
對于許久前的用戶的操作行為，也盡量不詢問，因為會忘記，而當(dāng)強(qiáng)迫他去思考時，他可能自己腦補(bǔ)，產(chǎn)生不準(zhǔn)確的記憶，進(jìn)而對研究結(jié)果產(chǎn)生偏差。
12. 其他
問卷中存在多選題，必選題，選填題，記得預(yù)覽問卷時，注意問題平臺有無自動添加文字說明。
不要用 checkbox, radio 來區(qū)別多選和單選，這是不能準(zhǔn)確的傳達(dá)，也有可能用戶沒有注意到，或者就不清楚，而使用文字的表述會更清晰，不會產(chǎn)生歧義。
必選題，選填題，如果問卷平臺，也只是用*號來表達(dá)必選時，建議在文字上也加上這樣的說明
整體問卷的過程需要時間，所以也需要的具體的日程安排，以便整體問卷的進(jìn)行是井然有序。
日程安排中，要包括：
調(diào)查問卷從準(zhǔn)備到產(chǎn)出報告，需要一個過程，建議與其他設(shè)計師或 PD 來一起配搭工作，更高效的完成，一個人去做，總是會有一些盲點(diǎn)，并且會比較大的壓力。
如果你在問卷方面是新手，也建議找個有經(jīng)驗的設(shè)計師或 PD 來做你顧問，減少一些不必要的坑。
文章來源：優(yōu)設(shè)網(wǎng) 作者：箴鹽設(shè)計
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
5分鐘帶你了解服務(wù)設(shè)計的原則、案例及常用方法！
我們常說，現(xiàn)在是體驗至上的時代，用戶對產(chǎn)品的使用不再是單純的需求滿足，更要獲得滿意的體驗。服務(wù)設(shè)計的發(fā)展為我們改善用戶的體驗提供了新的思路，從本質(zhì)出發(fā)，任何產(chǎn)品都是在提供某種服務(wù)，服務(wù)的質(zhì)量從根本上決定了用戶的體驗。
什么是服務(wù)設(shè)計
服務(wù)設(shè)計一直在我們的生活中，我們無時無刻不在體驗著各式各樣的服務(wù)。荷蘭一家專業(yè)的服務(wù)設(shè)計機(jī)構(gòu)31 Volts是這樣描述服務(wù)設(shè)計的：“如果有兩家緊挨著的咖啡店，出售同樣價格的咖啡時，服務(wù)設(shè)計是讓你走進(jìn)其中一家而不是另一家的原因。”這個描述很生動，同時也說明了服務(wù)設(shè)計的作用。
其實服務(wù)設(shè)計的定義還有很多，行業(yè)內(nèi)不同的專家和學(xué)者都有自己的理解和解讀，不管定義如何，重要的是服務(wù)設(shè)計的思維方式，可以幫助我們從全局改善服務(wù)體驗。
服務(wù)設(shè)計的原則及案例說明
2010年在《This is Service Design Thinking》一書中，作者首次提出了5個服務(wù)設(shè)計基本原則，這些原則之后也被廣泛使用，但隨著服務(wù)設(shè)計的不斷發(fā)展，其中的一些原則也需要重新去審視和思考，因此在2017年作者將其更新修訂為6項。
a.以人為中心(Human-centered)
以人為中心的設(shè)計理念在產(chǎn)品設(shè)計、交互設(shè)計等領(lǐng)域已經(jīng)得到了廣泛的應(yīng)用，服務(wù)設(shè)計當(dāng)然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務(wù)影響的人。
在日本，農(nóng)產(chǎn)品市場存在這樣一個問題，農(nóng)產(chǎn)品批發(fā)商無法及時從種植者處了解農(nóng)產(chǎn)品的相關(guān)狀況、收獲量等信息，因此他們也就無法與要購買農(nóng)產(chǎn)品的人進(jìn)行談判，這樣造成的結(jié)果可能是糧食的浪費(fèi)。日本的一家軟件公司NJC（Nippon Jimuki Co. Ltd.）發(fā)現(xiàn)了這一問題，他們希望利用自身能力（軟件方面的優(yōu)勢）去解決這一問題，因此將目標(biāo)設(shè)定為：創(chuàng)建一個可以提供有用數(shù)據(jù)而又不給農(nóng)民或農(nóng)產(chǎn)品批發(fā)商帶來負(fù)擔(dān)的系統(tǒng)。
最終的產(chǎn)出的結(jié)果是Fudoloop這個應(yīng)用程序，通過Fudoloop，批發(fā)商可以提前一天從農(nóng)民那里收到信息，進(jìn)而協(xié)調(diào)買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農(nóng)產(chǎn)品信息的農(nóng)民，一種是從Fudoloop上獲取農(nóng)產(chǎn)品信息的批發(fā)商，F(xiàn)udoloop分別為兩種用戶進(jìn)行了設(shè)計。
圖片來源：Fudoloop
在設(shè)計Fudoloop時存在這樣一個問題，農(nóng)產(chǎn)品市場中的相關(guān)從業(yè)人員普遍年齡較大、受教育程度低、軟件使用經(jīng)驗很少，面對這樣的用戶，顯然通常的軟件設(shè)計并不符合他們的需求，因此Fudoloop的界面設(shè)計非常簡單且信息突出，從事農(nóng)產(chǎn)品相關(guān)工作的人員可以輕松的使用Fudoloop完成農(nóng)產(chǎn)品信息的更新，而不會因為學(xué)習(xí)產(chǎn)生很大的壓力。Fudoloop還在大型農(nóng)業(yè)貿(mào)易展覽會邀請了一些行業(yè)內(nèi)的人員和用戶參與到了產(chǎn)品的體驗中，并收集了他們反饋的建議，以改善產(chǎn)品。
圖片來源：IDEO
NJC在設(shè)計Fudoloop時充分堅持了以人為中心的原則，考慮到服務(wù)涉及的不同用戶，并根據(jù)用戶本身的特點(diǎn)和需求進(jìn)行設(shè)計。NJC的CMO佐藤賢一是這樣評價Fudoloop的：“當(dāng)簡單、以人為本的思想?yún)R聚在一起時，創(chuàng)新就會發(fā)生”。
b.協(xié)作(Collaborative)
這條原則說的是，不同背景和職能的利益相關(guān)者應(yīng)該參與到服務(wù)設(shè)計流程中，收集多方訴求，發(fā)現(xiàn)不同看待問題的角度，才會更好的解決問題。
在美國舊金山，有一所學(xué)校和Revolution Foods這家餐飲公司合作，為學(xué)校內(nèi)的人員提供豐富的、營養(yǎng)的午餐，但是實際來餐廳就餐的人數(shù)與預(yù)期相差很大，數(shù)據(jù)顯示，有72%可以承擔(dān)起午餐費(fèi)用的人并沒有來到食堂吃午餐。經(jīng)過調(diào)查發(fā)現(xiàn)其中的原因，很多學(xué)生等校內(nèi)人員并不愿意排長隊或者匆忙的吃完午餐，因此他們選擇了去校外享受午餐的時間。
為了改善這種情況，這所學(xué)校請來了全球頂尖的設(shè)計咨詢公司IDEO，他們與1300多名學(xué)生、父母、營養(yǎng)人員、董事會專員、校長、老師和社區(qū)團(tuán)體等利益相關(guān)者一起工作，重新去設(shè)計了學(xué)校的午餐，并且制定了針對三種年齡的就餐體驗的建議，完成了飲食、就餐空間、新技術(shù)使用等多方面的優(yōu)化和設(shè)計。
圖片來源：IDEO
最終，學(xué)校完美的改善了午餐服務(wù)的體驗，這其中包含了所有利益相關(guān)者的想法和工作，因此設(shè)計成果也被人們所接受，越來越多的校內(nèi)人員會選擇學(xué)校的午餐，之后，這種設(shè)計模式也被舊金山的許多學(xué)校采納和推出。
所以，服務(wù)中涉及到的利益相關(guān)者有很多，多收集他們的想法與建議，甚至讓他們參與到服務(wù)設(shè)計中去，問題會得到更好的解決。
c.迭代(Iterative)
迭代是一個不斷接受反饋不斷優(yōu)化的過程，如此重復(fù)執(zhí)行，讓產(chǎn)品變得越來越好。服務(wù)設(shè)計也需要迭代，不要避免犯錯誤，而是從錯誤中學(xué)習(xí)和改變，同時也要不斷的收集各方的反饋信息，這些信息是服務(wù)進(jìn)行迭代的核心所在。隨著互聯(lián)網(wǎng)的發(fā)展，迭代的思維早已滲透到每一個互聯(lián)網(wǎng)產(chǎn)品，此處就不再過多解釋。
d.有序(Sequential)
服務(wù)設(shè)計應(yīng)該是一系列相互關(guān)聯(lián)的活動，并且是按照順序進(jìn)行的，精準(zhǔn)的把控服務(wù)每一個環(huán)節(jié)的節(jié)奏，用戶才能獲得更愉悅的體驗。
以外賣為例，用戶的使用過程包含訂外賣時的商家選擇到下單過程，下單后配送外賣，用戶收到外賣和用餐后這幾個過程，而服務(wù)的提供者主要包括商家、平臺和外賣小哥，為了保證用戶能夠獲得流暢的服務(wù)體驗，需要各個服務(wù)提供者在服務(wù)展開的不同環(huán)節(jié)推出優(yōu)質(zhì)的服務(wù)，如下圖。
在訂外賣時，平臺會為用戶推出“超值優(yōu)惠”“限時秒殺”等優(yōu)惠活動，商家推薦、訂單歷史等商家選擇渠道，以及不同的篩選條件，以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后，進(jìn)入到選擇商品并下單的過程，一方面，商家會推出優(yōu)惠的活動、推薦菜品等，另一方面，平臺也會給出自己的優(yōu)惠。
下單后，用戶面臨的是一個配送過程中的等待時間，為了緩解用戶在等待過程中的焦慮情緒，平臺會及時更新和推送外賣小哥的狀態(tài)，如到達(dá)商家、取餐中、與用戶的距離等，同時會給出用戶預(yù)期的送達(dá)時間，若超過預(yù)期時間用戶還可進(jìn)行催單，商家可以聯(lián)系用戶表達(dá)歉意，整個過程用戶對配送狀態(tài)是可視的。
用戶收到外賣時首先會與外賣小哥接觸，包括與外賣小哥提前確定取餐的時間地點(diǎn)，取外賣時的短暫對話等，這些都會影響用戶對服務(wù)的印象，因此外賣小哥需要保證服務(wù)態(tài)度的禮貌和友好。收到外賣后，食品包裝首先給到了用戶對商家的第一印象，然后是餐品是否符合用戶預(yù)期，讓用戶滿意。
在用戶就餐后，首先平臺要提供給用戶評價的功能，用戶可以分享自己就餐的感受，商家也可以通過平臺為用戶提供更多的優(yōu)惠，引導(dǎo)用戶能夠再次回到商家訂餐。
從外賣的案例中我們可以看到，服務(wù)是一個過程，是需要有序展開的，每一個環(huán)節(jié)的體驗都會影響到用戶對服務(wù)的印象，在恰當(dāng)?shù)沫h(huán)節(jié)提供恰當(dāng)?shù)膬?yōu)質(zhì)服務(wù)，才能確保用戶的整體體驗。
e.真實(Real)
服務(wù)本質(zhì)上是無形的，應(yīng)該用“物理元素”來可視化，這樣可以用戶的服務(wù)記憶，增強(qiáng)用戶對他們所接受服務(wù)的感知。
同樣以上述外賣為例，商家為用戶提供餐食，這部分是借助美團(tuán)這個平臺和外賣小哥來完成的，用戶和商家的接觸僅僅是送達(dá)的餐食，因此無法通過像到店體驗一樣，讓用戶感知到商家提供的更多服務(wù)。
為了讓服務(wù)變得更加“有形化”，商家就需要花費(fèi)更多的心思，如圖，商家為了增強(qiáng)用戶對服務(wù)的感知，一般會在在包裝上花費(fèi)很多功夫，精致的包裝讓商家的形象更好且更加值得信任，一些有趣的包裝還可能讓用戶的心情變得愉悅。另外，商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務(wù)，通過這樣的手段，即使用戶并沒有真的接觸到商家，體驗也會變得很好，商家的形象也會提升很多。
圖片來源：古田路9號
f.整體(Holistic)
整體就是要著眼于整個用戶旅程，考慮用戶與服務(wù)的每個觸點(diǎn)（觸點(diǎn)的概念后文會進(jìn)行介紹），并兼顧多方利益相關(guān)者的需求。也就是所謂的全方位服務(wù)體驗，考慮服務(wù)環(huán)境的方方面面，沒有任何遺漏。這個原則實施起來并不是那么簡單，從整體角度思考問題會使問題變得復(fù)雜。不過在服務(wù)設(shè)計中，是有一些方法和工具是可以幫助我們完成整體思考的，比如服務(wù)藍(lán)圖。
服務(wù)設(shè)計的常用方法-服務(wù)藍(lán)圖
a.服務(wù)藍(lán)圖簡介
服務(wù)藍(lán)圖是一張圖表，通過列出在每個階段發(fā)生的、不同角色執(zhí)行的所有活動，顯示了服務(wù)的整個過程。如圖所示是一個服務(wù)藍(lán)圖的簡單示例，垂直方向上展示服務(wù)中的利益相關(guān)者，水平方向上為用戶的歷程，也就是用戶經(jīng)歷的不同階段。在服務(wù)藍(lán)圖中有兩條線，一條是可見線（line of visibility），可見線上方為用戶可與之交互的服務(wù)，也可以稱之為“前臺”，可見線下方代表的是后臺進(jìn)程，用戶無法看到但需要給用戶提供支持，后臺進(jìn)程還可以存在內(nèi)部交互線，用來表示內(nèi)部人員的聯(lián)系。用戶與前臺服務(wù)之間存在另外一條交互線（line of interaction），用來表示用戶與服務(wù)之間的接觸。
圖片來源：Service Design Tools
明確了服務(wù)藍(lán)圖的大致框架之后，還需要注意服務(wù)藍(lán)圖中一個非常重要的概念——觸點(diǎn)。觸點(diǎn)就是在服務(wù)的各階段，用戶和產(chǎn)品、服務(wù)、后臺產(chǎn)生的接觸，每個觸點(diǎn)也是服務(wù)可以進(jìn)行展開和優(yōu)化的方向。
b.Uber服務(wù)藍(lán)圖繪制
為了明確服務(wù)藍(lán)圖的繪制和分析過程，下面將結(jié)合下圖所示的Uber服務(wù)藍(lán)圖進(jìn)行說明。
圖片來源：Medium
(1) 明確用戶歷程
用戶使用Uber打車服務(wù)主要可以簡單分為以下三個階段：注冊（下載APP - 新用戶注冊），乘車階段（下單 - 等待車輛到達(dá) - 乘車 - 到達(dá)目的地）、乘車后（付款 - 評價）。
(2) 明確利益相關(guān)者
用戶與之產(chǎn)生互動的前臺服務(wù)人員為司機(jī)，而設(shè)計師、開發(fā)人員、項目經(jīng)理等負(fù)責(zé)后臺的服務(wù)支持，以保證Uber按照預(yù)期的目標(biāo)運(yùn)作。
(3) 明確前后臺活動
一方面，需要明確和用戶接觸的前臺活動有哪些，Uber打車服務(wù)中和用戶產(chǎn)生接觸的主要為司機(jī)及車輛，因此需要確保司機(jī)是合格的、車輛內(nèi)部的環(huán)境是干凈舒適的，同時司機(jī)在與用戶接觸的過程中需要提供禮貌的問候和交流，滿足用戶在乘車過程中的要求，完成乘車費(fèi)用的收取，提醒用戶離開前帶好隨身物品，以及評價乘客等。
另一方面，用戶對后臺的流程可能并不了解，但需要明確哪些后臺活動和支持會對用戶產(chǎn)生影響。比如在用戶下單時能夠自動獲取用戶定位，告知用戶預(yù)期的時間和價格，以及發(fā)送給用戶司機(jī)的狀態(tài)等。
在明確前后臺活動時，我們可以以用戶歷程為線，分步驟進(jìn)行分析，確保每個環(huán)節(jié)中涉及到的前后臺活動沒有被遺漏。
(4)明確關(guān)鍵觸點(diǎn)
在服務(wù)藍(lán)圖中我們可以標(biāo)注用戶與服務(wù)的主要接觸點(diǎn)，針對觸點(diǎn)進(jìn)行設(shè)計是提升服務(wù)體驗的一個重要和有效的手段。
在Uber打車服務(wù)中還有一些需要注意的觸點(diǎn)，一是等待時間，這包括用戶發(fā)起乘車請求后、付款時以及評價司機(jī)時，等待時間是造成用戶體驗較差的一個原因，因此需要注意標(biāo)注出這些觸點(diǎn)，并想辦法優(yōu)化，在服務(wù)設(shè)計中需要注意相關(guān)環(huán)節(jié)的應(yīng)盡量簡單，減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點(diǎn)，如司機(jī)態(tài)度不友好、乘客下車時忘記帶隨身物品等，可能造成失敗的服務(wù)體驗的觸點(diǎn)應(yīng)該精心地去設(shè)計，避免這樣的情況發(fā)生。
通過以上過程我們完成了Uber服務(wù)藍(lán)圖的繪制，從中可以獲取到Uber打車服務(wù)的整體概貌及其相互關(guān)系。
///
結(jié)語
服務(wù)設(shè)計的思維能夠幫助我們從全局的角度去審視和思考，發(fā)現(xiàn)更多改善服務(wù)的可能性，從而為用戶提供更好的體驗。因此對于產(chǎn)品和設(shè)計等相關(guān)人員來說，不能僅僅把目光放在產(chǎn)品本身，而是要從服務(wù)的角度去正確看待產(chǎn)品和用戶的關(guān)系，以用戶為中心，找到用戶與產(chǎn)品的每一個接觸點(diǎn)來進(jìn)行服務(wù)設(shè)計，這樣才能保證用戶在整個流程中都能得到好的體驗。
文章來源：站酷 作者：百度MEUX
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
先看目錄！
1.什么是流量分發(fā)
2.為什么要做流量分發(fā)
3.首頁中流量分發(fā)的類型
4.流量轉(zhuǎn)化模型
5.流量如何分配的
6.設(shè)計案例與流量分發(fā)
7.如何衡量流量的效果
相信大家對流量并不陌生，我們在運(yùn)營的口中經(jīng)常會聽到這個詞：流量。運(yùn)營通過各種手段和策略吸引用戶來接觸、使用我們的產(chǎn)品，從而吸引到了許多的流量，流量越多機(jī)會也就越多，比如一家奶茶店門店選址要考慮的最關(guān)鍵因素就是人流量。
流量分發(fā)的本質(zhì)其實就是用戶需求分發(fā)，我們設(shè)計師的價值就在于如何讓這些流量發(fā)揮出更大的價值，讓流量價值和用戶價值相匹配。流量就像是一片海，海水通過不同的分支流入大陸形成了江、河，如果沒有這些分支，那么這些水永遠(yuǎn)無法被利用，發(fā)揮出它們的價值。流量分發(fā)我們最常見的方式有：搜索分發(fā)、算法分發(fā)、社交分發(fā)、人工分發(fā)、付費(fèi)分發(fā)
舉一個比較典型的例子：海底撈在進(jìn)行流量轉(zhuǎn)化之前，并不是單純的在店門口給用戶一排座位讓用戶去等待，因為這部分用戶就像沒有被分流的海水是死的，這時候的用戶其實也有自己的目標(biāo)，就是消磨時間，那么海底撈就提供了一系列服務(wù)讓這部分用戶活動起來，比如給零食、玩具、做指甲等等，于是這部分用戶其實就相當(dāng)于進(jìn)入了就餐流程的分支，提前享受服務(wù)和餐廳提供的福利，除了提升用戶體驗以外，也消化了大部分的流量。試想一下如果一下來了許多客戶，但你只有十幾張椅子讓用戶等待，勢必造成更多的損失。
流量是無序混亂的，只有到它應(yīng)該去的地方，它才會有價值。產(chǎn)品與用戶雙方都需要有清晰的目標(biāo)，產(chǎn)品提供解決方案和導(dǎo)流不同的場景，用戶負(fù)責(zé)完成目標(biāo)給業(yè)務(wù)帶來價值。
流量分發(fā)最典型的就是電商產(chǎn)品，因為業(yè)務(wù)目標(biāo)非常明確，就是實現(xiàn)gmv的提升，但同時其用戶的需求場景也是相對來說很復(fù)雜的。那么一個好的流量分發(fā)策略，可以大大的減少用戶完成目標(biāo)的時間和精力，也讓產(chǎn)品可以準(zhǔn)確的掌握用戶的需求流向。
流量不分發(fā)或者錯誤分發(fā)就會造成更多的消耗，什么意思呢？我們舉個例子，譬如下方的模坑app首頁，首頁中雖然提供了搜索、分類和標(biāo)簽欄不同模塊，但是核心的內(nèi)容顯示區(qū)域則只有一張預(yù)售產(chǎn)品的大圖。我們知道用戶類型非常多，這樣的布局對于小白和第一次用此款產(chǎn)品的小白來說會十分迷茫，因為最顯眼的內(nèi)容中并沒有他們想要獲取的信息。我們不求滿足所有用戶，但至少需要覆蓋大部分用戶和核心用戶，此外，這樣的形式就像一個漏斗，只靠一個出口漏水，效率自然不高。
同時為了達(dá)到最大化，流量的分發(fā)并不是單向的，而是并行、串聯(lián)的。比如你可以在通過搜索找到某件商品，參與活動、運(yùn)營板塊、商品分類、網(wǎng)紅直播等等區(qū)域都可以發(fā)現(xiàn)這個商品，同理，你想要購買視頻app的會員，不僅僅可以去個人中心，你還可以去詳情。所以流量就像一個大網(wǎng)格，單純的給漏斗戳幾個洞還不夠，甚至要把這些洞用很多根管子串起來。
流量分發(fā)可以幫助盤活新業(yè)務(wù)以及尋找新的價值，例如我們之前的電商產(chǎn)品在前期是以時間軸為核心的消化方式，商品以單品列表平鋪的形式展示，在產(chǎn)品發(fā)展過程中形態(tài)會發(fā)生變化，單純以這樣的形態(tài)承載用戶需求肯定是不夠的，所以更多運(yùn)營板塊和推薦可以分擔(dān)這部分“舊”流量。
我們在移動端的首頁可以?？匆姷念愋陀校核阉?、宮格型板塊、信息流、banner、fab等。
搜索給有明確需求的用戶提供了入口，同時在搜索這個顯性場景中我們也可以細(xì)化出更多的場景給流量提供更有效的支持
例如搜索場景下除了熱門搜索、搜素歷史以外還可以提供不同的分類內(nèi)容推薦。
逐漸走下神壇的banner，曾經(jīng)可是在UI界叱咤風(fēng)云，在當(dāng)時由于他是首頁占比一哥，很多產(chǎn)品在首頁規(guī)劃中都認(rèn)為banner會承載大部分的流量，尤其是像淘寶等電商產(chǎn)品，banner不僅僅可以靠圖片吸引用戶，在做一些大促活動時候還可以變成氛圍擔(dān)當(dāng)，和導(dǎo)航欄上下呼應(yīng)。我們說首頁是寸土寸金的，但是大家發(fā)現(xiàn)沒有，banner的流量和他本身的價值可能不相匹配。也就是說雖然他面積很大，但是用戶點(diǎn)擊率相比于其他板塊并沒有什么優(yōu)勢，甚至還低。所以淘寶目前的首頁已經(jīng)看不到banner了，這個區(qū)域可以放下更多的運(yùn)營區(qū)塊和流量入口，當(dāng)需要它的時候再配置起來就可以了。
這個板塊除了業(yè)務(wù)分類的“金剛區(qū)”以外還有運(yùn)營活動的配置區(qū)域，我們先來說以業(yè)務(wù)劃來劃分的流量入口，以這樣的形式來分配流量是常規(guī)的手段，當(dāng)然他也是有利弊的，有利的地方在于幾乎每個業(yè)務(wù)板塊雨露均沾，至少是在同一屏幕中呈現(xiàn)，還可以左右滑動切換更多。弊端的話就是層級深，并且用戶瀏覽效率低不聚焦，對于那些泛瀏覽型的用戶并不友好，因為你進(jìn)入一個業(yè)務(wù)板塊后發(fā)現(xiàn)內(nèi)容自己 不感興趣需要就需要再返回。所以這樣的分流更適合深度使用產(chǎn)品的用戶
那有沒有另外一種形式可以分配流量給不同業(yè)務(wù)板塊呢？當(dāng)然是有的，比如tab標(biāo)簽，有了tab標(biāo)簽，泛瀏覽的型的用戶會更喜歡，他們能更快的找到自己喜歡的內(nèi)容，比如bilibili、騰訊視頻的首頁，這個當(dāng)然也和產(chǎn)品目標(biāo)有關(guān)，他們希望讓用戶看到更多的內(nèi)容，讓產(chǎn)品更扁平化。
那么你即想扁平又想讓用戶直觀的看到業(yè)務(wù)板塊分類怎么辦呢，你可以這么做，就像大眾點(diǎn)評一樣上邊是宮格，下面是tab標(biāo)簽
Fab和cta可以說是比較另類的存在了，幾乎就是你想讓用戶去點(diǎn)，那你就放，所以這樣的入口流量路徑就比較單一，無法沉淀和升級流量，是短期目標(biāo)的形態(tài)。fab的這樣的懸浮入口會一直在首頁顯示，通常產(chǎn)品為了吸引用戶會將其設(shè)計的比較吸引人，比如添加動效等，但是fab也會干擾用戶正常瀏覽界面，所以一般可以用透明、伸縮的方式解決，不過伸縮要考慮用戶實際操作，避免頻繁的伸縮造成的更多干擾。
大部分產(chǎn)品對于泛瀏覽用戶的匹配場景都是提供信息流，但是單純的給信息流依然無法讓用戶深入沉淀，所以需要在信息流中穿插一些分流入口，譬如品牌、話題、活動、排行等，讓用戶有更深入的瀏覽，這樣才能促成轉(zhuǎn)化。
流量獲取很容易，但是我們的目標(biāo)并不是讓用戶進(jìn)來逛一圈就走，所以流量的轉(zhuǎn)化我把他以這樣的模型展示，也就是說流量從獲取到沉淀再到最后的進(jìn)化過程。
獲取新流量的方式很多，例如社交分發(fā)、線下活動引流等等，內(nèi)部流量也可以通過打通多個板塊進(jìn)行流量互換。但是這些流量是表面的，不做進(jìn)一步整合也就沒有實際價值，所以我們需要將其沉淀下來。
流量就像過江之鯽，如果你想讓這條江里有更多魚，你首先需要有個兜來留住這些用戶，為了不讓這些魚繼續(xù)游走，你可以給更多豐富的食物、創(chuàng)造更好的環(huán)境。如何讓魚更好的在這里生存呢，要讓他們熟悉你的一切，要讓這些魚在其中發(fā)展、繁衍，所以當(dāng)我們用內(nèi)容吸引住用戶后，要讓用戶留下來成為深度用戶，這個前提就是讓用戶更長時間的使用產(chǎn)品，如何提升產(chǎn)品使用時長呢？譬如通過智能算法在很多斷流的板塊提供偏好推薦、幫助用戶預(yù)判場景、社交互動、讓用戶有成就感、積分體系、個人成長系統(tǒng)、個人品牌塑造等。
之前兩步依然是在存量市場里盤流量，這是對的，從十四五國家發(fā)展規(guī)劃來看，我們能看到一個關(guān)鍵的變化，就是從“速度”到“質(zhì)量”的變化，如果你的流量已經(jīng)完成沉淀，那么可以不著急找增量，而是找進(jìn)化的方法。當(dāng)然以下是我個人的一些思考，僅供參考。從淺層到深入，從深入到高效，從高效到創(chuàng)造，所以當(dāng)你的流量已經(jīng)比較成熟的時候，可能更多需要讓這些用戶再創(chuàng)造新的內(nèi)容，他們可以利用你提供的產(chǎn)品創(chuàng)造自己的玩法，即便你不提供任何的幫助也可以形成生態(tài)，甚至還可以幫你引入增量市場。
譬如玩社群的都知道，引流簡單，但是要維持社群的熱度和培養(yǎng)超級粉絲是很難的，但是一旦你做到了，那么這些人就是幫你創(chuàng)造更多的價值，所以你需要一個龐大且智能的基建，還有更好的服務(wù)。
判斷流量分配是否合理的標(biāo)準(zhǔn)不在于多和廣，而在于核心價值與目標(biāo)是否達(dá)成。譬如內(nèi)容型電商（抖音、快手）和傳統(tǒng)型電商（淘寶、京東），內(nèi)容型電商的流量是依靠內(nèi)容帶動電商去轉(zhuǎn)化，更多的是依靠內(nèi)容的質(zhì)量，而傳統(tǒng)型電商依靠的是商品，那么在這兩個產(chǎn)品中，前者的流量更多還是要流向內(nèi)容而非商品。
再舉個例子，在首頁的板塊中，我們默認(rèn)流量從大到小是板塊越靠上的越多，越靠下的越少是嗎？也不是，板塊的分配是需要結(jié)合用戶需求的，比如你規(guī)劃的板塊視覺上很明顯但是從數(shù)據(jù)上看流量很低，那么這個板塊就是有問題的，或者板塊不明顯但流量很高，這些都不是正常表現(xiàn)。
所以流量分發(fā)之前就要確定好，分發(fā)的目的和希望達(dá)成的目標(biāo)。是能夠讓新用戶更快了解產(chǎn)品，還是讓成熟用戶在使用時更高效，或者大力宣傳新業(yè)務(wù)等等，不是一股腦兒隨大流的把蛋糕切成幾塊。
不知道有沒有在做抖音的小伙伴，抖音的流量分發(fā)讓很多人搞不明白，其實抖音屬于一個強(qiáng)運(yùn)營平臺，當(dāng)用戶制作一個視頻發(fā)布后，他的流量并不是全部來自于已經(jīng)關(guān)注你的粉絲，一部分是通過判斷你的視頻內(nèi)容和質(zhì)量分發(fā)給相應(yīng)標(biāo)簽、可能會喜歡的用戶。但是快手和抖音不同，快手的社交分發(fā)策略更重，用戶發(fā)布的視頻，已經(jīng)關(guān)注的粉絲分發(fā)到的比例會更高，這樣用戶的互動也會更強(qiáng)。
通過一些設(shè)計案例我們來看看設(shè)計在流量分發(fā)中起到的作用。
流量與曝光是有關(guān)系的，為了爭取更多的曝光我們可以采用這樣的方式進(jìn)行設(shè)計，通常我們可以看到橫向滾動結(jié)束后進(jìn)入下一級界面需要點(diǎn)擊更多，但點(diǎn)擊的成本就高于滑動，所以在這里可以讓用戶直接通過滑動進(jìn)入下一級界面，增加曝光。同時滑動是承接上一步手勢操作，很連貫，相比點(diǎn)擊的效率也會越高。
我們經(jīng)常在用產(chǎn)品的時候能看到同一個界面可以從多個不同的入口進(jìn)來，比如像小鹿茶app點(diǎn)擊下單跳轉(zhuǎn)到商品列表，也可以直接點(diǎn)擊底部第二個tab切換過來。比如你可以在夜宵板塊和品牌板塊都能找到kfc，讓一個區(qū)域的流量不僅僅從單獨(dú)的方向流入，這樣可以滿足更多用戶的場景需求。像淘寶的商品流量來自多個不同的層級
還有我們可以將更深層級的業(yè)務(wù)板塊提到上一層級，提高子業(yè)務(wù)板塊的點(diǎn)擊率和曝光，譬如貝殼在下方的tab板塊中除了信息流內(nèi)容外還嵌入了精選、人氣、熱門三個分類。還有類似像德邦app這樣的工具型首頁其實版面利用率太低，本身產(chǎn)品功能不多其實不需要劃分出這么多板塊，讓每個板塊流量這么分散，可以直接在首頁中加入查單號的功能，并且將寄件收件歷史平鋪在首頁。
淘寶商品詳情中會有店鋪和店鋪推薦內(nèi)容，方便用戶查看更多偏好商品，提高客單價。具有電商屬性的社交產(chǎn)品在用戶圖文中可以添加商品鏈接、標(biāo)簽、話題等等。還有淘寶在首頁的feed流中點(diǎn)擊商品會進(jìn)入另一個feed流，這里的商品又進(jìn)行了算法權(quán)重的加持，會更加準(zhǔn)確與多樣，由于本身處于逛場景的用戶，在這一步再次幫助用戶進(jìn)行準(zhǔn)確選擇，可以提高轉(zhuǎn)化，當(dāng)然了，這樣中心化的分流方式對于商家而言不太友好。
衡量流量分發(fā)的效果，我們可以查看板塊的點(diǎn)擊率（UV/PV）和預(yù)期。比如在某個周期中，有100個人進(jìn)入這個界面，而這個界面中的banner最終點(diǎn)擊量為1000次，那么這個banner的點(diǎn)擊率為1000/100=10，平均每人點(diǎn)擊了10次。點(diǎn)擊率越高，該入口的流量自然更大。
每個產(chǎn)品對于活躍的標(biāo)準(zhǔn)不同，比如一個商場衡量活躍用戶數(shù)會算那些進(jìn)來蹭空調(diào)的大伯大媽嗎？還是衡量那些有消費(fèi)行為的顧客，同理一個產(chǎn)品計算活躍不是單純看每天有多少人登錄瀏覽就算活躍的。
那么觀察活躍度有什么用呢？比如我們之前做一個大促活動，每個板塊都有活動，但是大促結(jié)束后，只有童裝類板塊的日活流量在持續(xù)下降，于是我們通過相關(guān)調(diào)研，發(fā)現(xiàn)是因為童裝類的品類太少，用戶沒有逛和再次購買的興趣。
一波流量進(jìn)入后，我們不僅要看他們?nèi)チ四睦?，還要查看這波流量在這里做了什么，于是我們通過查看頁面停留時長可以判斷一些問題，比如
1. 如果用戶在本該停留時長長的頁面反而停留時間短可能是當(dāng)前內(nèi)容不感興趣、看不懂、閃退、臨時有事等等
2.反之，在本該停留時間短但是用戶停留時間長，說明可能文案排版或者解釋的不清楚、用戶可能在思考、臨時有事等等
一波流量進(jìn)入后，可能進(jìn)入更深級界面也可能停留原地，那么還有一部分可能就直接離開了，查看流量的流失可以幫助我們判斷以下問題
1.如果用戶在進(jìn)行某個多步驟任務(wù)，當(dāng)我們發(fā)現(xiàn)其在即將完成時退出了，或者在中間步驟退出了，那說明可能出現(xiàn)了某些問題讓用戶進(jìn)行不下去
2.用戶可能對當(dāng)前流程沒有預(yù)期，也可能覺得有風(fēng)險也可能是對某個地方產(chǎn)生不滿
流量就像是一群被標(biāo)記過的小白鼠，從哪里來到哪里去，中間做了什么，都被我們記錄了下來，那么頁面訪問路徑也是我們查看這些流量去向的關(guān)鍵指標(biāo)，例如cctalk在冷啟動后默認(rèn)打開發(fā)現(xiàn)頁面，我們進(jìn)行了一些用戶的調(diào)研，發(fā)現(xiàn)90%以上的同學(xué)在進(jìn)入后都會切換到上課這個界面，這里可以思考的是作為產(chǎn)品我們發(fā)現(xiàn)用戶有這樣的行為，需不需要對產(chǎn)品進(jìn)行優(yōu)化，產(chǎn)品這樣的設(shè)計是否考慮到的是新用戶和培養(yǎng)用戶習(xí)慣讓更多課程有曝光。其實這里可以做一些判斷，如果用戶近期有購課、上課的記錄和行為，默認(rèn)打開上課板塊。若新用戶或者長期沒有上課行為的用戶則默認(rèn)打開發(fā)現(xiàn)界面。這樣就可以起到更精準(zhǔn)的分流。
8.總結(jié)
流量誠可貴，流失就白費(fèi)。
今天分享就到這里，你學(xué)廢了嗎？
文章來源：站酷 作者：應(yīng)駿
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
QQ 購物號是專門為 QQ 用戶定制的購物平臺，2020 年隨著疫情過后，整體電商行業(yè)開始恢復(fù)階段，QQ 購物號計劃了今年雙 11 大促季活動，活動的業(yè)務(wù)目標(biāo)是希望強(qiáng)化特殊樣式設(shè)計來促進(jìn)購買轉(zhuǎn)化，驅(qū)動整體大盤消耗與效果提升。為此如何通過設(shè)計賦能業(yè)務(wù)，從而突破增長的瓶頸呢？
購物號是屬于 QQ 的訂閱號服務(wù)，整體的曝光位置并沒有很好，而且這次大促設(shè)計的落腳點(diǎn)只通過外層的樣式和推送頁面的廣告內(nèi)容進(jìn)行展示。
以及要如何去滿足不同電商廣告主的投放訴求，和不同素材規(guī)格的投放適配，這都是需要去考慮和解決的問題。
1. 通過品牌關(guān)鍵詞定義視覺情緒版
QQ 購物號用戶群主要還是 00 后為主，這些年輕群體的購物趨勢變化非?？?，審美要求也越來越高！
所以前期思考了大量的關(guān)鍵分別為：活力/期待/年輕/狂歡/心動/發(fā)現(xiàn)/熱愛，最后確定以活力/熱愛為這次大促季的品牌關(guān)鍵詞
2. 不同時期變化
隨著大促運(yùn)營節(jié)奏的慢慢展開，視覺側(cè)也需要考慮到相應(yīng)的視覺變化去引導(dǎo)用戶的感官，避免用戶審美疲勞。
嘗試前期的預(yù)熱階段通過特殊視覺吸睛，第一眼先抓住用戶的眼球，進(jìn)入狂歡階段，則可以利用動效加持來進(jìn)一步吸引用戶。
1. 讓容器層面提升專屬感
通過多方案從常規(guī)到異形多結(jié)構(gòu)卡片探索，這里為了避免品牌標(biāo)識壓在廣告素材上會有遮擋問題，同時又要突出品牌標(biāo)識。
所以前期預(yù)熱期選用卡片 F 更能強(qiáng)化品牌感，可以讓用戶更有代入感，當(dāng)?shù)搅丝駳g期選用卡片 G，通過擴(kuò)大視覺著色區(qū)域，提升品牌專屬內(nèi)容曝光優(yōu)先級，增加用戶吸引力。
2. 利用情感化氛圍與用戶溝通
從前期的分析得出 QQ 購物的用戶群是非常年輕的 00 后，所以整體視覺上需要運(yùn)用更具年輕和活力的情感化氛圍。
通過品牌字體上使用現(xiàn)代硬朗風(fēng)格，巧妙的融入氣泡元素，提升大促氛圍，在傳播上結(jié)合 QQ 購物的品牌符號。
包括品牌頭像以及卡片的氛圍圖形也采用氣球泡泡，彰顯活力感。整體保持一致的視覺體驗。
對于整體色系上延續(xù) QQ 購物的品牌基調(diào)，輕漸變暖紅色更能營造年輕、購物、活力的調(diào)性，讓用戶更有情感上的共鳴。
3. 通過動效不斷激發(fā)用戶的行動力
整體的動效節(jié)奏通過吸引-激發(fā)-共鳴-行動四重奏來進(jìn)行，讓用戶更深刻去感知大促狂歡期的感知。
比如在外層入口上通過動態(tài)頭像來吸引用戶注意力，當(dāng)用戶進(jìn)入 QQ 購物號后，利用帶有大促品牌的禮包彩蛋來制造驚喜感，吸引用戶搶禮包。
再通過卡片若隱若現(xiàn)的動態(tài)圖形去烘托氛圍感達(dá)到用戶共鳴，以及行動按鈕的微動效觸發(fā)用戶行動。
4. 高效適配于不同規(guī)格廣告位
QQ 購物支持投放多種廣告位，因此定下整體視覺風(fēng)格后，快速對不同規(guī)格廣告位進(jìn)行適配復(fù)用。
廣告主提供不同素材規(guī)格均可適配投放，降低廣告主成本，也讓用戶達(dá)到視覺的統(tǒng)一體驗
經(jīng)過這次官方活動大促的主視覺風(fēng)格塑造，我們沉淀下來整套視覺框架結(jié)構(gòu)。
通過制定設(shè)計規(guī)范可以讓廣告主自定義皮膚模版，以及分不同行業(yè)模版，比如拼多多五周年的定制模版以及在寒假期間推出的 K12 教育行業(yè)模版。
不僅降低廣告主制作成本，也通過更吸睛的皮膚模版提升促進(jìn)購買轉(zhuǎn)化，驅(qū)動整體大盤消耗與效果提升！
本次活動的數(shù)據(jù)指標(biāo)目標(biāo)達(dá)成，整體的增長環(huán)比 19 年的雙 11 和今年的 618 均有了較大幅度的提升！
在設(shè)計策略與運(yùn)營策略配合優(yōu)化下，11.01-11.11 的廣告主整體預(yù)算消耗超出 4 千萬，完成預(yù)期超出 16%，也提升用戶的轉(zhuǎn)化率。
回顧整個雙 11 大促活動，我最大的感悟是要有全局觀！
前期基于對產(chǎn)品目標(biāo)的了解，從更高的角度去理清產(chǎn)品思路定下設(shè)計策略，結(jié)合個人設(shè)計手法不斷的打磨細(xì)節(jié)。當(dāng)然整個過程會碰撞出很多思考和糾結(jié)，需要不斷的實踐、驗證。
隨著廣告主對品效要求越來越高，未來電商的廣告形式也開始隨著精細(xì)化運(yùn)營的方向發(fā)展，這些變化可能對商業(yè)化設(shè)計師來說，或許是一種挑戰(zhàn)和機(jī)遇
文章來源：優(yōu)設(shè)網(wǎng) 作者：土撥鼠
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現(xiàn)彈層”、“出現(xiàn)浮層”、展示“對話框”、彈出“彈框”、“出現(xiàn)對話框”諸如此類的話術(shù)。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應(yīng)該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應(yīng)該如何應(yīng)用、如何設(shè)計。
恰好筆者近期在設(shè)計彈出層組件，本篇文章將結(jié)合自己的實戰(zhàn)經(jīng)歷，自己對彈出層組件的理解和設(shè)計經(jīng)驗分享給大家，希望幫助大家對彈出層組件有更清晰的認(rèn)知和理解。
首先我們看一下彈出層組件的定義：當(dāng)觸發(fā)某項操作時，在頁面上方展示的彈出層容器，容器內(nèi)可展示文本、按鈕、列表、標(biāo)簽、表單項等內(nèi)容，英文名稱定義為 Popup。
△ 彈出層組件的構(gòu)成
根據(jù)彈出位置的不同，我們又可以將 Popup 組件細(xì)分為如下 5 種樣式。
△彈出層組件的 5 種樣式
看到彈出層組件的樣式，想必大家已經(jīng)聯(lián)想到日常用的比較多的組件了，比如“Alert 確認(rèn)框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎(chǔ)的組件，基于該組件我們可以開發(fā)通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質(zhì)上都是彈出層。
“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據(jù)自身的規(guī)范對相關(guān)組件進(jìn)行命名。Material Design 和 iOS 官方規(guī)范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發(fā)整理了組件之間的對應(yīng)關(guān)系。后文會詳述每種組件的定義及應(yīng)用。
△MD 和 iOS 規(guī)范中的彈出層組件
在詳述組件之前，還需要向大家傳達(dá)一個概念“模態(tài)”，即平時我們常說的“模態(tài)彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態(tài)彈框”，而是當(dāng)彈框采用了“模態(tài)”的設(shè)計手法時，我們將其簡稱為“模態(tài)彈窗”。
iOS 官方定義為：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻譯過來即：模態(tài)是一種設(shè)計手法，它使用一種臨時性的模式將用戶之前看到的內(nèi)容與當(dāng)前看到的內(nèi)容進(jìn)行區(qū)分，并且需要通過明確的操作才能退出該模式。模態(tài)呈現(xiàn)的內(nèi)容可以：
幫助用戶專注于一個獨(dú)立的任務(wù)或一組緊密相關(guān)的選項，確保用戶收到關(guān)鍵信息，并在必要時采取行動
由此可見，彈層是否為模態(tài)彈層可以根據(jù)具體的使用場景進(jìn)行定義。在 iOS 官方中定義的模態(tài)彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續(xù)的系統(tǒng)中將 Fullsreen 也作為模態(tài)彈層進(jìn)行使用。MD 中的 Dialogs 組件均為模態(tài)，而 sheets 組件不采用模態(tài)設(shè)計手法。
警示型彈框均采用從頁面中間進(jìn)行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認(rèn)的操作、以及破壞性操作之前進(jìn)行提示，警示型彈窗會中斷用戶的任務(wù)流程，影響用戶體驗，因此需注意其使用頻率。
△警示型彈框 Alert Dialog
使用場景：通常在系統(tǒng)級信息的提示，例如權(quán)限的獲取、系統(tǒng)通知，需要明確告知用戶的信息，以及破壞性操作前使用。
△警示型彈框應(yīng)用
根據(jù)用戶在彈層中需要完成的任務(wù)內(nèi)容和任務(wù)數(shù)量，又可分為簡單型和復(fù)雜型彈層。
簡單型彈層
常用于在彈層中展示內(nèi)容，需要用戶進(jìn)行選擇的場景，該場景通常只需要用戶完成一種任務(wù)，比如通過點(diǎn)擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。
彈層中是否存在操作按鈕可根據(jù)實際應(yīng)用場景去確定。通常選擇項條目較少或內(nèi)容簡單易于識別時，可不需要「確認(rèn)」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認(rèn)選項時，可增加「確認(rèn)」按鈕，允許用戶有修改選項的機(jī)會。
△簡單型任務(wù)彈層的組件樣式
△簡單型任務(wù)彈層的組件樣式
彈層中信息的呈現(xiàn)方式又可分為“列表”和“網(wǎng)格”兩種，大多種場景下，均可使用列表展示內(nèi)容，更加符合用戶從上到下的閱讀習(xí)慣；而在分享場景下多通過網(wǎng)格的方式將分享渠道展示出來，增加屏顯的內(nèi)容，同時提高用戶查看信息的效率，具體樣式可參考上圖。
使用場景：簡單型彈層多用在信息的篩選、排序和信息確認(rèn)的場景下使用。且在目前市面上的絕大多數(shù)應(yīng)用中，除原生的安卓應(yīng)用外，大部分應(yīng)用都采用從底部向上彈層和從頂部向下彈層的方式。
△簡單型任務(wù)彈層的應(yīng)用
復(fù)雜型彈層
復(fù)雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務(wù)。
涉及到信息篩選時，通常采用側(cè)邊彈層組件進(jìn)行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態(tài)”的手法，方便用戶快速取消當(dāng)前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統(tǒng)中，很多 APP 應(yīng)用在復(fù)雜的篩選場景下也都采用側(cè)邊彈層的方式。
全屏彈層會將當(dāng)前頁面中的全部信息遮擋，更方便用戶聚焦于當(dāng)前需要完成的任務(wù)，避免用戶的注意力被分散。通常采用模態(tài)的設(shè)計手法，僅當(dāng)用戶觸發(fā)確認(rèn)、取消或關(guān)閉操作時，彈層才會消失。一般全屏彈層中需要包含標(biāo)題、操作按鈕、內(nèi)容區(qū)域。用戶在全屏彈層中需要完成多個任務(wù)，因此內(nèi)容區(qū)域中也會包含多個組件。例如“按鈕、輸入框、標(biāo)簽、開關(guān)、列表、日期選擇”等。
△復(fù)雜型任務(wù)彈層的組件樣式
使用場景：通常用于完成復(fù)雜任務(wù)的表單信息填寫、內(nèi)容篩選、搜索和內(nèi)容展示。
△復(fù)雜型任務(wù)彈層的應(yīng)用
需要單獨(dú)說明氣泡框組件
在 iOS 的官方定義中，氣泡框組件應(yīng)用于 iPad 應(yīng)用程序，在 iPhone 應(yīng)用程序中，通過以全屏模態(tài)視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進(jìn)行應(yīng)用的。例如，在手機(jī)端，氣泡框組件更多被用于簡單信息的展示與選擇。
△Popovers 氣泡框的應(yīng)用
小結(jié)：
筆者按照使用場景、信息的復(fù)雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務(wù)型”，并且枚舉了常用的 MD（安卓系統(tǒng)遵循的規(guī)范）和 iOS 兩大規(guī)范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業(yè)務(wù)場景是復(fù)雜的、多樣的，各位設(shè)計師也需要結(jié)合實際的業(yè)務(wù)場景和設(shè)計目標(biāo)，靈活的使用組件。
△彈出層組件的類型與使用場景
1. 設(shè)計目的
首先需要理解我們?yōu)槭裁匆O(shè)計組件，組件最終設(shè)計的目標(biāo)是什么，筆者從“設(shè)計側(cè)和技術(shù)側(cè)”兩方面談?wù)勛约旱睦斫狻?
設(shè)計側(cè)：規(guī)范的組件設(shè)計，對內(nèi)有利于全公司的設(shè)計師對組件的使用有統(tǒng)一的認(rèn)知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設(shè)計師快速學(xué)習(xí)和上手，提高設(shè)計效率。對外也有利于保證設(shè)計上線后的一致性和規(guī)范性，方便用戶對本公司產(chǎn)品建立統(tǒng)一的心理認(rèn)知。
技術(shù)側(cè)：通用的基礎(chǔ)組件，具有可復(fù)用性，能夠減少重復(fù)開發(fā)，大大提高開發(fā)效率。
組件設(shè)計的最終目標(biāo)可歸納為保持設(shè)計的統(tǒng)一性，提升用戶體驗，同時提高設(shè)計和開發(fā)的效率。因此，組件設(shè)計是非常有必要的，那么到底如何從 0-1 開始設(shè)計組件呢，下面我們來看組件設(shè)計的詳細(xì)思路。
2. 設(shè)計思路
其實組件設(shè)計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎(chǔ)組件的設(shè)計。通常我們會從組件的定義、用法、構(gòu)成、種類、行為與狀態(tài)五個方面進(jìn)行組件的設(shè)計。
△組件設(shè)計的思路
回歸到本文所講的移動端彈出層組件，組件設(shè)計時需要考慮其“通用性和可復(fù)用性”?；诖嗽瓌t，將彈出層組件進(jìn)行拆解，如下圖所示。它包括：
△彈出層組件的拆解
從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進(jìn)行任何彈層組件的開發(fā)。因此，在彈層組件設(shè)計時將 Popup 組件抽離出來作為最基礎(chǔ)的組件進(jìn)行開發(fā)， 還可以進(jìn)一步開發(fā)通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構(gòu)成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進(jìn)行說明。
1. Picker 選擇器
定義：用于從一組預(yù)設(shè)數(shù)據(jù)中進(jìn)行選擇的控件。
用法：
構(gòu)成：標(biāo)題、按鈕、內(nèi)容（當(dāng)前選項和其他選項）
△Picker 選擇器組件的構(gòu)成
種類：根據(jù)選項間是否存在級聯(lián)關(guān)系可將其分為 2 類，普通選擇和級聯(lián)選擇。
△Picker 選擇器組件的分類
行為與狀態(tài)：狀態(tài)，給出單列選項和多列選項的常態(tài)頁面以及選項被禁用的狀態(tài)頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現(xiàn)->選項查看->選擇目標(biāo)選項->彈層消失的完整邏輯進(jìn)行說明。
△Picker 選擇器組件的狀態(tài)
△Picker 選擇器組件的交互流程與行為說明
當(dāng)完成以上全部內(nèi)容的撰寫時，可對本組件開發(fā)出的效果進(jìn)行說明。例如：
2. Filter 篩選器
Filter 組件是基于公司移動端產(chǎn)品均存在的高頻“篩選”場景而總結(jié)的場景（業(yè)務(wù)）組件，其設(shè)計思路和上方描述的通用組件的設(shè)計思路相同，筆者此處只強(qiáng)調(diào) 2 個重點(diǎn)注意事項。
場景組件在設(shè)計時遵循“加法”邏輯，從而提升組件的復(fù)用率。組件內(nèi)容分區(qū)塊進(jìn)行封裝，從而增加組件的靈活性。
△篩選器組件
在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進(jìn)行開發(fā)，且多類目篩選可基于單類目篩選組件進(jìn)行開發(fā)。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發(fā)不同于設(shè)計稿，設(shè)計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發(fā)成本要高于重新開發(fā)組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發(fā)出單類目篩選的組件。這也是需要我們牢記的，組件設(shè)計需要從“原子組件到復(fù)雜組件”，遵循由“簡單到復(fù)雜”的加法邏輯。
而在組件開發(fā)時通過“goup”的形式進(jìn)行封裝，可使組件更加靈活。例如，當(dāng)業(yè)務(wù)場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內(nèi)容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復(fù)用，這就提高了組件的通用性和復(fù)用率。
當(dāng)然，F(xiàn)ilter 組件還需要考慮很多設(shè)計細(xì)節(jié)，例如類目名稱是否顯示為當(dāng)前篩選項名稱、重置的邏輯是什么、確認(rèn)篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復(fù)雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復(fù)雜，組件設(shè)計的整體流程和交互細(xì)節(jié)也應(yīng)考慮的更加全面。
文章來源：優(yōu)設(shè)網(wǎng) 作者：土撥鼠
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
本文對2020-2021的色彩趨勢做了淺顯的總結(jié)與運(yùn)用分析，希望能對大家有所幫助，歡迎一起交流與探討！全文閱讀大概需要12分鐘。
文章來源：UI中國 作者：貳元
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
2021趨勢已悄悄來襲，還不趕快來看這些落地實例...
前言
在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計發(fā)展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點(diǎn)并舉例落地實例，來幫助大家啟發(fā)創(chuàng)意設(shè)計工作的思考切入點(diǎn)。
流行趨勢跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計霸屏的這幾年，設(shè)計風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說趨勢就是一個輪回。設(shè)計風(fēng)格沒有絕對的好壞，在審美達(dá)到一定疲勞時，就會開始出現(xiàn)新的設(shè)計風(fēng)格。每一個新風(fēng)格都值得設(shè)計師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗。
而在進(jìn)入下一個十年的過程中，我們對數(shù)字產(chǎn)品和體驗的依賴將日益增長，預(yù)測真正勝出的將會是3D動畫和用戶界面/用戶體驗設(shè)計的結(jié)合設(shè)計，5G技術(shù)的發(fā)展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來看看未來那些不可忽視的設(shè)計趨勢吧。
（注:圖片來自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請告知刪除）
1、3D與UI結(jié)合
隨著高效且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開始變得越來越受歡迎，而在這之前，UI界面一直被平面設(shè)計所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設(shè)計類型中都能找到它，3D現(xiàn)實主義已是各個領(lǐng)域的大勢。
圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點(diǎn)：
? 直觀感受；
? 立體真實；
? 形態(tài)豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應(yīng)用：
各大廠都開始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個品牌靜態(tài)頁面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開始慢慢運(yùn)用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物（毒）的3D空間動效
▲樂無登錄頁
網(wǎng)易云音樂每年的音樂總結(jié)報告都追隨著最新的設(shè)計潮流，今年還可以自由選擇人物形象，增強(qiáng)了用戶的主觀代入感，以下是每年的設(shè)計風(fēng)格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結(jié)陳詞H5
▲總結(jié)報告Banner的動效
其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營場景，高度還原現(xiàn)實世界，給小朋友帶來最真實的學(xué)習(xí)互動體驗。
▲洪恩識字（3D學(xué)習(xí)場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標(biāo)還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機(jī)交互指南中也明確指出：“圖標(biāo)不僅是裝飾性的，而且在與用戶交流中起著至關(guān)重要的作用，它應(yīng)該傳達(dá)應(yīng)用程序的主要目的并暗示用戶體驗?！边@次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計趨勢。
2、軟漸變（Soft gradients）
過于強(qiáng)烈的漸變不再是趨勢，大多數(shù)設(shè)計師都開始喜歡使用非常簡單和微妙的漸變，如果產(chǎn)品的目標(biāo)用戶人群需要輕松溫和的視覺環(huán)境，那么此風(fēng)格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標(biāo)、icon等設(shè)計中。
特點(diǎn)：
? 低調(diào)溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設(shè)計網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創(chuàng)造多彩的模糊背景。它使設(shè)計看起來非?，F(xiàn)代、不打擾、清新而令人愉悅，其中畫面內(nèi)容是主要視覺焦點(diǎn)。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應(yīng)用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計中經(jīng)常需要漸變或陰影來塑造物體，柔陰影使設(shè)計元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應(yīng)用：
▲有道數(shù)學(xué)（已下架）
▲Uki
3、玻璃擬態(tài)（Glassmorphism）
去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現(xiàn)問題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無法完整地使用在整套應(yīng)用程序中。
▲Alexander Plyut
伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur最新的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計，設(shè)計語言更為時尚簡潔。蘋果設(shè)計師 Alan Dye 在發(fā)布會上也提到了設(shè)計風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺的復(fù)雜度，讓用戶能夠?qū)⒆⒁饬性趦?nèi)容上」。
而最新的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細(xì)微的淺色邊框，整體效果就是讓元素之間有虛實結(jié)合的特殊空間。毛玻璃運(yùn)用在界面中對關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。
特點(diǎn)：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的最新作品也朝著玻璃擬態(tài)變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運(yùn)用：
▲毛玻璃視覺可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時的 OS X Yosemite 也大量使用了這種設(shè)計語言
▲最新的MacOS Big Sur操作系統(tǒng)
▲圖標(biāo)的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設(shè)計，重在降低對比度，以降低在暗光環(huán)境下屏幕對人眼的刺激。
特點(diǎn)：
? 突出內(nèi)容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應(yīng)用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統(tǒng)：
▲小度車載
暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計：
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調(diào)色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風(fēng)格，我個人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時代的代名詞，而在2021一趨勢還將會繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。
特點(diǎn)：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網(wǎng)站設(shè)計中的應(yīng)用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應(yīng)用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀(jì)初開始，抽象構(gòu)成中的簡單幾何形狀就已經(jīng)用于視覺藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計看起來既規(guī)則又有趣。
幾何圖形可以運(yùn)用到UI設(shè)計中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號的記憶點(diǎn)。
特點(diǎn)：
? 規(guī)則組合
? 品牌印象
? 重復(fù)記憶
▲Johnny Nova
▲Vladimir Gruev
實例應(yīng)用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計方法受到越來越多的關(guān)注。
7、極簡風(fēng)
極簡設(shè)計的前身是2010年代中期精巧又花哨的設(shè)計，這種設(shè)計已經(jīng)存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現(xiàn)在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點(diǎn)
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設(shè)計越簡潔，而這種簡化過的設(shè)計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應(yīng)用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應(yīng)用到UI中
在 2020 年，信息的觸達(dá)的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強(qiáng)用戶忠誠信任感。
特點(diǎn)：
? 營造氛圍
? 類型多樣
? 品牌調(diào)性
▲Fireart Studio
▲Ehsan Rahimi
實例應(yīng)用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術(shù)插圖從2017年開始到現(xiàn)在仍然很流行，幾乎適用于任何類型的設(shè)計行業(yè)，是設(shè)計領(lǐng)域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問題。這是在產(chǎn)品設(shè)計中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對比強(qiáng)烈的大色塊擴(kuò)大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點(diǎn)組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經(jīng)典線條
▲Entei Ryu在3D建模使用插畫質(zhì)感
▲Minh Pham ?在ui界面中的嘗試
實例應(yīng)用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風(fēng)格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發(fā)展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強(qiáng)互動性，而3D插畫與動效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點(diǎn)，還是要強(qiáng)調(diào)動效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設(shè)計中決定了一個 App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計增加了動態(tài)性，交互性和直觀性。
動效起到的作用：
? 引起人們對應(yīng)該做什么或接下來將要發(fā)生的事情的關(guān)注；
? 創(chuàng)造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導(dǎo)我們進(jìn)行復(fù)雜的操作；
? 確認(rèn)用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應(yīng)用：
▲GoFun選擇車輛后的頁面轉(zhuǎn)場動效
結(jié)尾：
2020的趨勢在滿足用戶的美學(xué)要求上，側(cè)重內(nèi)容和感情表達(dá)，還會根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶提供最大程度的豐富體驗。
借用Adobe設(shè)計副總裁 Jamie Myrold 的一句話：如今設(shè)計師要思考的，絕不僅僅是設(shè)計一款A(yù)pp、網(wǎng)站或設(shè)計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設(shè)計。
設(shè)計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術(shù)，每個設(shè)計人員都可以找到自己喜歡的方向，不管哪種趨勢最受歡迎，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計商業(yè)價值。
文章來源：UI中國 作者：_阿丹a_
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
迪士尼的12條動畫基本原則是傳統(tǒng)動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統(tǒng)動畫（例如角色動畫）設(shè)計的，但在本文中，我們將探討如何將其中的一些原理應(yīng)用于UI動效上。
在動畫中，擠壓和拉伸表示對象的重力，質(zhì)量，彈性。當(dāng)場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結(jié)合。
例如，按鈕的按下狀態(tài)為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態(tài)。除此之外，它還可以應(yīng)用于界面上的所有的交互式元素。
應(yīng)用于按鈕上的擠壓和拉伸
應(yīng)用于側(cè)邊欄的擠壓和拉伸
預(yù)備動作為用戶展示了即將發(fā)生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預(yù)備動作。在UI動效中，懸停狀態(tài)就是很好的例子。每當(dāng)我們將鼠標(biāo)懸停在元素上時，某些元素都會做出反應(yīng)，表明它是可單擊的，并且當(dāng)您單擊它時會發(fā)生某些事情。
懸?；油ǔ嬖V我們接下來有一個動作發(fā)生
涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現(xiàn)在滾動/滑動中
在傳統(tǒng)動畫中，時間由繪制的幀動畫來控制。幀數(shù)越多，動畫將越流暢和越慢。時間還可以表現(xiàn)對象的情緒和性格。
時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設(shè)計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數(shù)界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復(fù)雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續(xù)時間都有很好的解釋。
右側(cè)的過渡會使用戶等待太久
現(xiàn)實世界中的大多數(shù)對象都遵循緩動效果。換句話說，物體的運(yùn)動并不突然。就像自由下落的物體會在運(yùn)動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節(jié)奏和緩動標(biāo)準(zhǔn)可以讓你建立一個高效的動效庫。
右側(cè)添加了緩動效果，所以看起來更自然
轉(zhuǎn)場，它包括如何將對象放置在場景中，如何以及何時進(jìn)行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面，轉(zhuǎn)場決定了元素的放置位置以及在發(fā)生交互時如何對元素進(jìn)行排版。它將用戶的注意力引向最關(guān)鍵的元素。
這是一個音樂類的APP，轉(zhuǎn)場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨(dú)出現(xiàn)，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運(yùn)動會比使用直線運(yùn)動更加的自然，要突出元素運(yùn)動的路徑時可以使用弧線。
弧線運(yùn)動更加生動自然
在動畫中，輔助動畫用于強(qiáng)調(diào)場景中發(fā)生主要動作。例如，角色的頭發(fā)在行走時的微妙移動，或者是面部表情的微妙變化。
在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動畫讓點(diǎn)贊效果更飽滿
場景中的重要角色必須具有吸引力，通常會將某些動作進(jìn)行夸大以引起更多關(guān)注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設(shè)計就是一個很好的例子，懸浮的按鈕在靜態(tài)狀態(tài)很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當(dāng)發(fā)生任何交互時，夸張的動畫讓它可以占據(jù)整個屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當(dāng)車前進(jìn)的時，身體會短暫后仰，然后也會隨之前進(jìn)，我們稱之為延時。突然剎車時，又會由于慣性運(yùn)動身體向前傾然后回來 。
在UI界面中，同樣可以在元素靜止之前添加慣性運(yùn)動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細(xì)膩~
窗口放大時添加了慣性效果
圖像和文本添加了短暫的延時效果
文章來源：UI中國 作者：設(shè)計師深海
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
編輯導(dǎo)語：在一個團(tuán)隊里，成員之間“協(xié)同合作”是非常有必要的，比如一些崗位沒辦法完全理解設(shè)計師的想法，多溝通可以避免一些不必要的摩擦；在出現(xiàn)問題時，現(xiàn)在自己的環(huán)節(jié)找找問題，再進(jìn)行溝通；本文作者分享了關(guān)于精準(zhǔn)還原設(shè)計稿的環(huán)節(jié)，我們一起來看一下。
UI設(shè)計師作為展示產(chǎn)品形態(tài)的執(zhí)行層，產(chǎn)品上線前走查視覺與交互還原是必經(jīng)環(huán)節(jié)。
設(shè)計師可能都遇到過一個問題，作圖時連一像素的分割線都糾結(jié)好幾次，但是開發(fā)完的效果卻不盡人意，UI驗收不通過；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來血拼。
我們經(jīng)常會聽到身邊的設(shè)計師與開發(fā)哥的一些對話，關(guān)于對齊、大小、間距等設(shè)計還原問題經(jīng)常會討論很久；甚至有時會覺得，幾個像素的間距是不是有必要這么糾結(jié)？
「還原」是指事物恢復(fù)到原來的狀況或形狀，互聯(lián)網(wǎng)中的「設(shè)計還原」是說開發(fā)后實際界面和設(shè)計稿效果有偏差，進(jìn)行設(shè)計校對。
一直以來，設(shè)計驗收都不太受重視：
不同的項目類型還原度也不同：用戶產(chǎn)品>B端產(chǎn)品>后臺；對于用戶產(chǎn)品最好是能做到像素級還原。
在這個快速發(fā)展、迭代、更新的時代，互聯(lián)網(wǎng)產(chǎn)品的用戶體驗重視度越來越高，而其中的產(chǎn)品設(shè)計還原也成為了工作流中重要的一環(huán)。
我相信每一名UI設(shè)計師，心里應(yīng)該都有一個前端能100%還原設(shè)計稿的夢想，畢竟那是我們艱苦奮斗的勞動成果。
而視覺還原的高低與否，則直接取決于設(shè)計——開發(fā)——測試這些環(huán)節(jié)的協(xié)作質(zhì)量；不僅僅影響上線產(chǎn)品的用戶體驗，還影響著作為產(chǎn)品設(shè)計最后一環(huán)的工作質(zhì)量。
經(jīng)過走訪UI/UX設(shè)計師、前端工程師和測試工程師的還原設(shè)計圖的工作場景。
深究原因后，線上效果的失真率其實涉及到設(shè)計、前端開發(fā)、測試這三個環(huán)節(jié)，分析造成這種現(xiàn)象出現(xiàn)的原因大概有以下幾點(diǎn)：
了解開發(fā)依據(jù)哪些規(guī)則還原設(shè)計稿，前期的準(zhǔn)備工作是重中之重，設(shè)定好每一個細(xì)節(jié)規(guī)則，后期落地還原時才會將頁面的失真率降到最低。
UI 設(shè)計中，設(shè)計規(guī)范是設(shè)計還原一個關(guān)鍵步驟；一個好的規(guī)范應(yīng)該是高效的、簡單易懂的。
設(shè)計規(guī)范通?？梢园杨伾?、字體、組件等內(nèi)容制定成規(guī)范，不僅僅保證視覺的一致性，也極大方便樣式和組件的復(fù)用，后期的維護(hù)和開發(fā)；在規(guī)范的輔助下，開發(fā)在搭建全局共用控件時規(guī)則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
3.1.1 色彩規(guī)范
顏色是設(shè)計中最重要的元素，顏色的運(yùn)用與搭配決定設(shè)計的品質(zhì)感；在 UI 設(shè)計中，顏色的使用規(guī)范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。
3.1.2 字體規(guī)范
文字是APP主要信息的表現(xiàn)，尤其是新聞閱讀、社區(qū)APP等制定標(biāo)準(zhǔn)的設(shè)計規(guī)范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點(diǎn)很重要。
不同的字體氣質(zhì)不一樣，并且不同場景下帶給人的感受也不一樣；所以需要在設(shè)計的時候考慮到字體的設(shè)計效果，然后在設(shè)計規(guī)范中注明；主要規(guī)范標(biāo)準(zhǔn)字的大小，標(biāo)準(zhǔn)字要注意跟上文的標(biāo)準(zhǔn)色進(jìn)行組合，突出APP重要的信息和弱化次要的信息。
3.1.3 圖標(biāo)規(guī)范
在 UI 界面中，具有標(biāo)識性質(zhì)的圖形就是圖標(biāo)。作為 UI 設(shè)計中重要的設(shè)計模塊，產(chǎn)品的每個頁面中都有可能存在圖標(biāo)。
設(shè)計規(guī)范中，圖標(biāo)一般按照用途分為兩類：應(yīng)用圖標(biāo)、功能圖標(biāo)。
圖標(biāo)還應(yīng)該根據(jù)不同的功能需求設(shè)計不同的狀態(tài)：如常態(tài)、選中態(tài)、點(diǎn)擊態(tài)等。
應(yīng)用圖標(biāo)：各種應(yīng)用程序的識別標(biāo)志，在應(yīng)用商店里下載的一些應(yīng)用程序的標(biāo)志。
功能圖標(biāo)：規(guī)范中最好標(biāo)明圖標(biāo)格式與使用方式。比如 Web 設(shè)計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發(fā)；如果是原生 APP，那么需要標(biāo)注圖標(biāo)導(dǎo)出格式與尺寸。
3.1.4 圖片規(guī)范
圖片作為界面設(shè)計的重要組成部分，需要標(biāo)明尺寸規(guī)范，分為不同用途的種類。
3.1.5 控件規(guī)范
控件是指產(chǎn)品界面中可操作的部件，與組件是有一些區(qū)別的：控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復(fù)選框、選項卡、搜索框、分頁、切換按鈕、步進(jìn)器、進(jìn)度條、角標(biāo)等。
3.1.5.1 按鈕
按鈕有 5 個狀態(tài)：正常、點(diǎn)擊、懸停、加載、禁用。
需要在規(guī)范中分別羅列出這五個狀態(tài)，標(biāo)注上對應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值；如果是圖標(biāo)按鈕的話，除了上述參數(shù)值以外，還需要標(biāo)注 icon 和按鈕文本之間的間距，icon 圖標(biāo)的大小。
3.1.5.2 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進(jìn)行處理：密碼隱藏顯示、身份證、卡號分段顯示，標(biāo)注寬高。
3.1.5.3 選擇
選擇可分為單選與多選，并且也有五種不同狀態(tài)：未選擇、已選中、未選懸停、已選失效、未選失效項，規(guī)范中需展示出所有效果狀態(tài)。
3.1.5.4 進(jìn)度條
用于向用戶展示步驟的步數(shù)以及當(dāng)前所處的進(jìn)程。
3.1.6 缺省頁
常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標(biāo)簽輸入框、組合框、上傳等。
如果UI忽略規(guī)范，前端在不知道有可復(fù)用組件的情況下，很可能每一次都要手動書寫代碼；寫的代碼越多，遺漏掉細(xì)節(jié)和犯錯的可能性越大，導(dǎo)致效率降低。
最關(guān)鍵的是——對于今后的迭代，前端又得一個頁面一個頁面修改。
3.2.1 組件的好處
統(tǒng)一性：
高效性：
延續(xù)性：
3.2.2 組件化的特點(diǎn)
3.2.3 組件化分類
我們根據(jù)當(dāng)下現(xiàn)有的業(yè)務(wù)場景和對往后一段時期的業(yè)務(wù)發(fā)展方向進(jìn)行規(guī)劃，將組件庫的組件類型分為通用組件和業(yè)務(wù)組件；一般業(yè)務(wù)組件庫是不對外的，所以在Ant Design官網(wǎng)只能看到通用組件部分。
3.2.3.1 通用組件
指適用范圍廣，擴(kuò)大頻次高，可重復(fù)使用多個業(yè)務(wù)且不包含業(yè)務(wù)邏輯。某些導(dǎo)航欄，按鈕，吐司，彈窗等。我們將通用組件細(xì)分為五個子類別：基礎(chǔ)組件，導(dǎo)航，數(shù)據(jù)錄入，數(shù)據(jù)展示，操作反饋。
2.3.2 業(yè)務(wù)組件
這類組件對比通用組件而言最大的特點(diǎn)就是包含了一系列業(yè)務(wù)屬性，跟產(chǎn)品功能有重疊的關(guān)聯(lián)性，因此影響到適用范圍可能僅限于于1?2個業(yè)務(wù)系統(tǒng)或特殊場景，且復(fù)使用頻次不高。畢竟使用場景特殊也有限，放出參考意義不大。
2.3.3 組件化搭建流程場景
組件化的搭建在兩種場景下進(jìn)行：
1）產(chǎn)品立項前就開始組件化，在產(chǎn)品0到1之前，擁有一套組件和設(shè)計規(guī)范。設(shè)計師可以從以前項目的組件庫和設(shè)計規(guī)范直接套用并修改，這樣項目前期設(shè)計做起來更加方便且省時省力少挖坑。
2）產(chǎn)品經(jīng)歷過0到1后，產(chǎn)品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：梳理類目、場景走查、問題分析、方案設(shè)計、生成插件庫、驗證開發(fā)。
具體的組件化設(shè)計升級流程我總結(jié)成了下圖：
當(dāng)團(tuán)隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業(yè)務(wù)需求產(chǎn)生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。
組件庫重建之初無法一應(yīng)俱全，是需要后續(xù)設(shè)計師不斷的維護(hù)與迭代的。
關(guān)于設(shè)計輸出，現(xiàn)在很多像藍(lán)湖、zeplin、Pxcooker這種標(biāo)注軟件把設(shè)計師從手動標(biāo)注解救出來，往往把視覺稿在藍(lán)湖一扔就完事，前端開發(fā)完界面視覺還原度還是不高。
因為標(biāo)注軟件只能負(fù)責(zé)生成元素的尺寸、樣式，遇到復(fù)雜樣式即使你反復(fù)衡量的一些像素，開發(fā)還是會漏掉——這樣很有可能出現(xiàn)視覺災(zāi)難。
所以，一些復(fù)雜而又關(guān)鍵的頁面我建議可以貼心的做些手動標(biāo)注，主動告訴開發(fā)重要性和注意點(diǎn)。
我們現(xiàn)在工作中會有兩種標(biāo)注情景：
3.3.1 運(yùn)營標(biāo)注
因為很多數(shù)據(jù)是后臺傳輸?shù)角岸耍袌D片、有文字，每個內(nèi)容都需要給運(yùn)營設(shè)置一個上傳標(biāo)準(zhǔn)。
3.3.2 開發(fā)標(biāo)注
開發(fā)標(biāo)注是從設(shè)計稿落地成代碼的主要參考，除了藍(lán)湖提供的標(biāo)注，我們還需要寫一些重要部分設(shè)計說明，例如：模塊區(qū)分、局部特殊設(shè)計（該內(nèi)容根據(jù)自身產(chǎn)品而確定）。
3.3.2.1 常規(guī)手動標(biāo)注
3.3.2.2 特殊模塊/頁面劃分說明
復(fù)雜的表單設(shè)計，是很具有代表性的復(fù)雜頁面，根據(jù)頁面的布局進(jìn)行原型化示例，幫助前端更好的搭建代碼框架。
關(guān)于切圖，切圖之前應(yīng)跟開發(fā)確定好輸出的格式和尺寸，確定應(yīng)該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質(zhì)量好，單色使時還能替換顏色；PNG則通常用在實景圖，一倍圖和二倍圖則根據(jù)實際需要進(jìn)行輸出。
如果要做分層動畫，那我們就涉及到分層切圖，如果桌面端和手機(jī)端樣式差別較大，那我們需要和開發(fā)溝通好如何實現(xiàn)，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應(yīng)該提前跟開發(fā)溝通好。
設(shè)計-開發(fā)這個環(huán)節(jié)的協(xié)作質(zhì)量對視覺還原起著決定性的重要影響；但是，由于本身的工作性質(zhì)，我們和開發(fā)之間溝通是個棘手又麻煩的歷史遺留難題；設(shè)計師與開發(fā)雞同鴨講從而導(dǎo)致視覺還原度低下的局面，幾乎每天都在上演。
俗話說“知己知彼百戰(zhàn)百勝”，如果設(shè)計師能夠了解一些基本的開發(fā)術(shù)語以及開發(fā)流程，就可以更好的打破溝通隔閡。
那網(wǎng)頁設(shè)計稿的實現(xiàn)具體是怎樣操作的呢？
步驟可以概括如下：
3.5.1 設(shè)計師的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在開發(fā)的工作流當(dāng)中反復(fù)提到的盒子模型。雖然不需要完全了解前端是怎么通過代碼來落地你的設(shè)計稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基礎(chǔ)知識，在「盒子模型」理論中，頁面中的所有元素都可以看成一個盒子，并且占據(jù)著一定的頁面空間。
一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨(dú)一個盒子的內(nèi)部結(jié)構(gòu)，二是理解多個盒子之間的相互關(guān)系。
3.5.1.2 盒子模型的組成
每個元素都看成一個盒子，盒子模型是由 content（內(nèi)容）、padding（內(nèi)邊距）、margin（外邊距）和 border（邊框）這 4 個屬性組成的；此外，在盒子模型中，還有寬度 width 和高度 height 兩大輔助性屬性。
舉一個真實界面示例，我們在瀏覽器中打開「開發(fā)者模式」可以看到網(wǎng)頁的樣式代碼以及當(dāng)前界面是如何通過「盒子模型」來布局的。
前端并不能簡單的像UI畫圖時一樣，隨意地拖放一個可見元素到某一個位置；他們要通過把每一個元素裝進(jìn)一個「盒子」中，再去界面中定位它所處的位置。
3.5.1.3 了解盒子模型對于UI的好處
當(dāng)你摸清了前端是如何布局實現(xiàn)你的設(shè)計稿后，你在作圖的過程中就會開始懂得站在落地的角度思考問題，善用「盒子」，將界面中每一塊布局「盒子化」。
我舉一個示例，如果我們不使用「盒子」，當(dāng)我們在做一個卡片時，前端并不知道UI是如何定義每一個元素的間距；比如，然后將這一個間距套用在他也不知道應(yīng)該設(shè)置為多高的「盒子」當(dāng)中。
所以UI在出稿時就帶入「盒子模型」思維，合理地構(gòu)思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準(zhǔn)確還原。
優(yōu)秀的設(shè)計離不開開發(fā)人員的落地支持，作為設(shè)計師，協(xié)同開發(fā)人員完成設(shè)計落地也是工作中重要的一環(huán)。
做好以下幾點(diǎn)，站在開發(fā)人員的角度為他們“多想一步”，高質(zhì)量的設(shè)計還原指日可待。
在進(jìn)行設(shè)計還原的時候我更希望大家把設(shè)計評審的環(huán)節(jié)重視起來，之前也有詳細(xì)的講到過《如何進(jìn)行設(shè)計評審》的，因為我認(rèn)為評審對于設(shè)計還原的意義是把問題前置化。
通過設(shè)計評審可以把改版視覺變化最大的地方和開發(fā)說明清楚，這些改版布局框架改變都會增加開發(fā)工作量；這個環(huán)節(jié)把握好了，那基本都能實現(xiàn)出來，特殊情況除外，比如前期忽略了一些后臺數(shù)據(jù)的問題。
有些細(xì)微的地方需要我們特別像開發(fā)說明，也加深他們的印象，在實現(xiàn)時候就減少出錯；像開發(fā)走讀的時候，只把關(guān)鍵核心點(diǎn)，規(guī)則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時候要輕松一些，開發(fā)也輕松一些，就比如前期基礎(chǔ)沒打好，后面深入很難。
設(shè)計師做好會議記錄（記錄問題及解決方案，以及達(dá)成的共識），并且在會議結(jié)束后以郵件形式發(fā)送前端們，抄送產(chǎn)品和運(yùn)營，確保會議內(nèi)容的傳達(dá)到位；讓設(shè)計師與前端工程師相關(guān)問題達(dá)成一致，提升工作效率。
在開發(fā)緊張環(huán)節(jié)中，即使我們前面所有工作都準(zhǔn)備好了，也很難避免開發(fā)不找我溝通；這時候我們要積極回應(yīng)他們，并且和他們一起處理問題。
比如某些難度大一點(diǎn)的頁面，開發(fā)實現(xiàn)效果和設(shè)計稿差異不?。荒敲催@時候，開發(fā)會截一張他們實現(xiàn)的效果圖給你看，這時你就要仔細(xì)去找問題，不要一口咬定就是開發(fā)的原因；先溝通具體原因，然后找出解決辦法，如果是標(biāo)注出現(xiàn)問題，比如標(biāo)注標(biāo)死了，頁面不靈活，適配局限性很大。
在視覺走查的時候我們可以把test環(huán)境下的頁面和設(shè)計稿拿出來對比，走查頭部、尾部等位置是否完整統(tǒng)一，按鈕樣式、反饋狀態(tài)、報錯等樣式是否統(tǒng)一；是否有缺少的場景和狀態(tài)，根據(jù)任務(wù)流程對場景和狀態(tài)進(jìn)行排查，保證設(shè)計的完整性。
這里給大家推薦兩個視覺走查方法：
1）大家來找茬法
驗收的時候，我們需要把開發(fā)實現(xiàn)后的效果截圖，然后再去和設(shè)計稿做對比。
我們可以直接把截圖放在設(shè)計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標(biāo)注需要修改地方的參數(shù)。
2）頁面重構(gòu)走查
走查還原的時候，在Chrome瀏覽器的空白處右鍵點(diǎn)擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。
有時候一些比較細(xì)微的調(diào)整，我們可以雙擊具體的數(shù)值進(jìn)行調(diào)整，調(diào)整到自己滿意之后再給到具體的數(shù)值給開發(fā)；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾
4.3.1 確?？捎眯?/span>
設(shè)計任務(wù)流程，進(jìn)行設(shè)計走查，在移動App端，我們所設(shè)計的應(yīng)用是建立在手指點(diǎn)擊操作的基礎(chǔ)上進(jìn)行使用的。
我們的手指不像鼠標(biāo)一樣能夠精確定位和響應(yīng)，所以我們需要在設(shè)計的過程中確?？牲c(diǎn)擊的區(qū)域能夠較為明顯的識別。
4.3.2 確保易讀性
文本內(nèi)容是大部分產(chǎn)品的重要組成部分，所以文本的排版是非常重要的（很多人說中文排版不好看，那是因為你不會用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。
在眾多設(shè)計原理中，格式塔原理一直被廣泛應(yīng)用，它可以很好的梳理界面信息結(jié)構(gòu)、層級關(guān)系，從而提升設(shè)計的可讀性；在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標(biāo)準(zhǔn)。
4.3.3 反饋機(jī)制
當(dāng)用戶和產(chǎn)品需要交互時，會使用不同的模式反饋信息或結(jié)果，為用戶在各個階段提供必要、積極、及時的反饋，避免過度反饋，以免帶來不必要的打擾。
常見的三種反饋信息如下，大家可以在此基礎(chǔ)上自查是否有反饋、反饋是否傳達(dá)清晰，是否對用戶有即時的響應(yīng)等細(xì)節(jié)
4.3.4 動效還原
動效這塊是產(chǎn)品中比較高規(guī)格的一個存在，所以在使用的過程中一定要謹(jǐn)慎，不能隨意加入多余的動效，導(dǎo)致在使用產(chǎn)品的過程中出現(xiàn)問題。
在我走查的經(jīng)驗多了以后，發(fā)現(xiàn) 最容易造成落地頁面與設(shè)計稿視覺差異的，其實就是顏色與間距還有圖標(biāo)的視覺錯覺。不要小看這兩個細(xì)節(jié)元素，把控不好它們會讓落地頁面效果大打折扣。所以在進(jìn)行頁面還原的可以著重對比一下幾點(diǎn):
4.4.1 分割線
在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設(shè)計師在開發(fā)前沒有特別說明；程序員就寫成了1pt，因為pt是1x下的單位，px是實際單位。
所以在做分割線的是，單位需要是「px」，這樣才能保證每個屏幕的分割線都是1像素。
下面主要以3個主要場景來分點(diǎn)解釋分割線的標(biāo)注：
4.4.2 投影
陰影作為一個重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級呈現(xiàn)給用戶。
常規(guī)投影與彌散陰影推薦使用css代碼完美實現(xiàn)；特殊情況下還需提前與開發(fā)人員溝通權(quán)衡各種方式的利弊，選擇適合項目產(chǎn)品的實現(xiàn)方式。
結(jié)合自己實際的工作經(jīng)驗和與開發(fā)人員溝通的心得，實現(xiàn)彌散投影的方法，可以通過兩個方法實現(xiàn)：
1）切圖對接開發(fā)人員
雖然切圖可以解決這個問題，但是切圖也有一些弊端，因為每個卡片都使用切圖的話，會使開發(fā)的包變大，可能會出現(xiàn)加載慢、閃退等情況，這些體驗也是很糟糕了；所以在這個過程中的一些問題務(wù)必要提前與開發(fā)人員及項目人員溝通好。
2）CSS代碼實現(xiàn)
常規(guī)情況下，效果都比較好，但是也會遇到一些遇到異常情況，比如不規(guī)則形狀，通常用代碼也比較復(fù)雜，這個時候需要提前與開發(fā)人員溝通切圖情況，避免后期一些問題。
在做設(shè)計的過程中，我們需要更好地理解下游的工作，達(dá)到一個高效的溝通。
不管是哪一種方法，沒有對錯之分，關(guān)鍵是要懂得“權(quán)衡利弊”，提前與開發(fā)人員溝通到位；只要是適合自己公司項目且能夠高效還原設(shè)計稿的方法，都是值得一用的。
4.4.3 文字行高
文本間距也是影響落地效果的關(guān)鍵因素之一，文本間距指的是——純文本與其他元素之間的間距。
UI出稿時應(yīng)該注意 文本行高可能導(dǎo)致前端的測量誤差，文本間距主要的原因是 sketch 與 ios 系統(tǒng)中字體的行高不同；最簡單的解決方法是通過手動調(diào)整 sketch 中字體的行高，業(yè)界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準(zhǔn)確的。
首先我們要理解什么是行高（line-height）。
我以 Sketch 為例，當(dāng)我們設(shè)置了一個70px的文本，Sketch 會默認(rèn)給我們設(shè)置文本為98px行高，文本的上下會包含一定的空白像素。
如果UI不設(shè)定行高規(guī)范，落地過程中就會出現(xiàn)以下問題：
行高的解決辦法：
面對行高的問題，我一般會在設(shè)計的過程中，輸出規(guī)范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進(jìn)行對接落地。
最簡單的解決方法是通過手動調(diào)整 sketch 中字體的行高，業(yè)界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準(zhǔn)確的。
最近看到了一個新的公式可以同步開發(fā)根據(jù)字號設(shè)置行高。
設(shè)字號為x，行高=x+2ceil（x/10），ceil（）的意思是向上取整數(shù) L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意這里適用于單行行高，由于多行涉及到的排版問題不僅僅是行高帶來的，有機(jī)會的話可以單獨(dú)聊一下。
推薦DoraemonKit 是一個功能平臺，能夠讓每一個 App 快速接入一些常用的或者你沒有實現(xiàn)的一些輔助開發(fā)工具、測試效率工具、視覺輔助工具；而且能夠完美在 Doraemon 面板中接入你已經(jīng)實現(xiàn)的與業(yè)務(wù)緊密耦合的一些非通有的輔助工具；并搭配滴滴的dokit平臺，讓功能得到延伸，接入方便，便于擴(kuò)展。
4.4.4 視覺重心修正
在設(shè)計上為了保證界面的視覺平衡，往往不是設(shè)計軟件直接精準(zhǔn)對齊，我們總是會通過調(diào)整間距、大小或者角度補(bǔ)齊一些負(fù)空間，讓畫面保持視覺平衡。
還有設(shè)計中通常向右箭頭來表示模塊入口，當(dāng)我們把箭頭和文字右對齊，箭頭視覺上會更外突；這時候我們會往里面縮進(jìn)1至2像素，但是切圖完給完全不知情的前端后，設(shè)計師要主動講解一下，或者寫進(jìn)規(guī)范里。
項目會有些需要展示logo的地方， 有的圓形、有的長方形、有的純文字，尺寸差距比較懸殊。
這種情況下，我們需要給他限制一個高度，在這個高度以內(nèi)，再根據(jù)logo本身的體量來調(diào)整圖形的大小，處理好logo的視覺平衡。
特殊場景在設(shè)計過程中常常會被忽略，等到在現(xiàn)實中碰到才會意識到缺失異常狀態(tài)會非常尷尬，所以大家在完成主流程設(shè)計后，一定也要考慮到特殊場景。
大家可以參照以下幾種場景對設(shè)計進(jìn)行自查優(yōu)化調(diào)整：
1）網(wǎng)絡(luò)異常
考慮到網(wǎng)絡(luò)異常情況時，通常產(chǎn)品會通過異常狀態(tài)頁面或者交互反饋來告知用戶當(dāng)前的異常狀態(tài)和如何解決問題（解決方案引導(dǎo)、刷新、toast）。
2）服務(wù)器異常
服務(wù)器異常狀況較少出現(xiàn)，時間也較短，通常不提示具體原因，設(shè)計處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導(dǎo)。
3）空狀態(tài)
空狀態(tài)指的是頁面中無內(nèi)容，主要的幾個情況，設(shè)計師需要根據(jù)不同的場景給出文案+插畫的表現(xiàn)形式引導(dǎo)用戶：
4）內(nèi)容缺失
內(nèi)容缺失展示效果的考慮，設(shè)定頁面圖片缺失的占位圖。
5）加載頁面的表達(dá)方
考慮網(wǎng)絡(luò)加載或者數(shù)據(jù)加載的時候會等待幾秒鐘，通常產(chǎn)品會有一個簡單頁面的占位圖形式來減輕用戶在等待時的焦慮感；可以是loading，也可以是整體頁面的刷新動效。
設(shè)計還原的時候最后還還看一下不同機(jī)型適配的問題。保證不同機(jī)型的界面呈現(xiàn)效果一致。
4.6.1 動態(tài)眼光
手機(jī)適配的時候很多設(shè)計師會遇到一個問題，就是在750*1335的屏幕上做的設(shè)計圖；但是適配到640*1136的屏幕上就有元素放不下，所以設(shè)計師在出圖時需要用動態(tài)的眼光去考慮問題。
知識點(diǎn)：在簡單的界面中，由于本身界面的內(nèi)容比較少，確定位置就會比較難，因為要考慮到不同的界面內(nèi)容要怎么放才能保持視覺統(tǒng)一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內(nèi)的固定內(nèi)容，再確定自適應(yīng)的內(nèi)容。
4.6.2 固定適配內(nèi)容
在簡單的界面中，由于本身界面的內(nèi)容比較少，確定位置就會比較難，因為要考慮到不同的界面內(nèi)容要怎么放才能保持視覺統(tǒng)一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內(nèi)的固定內(nèi)容，再確定自適應(yīng)的內(nèi)容。
4.6.2.1 圖標(biāo)或按鈕
4.6.2.2 搜索框
4.6.2.3 Y軸間距
一般來說，Y軸的間如果在相近的組件里，都會是固定的，不會有變化。
4.6.2.4 圖片
像這種圖片的列表或者，十字縱橫的頭像或文字，大小都是固定的，變得會是間距或者數(shù)量，如下圖所示：
對于比較復(fù)雜的模塊，快速找到將以上所說的固定因素和自適應(yīng)因素，除了能夠讓標(biāo)注效率大大提高之外，還能夠找到合適的適配方法，避免出現(xiàn)開發(fā)完成后才發(fā)現(xiàn)某機(jī)型適配效果不理想的情況。
4.6.3 自適配內(nèi)容
自適配內(nèi)容也給大家梳理出來。
4.6.3.1 文字彈性適配
文字流指在多行文字的情況下，文字?jǐn)?shù)量變化會影像頁面布局和元素大小，如下圖所示：
文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。
當(dāng)文字左右兩邊有內(nèi)容的時候，我們需要標(biāo)明文字可顯示的范圍，也就是說它最多能顯示幾個字——這種方式可以做到較好的適配，也是做快速常用的適配方法。
4.6.3.2 banner
這里說的圖片是指banner或者feed流里的圖片，適配的方法大多都是自適應(yīng)，界面中的元素間距和數(shù)量不變，元素尺寸進(jìn)行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：
對于比較復(fù)雜的模塊，快速找到將以上所說的固定因素和自適應(yīng)因素，除了能夠讓標(biāo)注效率大大提高之外，還能夠找到合適的適配方法，避免出現(xiàn)開發(fā)完成后才發(fā)現(xiàn)某機(jī)型適配效果不理想的情況。
假設(shè)視覺還原上真的出了問題，首先要尋找原因，是自己沒做到位？還是對方?jīng)]理解你的想法？
我感覺可以按照以下幾個方法去做：
設(shè)計團(tuán)隊內(nèi)部先弄明白改版的意義，畫好標(biāo)注色值、像素的示意圖和文檔，做好產(chǎn)品原型等任何能讓對方不需糾結(jié)，直接可以上手的工作。
做好前期的準(zhǔn)備工作，盡可能的多做思考，完善設(shè)計稿；尤其是邊界情況，把自己的問題留給自己，這樣可能產(chǎn)生的設(shè)計還原問題就會大幅減少。
多向開發(fā)同學(xué)請教，即便遇到技術(shù)確實難以實現(xiàn)的情況，不要逃避或者過于固執(zhí)，了解具體原因，不斷累積自己的技術(shù)知識；自己的專業(yè)、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。
這是一個比較復(fù)雜而且需要長期努力的話題，每個公司都會有其實際情況存在，團(tuán)隊越大，情況越復(fù)雜。
設(shè)計師團(tuán)隊或者個人的話語權(quán)如果很弱，確實會面對十分被動的處境；首先需要說明的是，話語權(quán)是贏得的，而不是賦予的；想要改善被動的局面，要認(rèn)清所處的環(huán)境，問題的癥結(jié)，調(diào)整定位，并付出努力；只有證明了設(shè)計確實能夠解決問題，甚至驅(qū)動商業(yè)價值，才會逐步提升話語權(quán)。
完成一項任務(wù)時最重要的是團(tuán)隊的思維模式是否統(tǒng)一，設(shè)計師在乎用戶體驗，工程師只在乎開發(fā)成本，那問題沒辦法達(dá)成一致是很正常的。
想要讓大家認(rèn)同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產(chǎn)品、聊體驗、聊感受，慢慢給他們灌輸體驗的重要性。
只要你的話題有趣，人有趣，沒有人會拒絕跟你聊；時間長了，整個團(tuán)隊的思路就會有所轉(zhuǎn)變。
設(shè)計師自己可以先按優(yōu)先級去排布還原順序，看這1像素是否對當(dāng)前產(chǎn)品重要性。
在搞清楚產(chǎn)品進(jìn)度、優(yōu)先級的情況下，記錄所有還原問題，自己標(biāo)記優(yōu)先級，整理完畢后一次性給他，再跟程序員解決方案和時間；也可以與開發(fā)同學(xué)共同摸索一套雙方都能接受的清單模式，標(biāo)明問題，修改建議，重要層級，根據(jù)實際情況詳細(xì)說明或者簡要說明，能夠當(dāng)面溝通更佳。
良好的團(tuán)隊合作氛圍是有效的潤滑劑；好的合作關(guān)系如同一條戰(zhàn)壕里的戰(zhàn)友，哪怕多年后回想起來，也應(yīng)該是一起沖鋒陷陣的光輝歲月。
設(shè)計師應(yīng)該認(rèn)識到自己在整個項目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責(zé)任或者互相推諉，逐步打造自己的聲譽(yù)和氣場。
一個優(yōu)質(zhì)的項目落地是各部門協(xié)同合作的成果，就像我們玩游戲，后期高質(zhì)量的輸出也需要前期優(yōu)秀的輔助來打鋪墊。
在“協(xié)同作戰(zhàn)”的基礎(chǔ)上，靈活運(yùn)用規(guī)范、標(biāo)注和走查的方法來主動推動項目的進(jìn)行；不僅可以讓設(shè)計稿得到最大程度的還原，也可以提升我們協(xié)作能力和對環(huán)節(jié)的把控能力。
任何問題只要多交流，會避免很多阻塞情況；出于設(shè)計師的角度當(dāng)然都希望每一張視覺稿得到100%的還原；因為用戶只看你上線效果，但是往往排期緊張需要一些取舍，我希望能在有限的時間內(nèi)做到最好。
在后期視覺驗收的時候，我們可以換位思考，把自己當(dāng)做程序員，站在他們的角度去思考問題；怎么樣的驗收方式會更方便開發(fā)修改，減少重復(fù)返工的次數(shù)，情愿驗收標(biāo)注的時候多花10分鐘，也要把修改意見寫詳細(xì)，幫開發(fā)節(jié)省時間，反過來也幫我們自己減少了二次驗收的成本。
文章來源：人人都是產(chǎn)品經(jīng)理 作者：郝小七
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文章來源：tob.design 作者：三魚先生
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn