當(dāng)我們?cè)O(shè)計(jì)師輸出了精美的設(shè)計(jì)稿，然后附帶了一個(gè)流暢的手勢(shì)動(dòng)畫，交付給開發(fā)的時(shí)候，也期待著開發(fā)大佬搞出和自己預(yù)期一樣體驗(yàn)流暢。但是等到實(shí)際體驗(yàn)的時(shí)候，卻發(fā)現(xiàn)有一種說(shuō)不出的鬧心。
“這個(gè)感覺不好按...”
“劃起來(lái)咋這么費(fèi)勁呢？”
“怎么感覺動(dòng)畫怪怪的?！?
當(dāng)你正準(zhǔn)備和開發(fā)一通友好探討的時(shí)候，這個(gè)時(shí)候開發(fā)向你發(fā)起了一系列靈魂拷問(wèn)：
“你這個(gè)左滑的手勢(shì)，劃多少才算觸發(fā)？劃多快才算觸發(fā)？如果劃了一半劃回去算不算觸發(fā)？如果我先點(diǎn)擊后滑動(dòng)算不算觸發(fā)？松手之后的動(dòng)畫是多快的速度？什么速度曲線？要不要回彈效果？回彈阻尼系數(shù)是多少？”
這個(gè)時(shí)候你發(fā)現(xiàn)，自己提出的設(shè)計(jì)需求根本太天真了。
剛才的問(wèn)題真實(shí)原因是，在做很多手勢(shì)識(shí)別或者一些我們看起來(lái)日常的效果，其實(shí)是蘊(yùn)含了很多復(fù)雜邏輯的。
這些復(fù)雜邏輯原本被封裝在操作系統(tǒng)內(nèi)，在系統(tǒng)內(nèi)時(shí)可以隨時(shí)調(diào)用。但是一旦脫離了操作系統(tǒng)，那手勢(shì)的處理邏輯就會(huì)比較簡(jiǎn)陋，導(dǎo)致最終的體驗(yàn)不佳。
那這個(gè)時(shí)候也許你會(huì)想問(wèn)，我們?cè)趺磿?huì)脫離操作系統(tǒng)呢？我們的手機(jī)不都是iOS和Android的嗎？不都是操作系統(tǒng)嗎？其實(shí)這里指的操作系統(tǒng)，是指操作系統(tǒng)的原生組件。這類組件只有在原生開發(fā)中才能被調(diào)用。
如今，很多App都使用前端語(yǔ)言來(lái)開發(fā)內(nèi)部頁(yè)面(HTML/CSS/JS)。隨著Web混合開發(fā)，F(xiàn)lutter等跨端技術(shù)棧的出現(xiàn)，越來(lái)越多的團(tuán)隊(duì)開始擁抱這樣的跨平臺(tái)技術(shù)棧。在節(jié)約了開發(fā)成本的同時(shí)，隨之而來(lái)的就是，在日常開發(fā)過(guò)程中，離純?cè)M件越來(lái)越遙遠(yuǎn)。
在這樣的背景下，研發(fā)團(tuán)隊(duì)的體驗(yàn)設(shè)計(jì)師需要自己來(lái)研究用戶行為，手勢(shì)、組件和動(dòng)效，實(shí)現(xiàn)原生組件類似的復(fù)雜邏輯，才能最大程度的接近甚至超越原生組件的體驗(yàn)。
其實(shí)使用各個(gè)技術(shù)框架，也是有內(nèi)置一些接口的。例如一些事件監(jiān)聽器 / 動(dòng)效曲線等。這也是騰訊文檔之前一直在使用的，但是會(huì)遇到一些問(wèn)題。總結(jié)下來(lái)，主要有以下幾個(gè)問(wèn)題：
無(wú)法精確操作：用戶的操作和操作反饋被自己的手指擋住，無(wú)法完成精確操作。
手勢(shì)識(shí)別誤觸：同一熱區(qū)支持了多個(gè)手勢(shì)，可是用戶的實(shí)操時(shí)的手勢(shì)動(dòng)作又沒那么標(biāo)準(zhǔn)，導(dǎo)致用戶誤觸其他手勢(shì)。
手勢(shì)觸發(fā)費(fèi)力：滑動(dòng)費(fèi)勁，需要滑動(dòng)很長(zhǎng)距離才能觸發(fā)預(yù)期的動(dòng)作。
動(dòng)畫不流暢：各個(gè)技術(shù)框架自帶的動(dòng)畫曲線和插值器，良莠不齊，體驗(yàn)不統(tǒng)一且不夠流暢。
對(duì)于原生組件，我們習(xí)以為常的系統(tǒng)控件和手勢(shì)設(shè)計(jì)，里面蘊(yùn)含的智慧遠(yuǎn)比我想象的更多。
舉個(gè)簡(jiǎn)單的例子：iOS系統(tǒng)的首頁(yè)，它可以支持橫豎各個(gè)方向的滑動(dòng)，并且在觸發(fā)一個(gè)方向的手勢(shì)之后，就無(wú)法再觸發(fā)其他手勢(shì)了。
但是其實(shí)有個(gè)問(wèn)題，手指和平時(shí)演示的不太一樣。
就是手指貼合上屏幕的時(shí)候，手指與屏幕的貼合面，并不是均勻向四周擴(kuò)散的，而是向下的擴(kuò)散更大一些。對(duì)于觸摸中心點(diǎn)，在觸摸的過(guò)程中，就會(huì)有向下的一個(gè)偏移。
如果直接識(shí)別，這個(gè)偏移直接被識(shí)別為向下滑動(dòng)，那就會(huì)無(wú)法觸發(fā)左右滑動(dòng)的手勢(shì)。
例如在iOS內(nèi)的手勢(shì)識(shí)別，有一個(gè)專門的接口來(lái)做識(shí)別：PanGestureRecognizer，這個(gè)接口會(huì)在10px內(nèi)先判定手指移動(dòng)的方向和距離，再對(duì)具體觸發(fā)的手勢(shì)來(lái)做定義。例如下圖，雖然剛開始手指位置有些許下移，但是最終還是可以左滑判定成功。
所以你會(huì)發(fā)現(xiàn)，如果在iOS桌面上輕微的向左右滑動(dòng)(10pt內(nèi))，桌面是不會(huì)有任何響應(yīng)的。就是因?yàn)樵?0pt內(nèi)，系統(tǒng)還無(wú)法確認(rèn)手勢(shì)的方向。
另外，系統(tǒng)還自帶了很多手勢(shì)反饋操作，包括回彈效果，甩出效果。里面的小邏輯設(shè)計(jì)需要非常精準(zhǔn)。并且對(duì)于滑動(dòng)的手勢(shì)還帶了回彈效果，看起來(lái)非常爽。
騰訊文檔是基于Web / Flutter的應(yīng)用，并且接管了很多原生系統(tǒng)的能力，包括排版能力、光標(biāo)選區(qū)能力，拖動(dòng)能力等。因此，很多基于Native開發(fā)能很簡(jiǎn)單解決的問(wèn)題，在Web下就要重新打磨一套我們?nèi)粘Ａ?xí)以為常卻邏輯復(fù)雜的組件。
由于騰訊文檔是基于Web的的應(yīng)用，接管了很多原生系統(tǒng)的能力，所以不能使用系統(tǒng)的Gesture Recognizer，也不能使用系統(tǒng)的選區(qū)光標(biāo)能力。
如果是簡(jiǎn)單的使用前端的操作監(jiān)聽器，那會(huì)要求用戶使用極其標(biāo)準(zhǔn)的手勢(shì)操作才能觸發(fā)，否則就會(huì)觸發(fā)失敗。因此需要設(shè)計(jì)更精準(zhǔn)且適應(yīng)性的規(guī)則，來(lái)包容用戶不那么標(biāo)準(zhǔn)的實(shí)操手勢(shì)。需要幫助用戶在粗糙的實(shí)操手勢(shì)下，猜測(cè)用戶原圖，并精準(zhǔn)完成的操作。
可能你以為手勢(shì)操作并不常用，其實(shí)并不是的。
一個(gè)單擊，一個(gè)雙擊，其實(shí)本質(zhì)上都是手勢(shì)。
不過(guò)，很多人可能會(huì)認(rèn)為，按說(shuō)這些操作都有原生的監(jiān)聽器，不需要再去定義。但是其實(shí)如果不做一些進(jìn)階定義，就會(huì)出現(xiàn)操作不靈敏的問(wèn)題。例如下面這個(gè)問(wèn)題。
在很多安卓手機(jī)上，或者是我們自己的騰訊文檔里，時(shí)常遇到一個(gè)問(wèn)題：就是原本以為雙擊文本區(qū)域可以選中文字，可是卻發(fā)現(xiàn)這個(gè)雙擊成了一個(gè)玄學(xué)事件。雙擊有時(shí)生效而有時(shí)不生效。
理想的雙擊大概是這樣的，是需要2次有效的Tap事件：
這個(gè)Bug讓我們來(lái)定位一下。讓我們還原一下事情的經(jīng)過(guò)：
哦！原來(lái)是因?yàn)殡p擊的其中一稍微偏移了一下，拖動(dòng)到了光標(biāo)，導(dǎo)致系統(tǒng)判定是一次Tap一次Drag的行為，這樣就沒有辦法觸發(fā)雙擊行為了。
解決方法也很簡(jiǎn)單。把10px偏移距離內(nèi)的滑動(dòng)行為都判定為點(diǎn)擊行為就可以了。從這里看，我們其實(shí)需要做的是，規(guī)范“點(diǎn)擊”這個(gè)手勢(shì)的定義。
因?yàn)樵瓉?lái)的系統(tǒng)自帶定義，容易造成誤操作，而且手指貼上屏幕的時(shí)候，都會(huì)產(chǎn)生輕微位移，或者一不小心滑動(dòng)了頁(yè)面，或者不小心拖動(dòng)了光標(biāo)，導(dǎo)致手勢(shì)識(shí)別的不靈敏。
原定義：“點(diǎn)擊并在500ms內(nèi)在原處松手”。
需重新定義為：“點(diǎn)擊并在在500ms內(nèi)，在10px以內(nèi)處松手”。
另外，文檔移動(dòng)端也定義了一系列更進(jìn)階的手勢(shì)的操作，在這樣對(duì)手勢(shì)的進(jìn)階定義后，操作可以被更精準(zhǔn)和智能的判斷。這些定義被寫在了設(shè)計(jì)規(guī)范中，包括了單擊 / 雙擊 / 長(zhǎng)按 / 拖拽
騰訊文檔的整個(gè)文本編輯區(qū)域都是使用Canvas實(shí)現(xiàn)的，由前端自主控制渲染。因此，選區(qū)光標(biāo)就無(wú)法直接使用系統(tǒng)能力，需要設(shè)計(jì)師來(lái)設(shè)計(jì)一套選區(qū)光標(biāo)，并且支持系統(tǒng)的各種選區(qū)光標(biāo)的手勢(shì)。
由于騰訊文檔的光標(biāo)選區(qū)是非?；A(chǔ)基礎(chǔ)的編輯組件。這個(gè)組件在一般的產(chǎn)品中，都是直接復(fù)用的系統(tǒng)組件，但是在騰訊文檔中，就需要重新去考慮光標(biāo)組件。
首先有個(gè)需求，光標(biāo)是可以在文本中快速拖動(dòng)的。
經(jīng)常會(huì)遇到拖動(dòng)。無(wú)論是光標(biāo)拖動(dòng)，還是長(zhǎng)按選中，我們都希望能清楚的看到光標(biāo)的位置，所以我們?cè)谟脩敉蟿?dòng)光標(biāo)和選區(qū)的時(shí)候，使被拖動(dòng)的組件放大1.5倍，使用戶可以看到拖動(dòng)效果。
這就夠了嗎？不夠的。
如果用戶想要精準(zhǔn)的控制光標(biāo)，首先要讓用戶完整的看到光標(biāo)。用戶在拖動(dòng)光標(biāo)的時(shí)候，手指經(jīng)常會(huì)不自覺的向下移動(dòng)。這是為了讓自己看清光標(biāo)，這個(gè)時(shí)候，我們不應(yīng)該把這個(gè)移動(dòng)當(dāng)做是把光標(biāo)向下移動(dòng)一行，光標(biāo)本身不應(yīng)該跟隨向下，應(yīng)該只在同一行，并且只響應(yīng)左右移動(dòng)。
但是當(dāng)我向下拖更多距離的時(shí)候，光標(biāo)就應(yīng)該一直保持在手的上方，以確保用戶可以精確操作。
同樣，我們定義了長(zhǎng)按后可以拖動(dòng)選擇的手勢(shì)。在拖動(dòng)的過(guò)程中，允許用戶向下偏移一定的區(qū)域，來(lái)看清選區(qū)的具體邊界位置。
手機(jī)端的光標(biāo)選區(qū)，一個(gè)我們?nèi)粘Ａ?xí)以為常的光標(biāo)，里面竟然有那么多小細(xì)節(jié)在里面，才能讓光標(biāo)變得好用。
當(dāng)一個(gè)滑動(dòng)手勢(shì)被觸發(fā)時(shí)，我應(yīng)該如何判斷這個(gè)手勢(shì)已經(jīng)被觸發(fā)了呢？這個(gè)判斷并非簡(jiǎn)單的橫劃豎劃，而是針對(duì)的不同的場(chǎng)景，去做特殊的處理的。
案例1：向下滑動(dòng)手勢(shì)
例如說(shuō)，一個(gè)非常簡(jiǎn)單的手勢(shì)，半屏向下滑動(dòng)關(guān)閉。我們通常來(lái)說(shuō)我們的日常體驗(yàn)，會(huì)是一個(gè)對(duì)距離的判斷，當(dāng)手指拖動(dòng)容器超過(guò)一定的距離，然后松手，就可以觸發(fā)手勢(shì)。
但是僅僅判斷距離是不夠的。因?yàn)槭謩?shì)是對(duì)現(xiàn)實(shí)世界的映射。很多時(shí)候用戶希望滑動(dòng)很短的距離，把東西“甩”出去。
如果僅僅判斷距離，那就很難“甩”出去。這時(shí)候就還需要判定用戶手指在離屏?xí)r的速度了。最后能達(dá)成一個(gè)比較輕松就能觸發(fā)手勢(shì)的結(jié)果。
案例2：左右切換相機(jī)
這是騰訊文檔的文檔掃描頁(yè)面。上半屏是大面積的取景畫面，底部是文檔類型的選擇。
因?yàn)槿【绊?yè)面可以點(diǎn)擊對(duì)焦和測(cè)光，因此輕微的滑動(dòng)不應(yīng)該導(dǎo)致整個(gè)取景頁(yè)面或者底部Tab的滑動(dòng)，應(yīng)當(dāng)是當(dāng)整個(gè)頁(yè)面檢測(cè)到一個(gè)比較大的滑動(dòng)動(dòng)作之后，才自動(dòng)移動(dòng)切換。
但是如果需要離手才能觸發(fā)，如果用戶劃動(dòng)的速度比較慢，整個(gè)體驗(yàn)也會(huì)隨之變得過(guò)于拖沓。所以這里還加了一條邏輯：當(dāng)手指滑動(dòng)速度的加速度急劇減小時(shí)，不用松手也可以觸發(fā)手勢(shì)。這樣的體驗(yàn)感會(huì)覺得流暢很多。
在騰訊文檔中，點(diǎn)擊、滑動(dòng)、懸浮、長(zhǎng)按等手勢(shì)操作貫穿用戶的使用過(guò)程，動(dòng)畫效果是所有交互操作的視覺反饋，也許它沒有那么的「高逼格」，但它卻是這臺(tái)精密儀器運(yùn)轉(zhuǎn)不可缺少的“潤(rùn)滑劑”，流暢愉悅的動(dòng)效能夠讓體驗(yàn)更美好。
但是由于騰訊文檔起初是基于web混合開發(fā)，后面又加入了Flutter框架，這就導(dǎo)致多個(gè)平臺(tái)、框架的動(dòng)效邏輯混在一起，在這個(gè)背景下，設(shè)計(jì)師們就需要從多方面重新梳理并定義動(dòng)畫的基礎(chǔ)規(guī)則。
自然流暢是騰訊文檔內(nèi)所有動(dòng)效運(yùn)行的基礎(chǔ)原則。
由于騰訊文檔是基于Web、flutter等多框架混合開發(fā)的應(yīng)用，動(dòng)畫曲線又都是基于各自框架自帶的貝塞爾曲線（cubic-bezier），這就經(jīng)常導(dǎo)致一些同類型的手勢(shì)操作，最后所呈現(xiàn)的動(dòng)畫效果卻相差很多。并且原生的動(dòng)畫曲線，在實(shí)際使用上并沒有達(dá)到很好的效果，只是能夠比沒有動(dòng)畫要強(qiáng)上一些。因此，確定一套統(tǒng)一、自然并且適合騰訊文檔的動(dòng)畫曲線，是設(shè)計(jì)師優(yōu)先要解決的問(wèn)題。
為此我們根據(jù)動(dòng)畫使用的場(chǎng)景，定義了四種標(biāo)準(zhǔn)曲線。同時(shí)輸出給開發(fā)同學(xué)，作為標(biāo)準(zhǔn)可調(diào)用的曲線。
緩動(dòng)曲線應(yīng)用的場(chǎng)景最為廣泛，也是騰訊文檔的默認(rèn)曲線。相對(duì)于傳統(tǒng)web端或者flutter框架內(nèi)的默認(rèn)曲線，騰訊文檔的緩動(dòng)曲線開始時(shí)會(huì)比較迅速，這樣能給用戶及時(shí)反饋、高效運(yùn)行的感受；在運(yùn)動(dòng)快結(jié)束的階段，為了避免快速反饋帶來(lái)急躁的負(fù)面感受，曲線會(huì)更加平緩，進(jìn)而使正在運(yùn)動(dòng)的元素吸引用戶的注意力，并讓用戶能夠有一定的思考時(shí)間，保證動(dòng)畫的合理性。
即減速曲線。運(yùn)動(dòng)元素在開始階段時(shí)位移變化會(huì)很大，但是后面會(huì)越來(lái)越小。緩出曲線前期快速運(yùn)動(dòng)，不需要過(guò)多讓用戶留意，在結(jié)束的時(shí)候逐漸減慢速度，讓用戶關(guān)注到其新的狀態(tài)，用戶就可以提前切入到定位尋找的階段，等動(dòng)畫停止后就可以立即進(jìn)行操作。這種類型的曲線通常是用在元素進(jìn)入界面時(shí)使用。
彈性曲線是一種基于阻尼彈性振蕩的原理實(shí)現(xiàn)的復(fù)雜曲線，阻尼比決定了曲線具體動(dòng)畫感受，根絕阻尼比的不同，彈性曲線可以分為三種，分別是欠阻尼運(yùn)動(dòng)、臨界阻尼運(yùn)動(dòng)及過(guò)阻尼運(yùn)動(dòng)。在騰訊文檔中，通常只會(huì)使用到欠阻尼運(yùn)動(dòng)及臨界阻尼運(yùn)動(dòng)。
彈性曲線卻并不適合在所有的使用場(chǎng)景中，因?yàn)檫@種運(yùn)動(dòng)一般情況會(huì)需要相對(duì)多一些的時(shí)間來(lái)完成整個(gè)運(yùn)動(dòng)過(guò)程，讓整個(gè)過(guò)程變得過(guò)于拖沓。同時(shí)過(guò)于活潑的彈性動(dòng)畫也會(huì)過(guò)分的吸引用戶注意力，打斷主進(jìn)程的操作，影響效率。
時(shí)長(zhǎng)是元素移動(dòng)所需的時(shí)間，在創(chuàng)建自然流暢的動(dòng)畫中起著重要作用。如果動(dòng)畫太慢，會(huì)使用戶感到卡頓和厭煩；但是如果速度太快，就會(huì)給人緊張急迫的感覺。因此動(dòng)畫的持續(xù)時(shí)間應(yīng)該給與用戶充分的反應(yīng)時(shí)間，同時(shí)又不用過(guò)久等待為標(biāo)準(zhǔn)。
在移動(dòng)端上，我們?cè)O(shè)定動(dòng)畫的持續(xù)時(shí)間在300-400ms。而在web端上，我們?cè)O(shè)定動(dòng)畫的持續(xù)時(shí)間在200-300ms內(nèi)。具體的運(yùn)動(dòng)時(shí)長(zhǎng)視具體動(dòng)畫而定，時(shí)長(zhǎng)并不一成不變。
曲線是動(dòng)效的靈魂，有時(shí)候你覺得平凡的動(dòng)畫，或許只需要簡(jiǎn)單地?fù)軇?dòng)那條運(yùn)動(dòng)曲線，就可以讓這個(gè)動(dòng)畫瞬間變得充滿靈氣。盡管曲線可以解決大部分動(dòng)效問(wèn)題，但在動(dòng)畫的實(shí)際落地中，還是有一些問(wèn)題，是它無(wú)法解決的。這就會(huì)涉及到動(dòng)畫更底層的渲染及邏輯。比如說(shuō)在web端，前端動(dòng)畫卡頓與否其實(shí)是和動(dòng)畫本身實(shí)現(xiàn)性能有關(guān)系的，瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒有在web端增加太多動(dòng)畫的原因，過(guò)多的動(dòng)畫效果其實(shí)意味著需要更多的性能資源傾斜到動(dòng)畫上。
在動(dòng)畫上除了希望提供自然流暢的積極體驗(yàn)，我們也希望繼續(xù)深入，“讓工具褪去冷冰的外殼，走進(jìn)與智能隔空對(duì)話的新世界”。讓體驗(yàn)更有情感，讓用戶更愉悅。
在待辦事項(xiàng)上，優(yōu)化前每當(dāng)用戶點(diǎn)擊完成一項(xiàng)事項(xiàng)時(shí)，完成動(dòng)畫僅僅是機(jī)械的從未完成向完成圖標(biāo)的替換，反饋效果非?！案咝А钡耐瓿闪怂娜蝿?wù)，但是這樣就足夠了么？不一定，當(dāng)一項(xiàng)事項(xiàng)被列為待辦時(shí)，就證明這件事對(duì)于用戶來(lái)說(shuō)是重要的。在現(xiàn)實(shí)中，當(dāng)重要的事情完成時(shí)，我們都是歡欣的，就像心里在放煙花，完成待辦時(shí)候的動(dòng)畫理應(yīng)如此，讓用戶在完成的那一刻體驗(yàn)到“煙花”的綻放。
但是總有一些產(chǎn)品，或者是通用性的考慮，或者是一些歷史原因，或者是一些成本考量，走上了非原生開發(fā)的路，這樣的產(chǎn)品在未經(jīng)打磨的情況下直接一把梭搞出來(lái)，的確會(huì)顯得卡頓，或者難用。
這其中不僅需要工程師一點(diǎn)一滴的性能優(yōu)化，這也對(duì)體驗(yàn)設(shè)計(jì)師對(duì)細(xì)節(jié)的把控提出了更高的要求。只有對(duì)用戶的行為處處關(guān)照，才能無(wú)限接近最極致的體驗(yàn)。
文章來(lái)源：站酷 作者：騰訊ISUX
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
最近負(fù)責(zé)的新項(xiàng)目快上線了（感覺我好像一直在做 0-1），給大家總結(jié)了5個(gè)一定會(huì)遇到的新項(xiàng)目盲區(qū)及最新的解法，希望能幫助大家在交付開發(fā)前就順利完成設(shè)計(jì)輸出。
2020 年 4 月后，我們?cè)谠O(shè)計(jì) iOS 登錄界面的時(shí)候都知道必須加上蘋果官方強(qiáng)行要求的 Apple 賬戶登錄按鈕，但關(guān)于這個(gè)按鈕的設(shè)計(jì)規(guī)范其實(shí)有比較硬性的規(guī)定，沒有注意的話到了開發(fā)還原的時(shí)候就容易踩坑。
在國(guó)內(nèi)的 iOS 登錄設(shè)計(jì)中通常突出的主流登錄方式是“微信”，手機(jī)登錄以及其他的第三方登錄都會(huì)以更弱一點(diǎn)的視覺方式呈現(xiàn)。
蘋果官方是允許對(duì) Apple 賬戶登錄按鈕進(jìn)行一定的自定義的，其中就包含將其弱化為一個(gè)圓形的圖標(biāo)按鈕，只是圖標(biāo)與圓形按鈕的大小比例是官方固定的比例（這個(gè)大家直接下載官方提供的圖標(biāo)，它是自帶留白的區(qū)域的，保持圖標(biāo)與高寬一致就符合要求了）。
而國(guó)外的 iOS 登錄設(shè)計(jì)中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機(jī)登錄通常會(huì)與 Apple 賬戶登錄按鈕同一級(jí)出現(xiàn)在界面中。
這個(gè)時(shí)候需要特別注意的是，蘋果官方對(duì)于這種大按鈕的限制主要在于 3 個(gè)部分：
剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這 2 種。
想了解更多具體內(nèi)容，可以參考官方貼：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
還記的早幾年做安卓項(xiàng)目的時(shí)候上架應(yīng)用商店的啟動(dòng)圖標(biāo)輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動(dòng)圖標(biāo)，被安卓的開發(fā)大大告知，安卓可以出這種帶動(dòng)效效果的啟動(dòng)圖標(biāo)了，它的原理和效果，如下圖：
實(shí)現(xiàn)這個(gè)效果的設(shè)計(jì)配合輸出也很簡(jiǎn)單，只需要整理一下的具體啟動(dòng)圖標(biāo)輸出就可以：
1. 啟動(dòng)圖標(biāo)（前景，不帶背景的）-108dp（324px）
當(dāng)然以上僅針對(duì)純色背景，可以與 logo 主體輕易分隔的啟動(dòng)圖標(biāo)。如果是混為一體的話就需要調(diào)整輸出方式為以下：
想了解更多具體內(nèi)容的鐵汁，戳底下官方傳送門：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
這次新項(xiàng)目又遇到了開發(fā)中改稿的問(wèn)題，大部分都因?yàn)槿恋谋尘皥D切圖大小問(wèn)題。
個(gè)別全屏視覺的界面，比如閃屏、登錄頁(yè)、音視頻語(yǔ)音等等，我們通常設(shè)計(jì)時(shí)不考慮切圖的大小問(wèn)題就會(huì)比較放飛去設(shè)計(jì)。
但實(shí)際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右，就算把壓縮率提到 80%+（市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的 tinypng、pp 鴨等），就算你重復(fù)壓縮，也有至少 200 多 KB，遠(yuǎn)遠(yuǎn)超出開發(fā) 100k 以內(nèi)的切圖大小限制。
所以不得不要求我們?cè)谳敵龈袷降臅r(shí)候拋棄 png 格式，啟用 JPG。
不過(guò)實(shí)際設(shè)計(jì)時(shí)候我們可能仍然會(huì)遇到不能用 JPG，必須用 PNG 格式的情況（透明度蒙層），那么建議大家可以嘗試以下 2 個(gè)小技巧：
最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會(huì)不會(huì)超標(biāo)嚴(yán)重（盡量控制在 100k 以內(nèi)），不然無(wú)法落地再好看也沒有用咯。
目前關(guān)于移動(dòng)端界面里個(gè)別小動(dòng)效的導(dǎo)出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。
Gif、逐幀、包括前幾年流行的 Lottie 大家應(yīng)該都比較熟悉了，這里稍微科普 2 個(gè)陌生一點(diǎn)的格式：
目前我覺得性價(jià)比最高的就是 webp，它的優(yōu)勢(shì)主要在于：
唯一的 2 個(gè)問(wèn)題在于：
我度娘過(guò)一些導(dǎo)出 webp 的方式都不是很好用，問(wèn)了我司的動(dòng)效設(shè)計(jì)師，推薦一個(gè)比較簡(jiǎn)單靠譜的方式分享給大家：
1. 先從 AE 導(dǎo)出逐幀圖（記得需要循環(huán)的動(dòng)效做好循環(huán)）
不知道如何到逐幀圖的看這里：渲染→渲染設(shè)置→格式→選擇“PNG”序列→導(dǎo)出即可
2.下載 isparta
3. 直接將 AE 導(dǎo)出的逐幀圖文件包拖到 isparta 里導(dǎo)出 webp 格式（可選）
設(shè)計(jì)交付的協(xié)同平臺(tái)現(xiàn)在市面上很多，很多大廠也有自己內(nèi)部的協(xié)同平臺(tái)來(lái)承載設(shè)計(jì)交付，俺們豬廠用的叫 dbox（非常滴不好用），在強(qiáng)推之下開始申請(qǐng)經(jīng)費(fèi)改用 Figma 了。之前為了更換協(xié)同平臺(tái)，把交付的協(xié)同平臺(tái)都做了一番調(diào)研，這里給大家直接看表格吧。
看完圖大家就會(huì)發(fā)現(xiàn)除了 Figma 大家的使用情況不會(huì)差很多，差的主要還是錢?？偟膩?lái)說(shuō)的建議就是，如果已經(jīng)從sketch改用Figma的土豪團(tuán)隊(duì)就可以直接分享Figma文件鏈接給開發(fā)搞定切圖標(biāo)注以及文件存檔這2件事兒了。
如果還在用 sketch 和 XD 的鐵汁，交付型的協(xié)同平臺(tái)我個(gè)人比較推薦 Zeplin，雖然有的人會(huì)說(shuō)它服務(wù)器在國(guó)外很卡，我覺得其實(shí)還好吧，同時(shí) Zeplin 近幾年還解決了 Win 系統(tǒng)適配的問(wèn)題。
然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的，因?yàn)楦咔宥?、流暢度到美感幾乎都比較完美。一直到我發(fā)現(xiàn)了它居然是個(gè)完全開放的交付協(xié)作平臺(tái)，也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項(xiàng)目文件，瞬間安全系數(shù)降為 0。作為一個(gè)明顯對(duì)標(biāo)企業(yè)級(jí)的協(xié)作平臺(tái)這么瘋狂的植入社交功能，到底是企鵝的社交基因太強(qiáng)大還是怎么肥四？
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：Nana的設(shè)計(jì)錦囊
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
國(guó)內(nèi)互聯(lián)網(wǎng)近幾年發(fā)展迅速，在很多方面都超過(guò)了一些其他國(guó)家互聯(lián)網(wǎng)的發(fā)展階段。隨著國(guó)內(nèi)互聯(lián)網(wǎng)產(chǎn)品競(jìng)爭(zhēng)日趨激烈，很多企業(yè)都把目光投向了用戶量龐大的海外市場(chǎng)。而疫情對(duì)于全球經(jīng)濟(jì)的影響更是加速了海外市場(chǎng)的數(shù)字化進(jìn)程。據(jù) Sensor Tower 數(shù)據(jù)顯示，2020年Q1全球移動(dòng)互聯(lián)網(wǎng)應(yīng)用下載量達(dá)336億次，同比增長(zhǎng)了20.3%。
產(chǎn)品出海的第一道屏障就是語(yǔ)言。但若想打造一款能夠適應(yīng)海外市場(chǎng)的產(chǎn)品，只完成不同語(yǔ)種的翻譯是遠(yuǎn)遠(yuǎn)不夠的。在產(chǎn)品設(shè)計(jì)的過(guò)程中，我們需要考慮兩個(gè)方面：國(guó)際化與本土化。
國(guó)際化+本地化的策略，也就是“glocal—global+local”，指的是結(jié)合國(guó)際統(tǒng)一和地區(qū)差異。這種策略在統(tǒng)一的前提下，通過(guò)靈活配置保障地區(qū)的個(gè)性化體驗(yàn)，既能滿足統(tǒng)一維護(hù)提升產(chǎn)品效率，也能保障當(dāng)?shù)赜脩舻奶厥庠V求，是一種性價(jià)比很高的設(shè)計(jì)方案。
產(chǎn)品設(shè)計(jì)的國(guó)際化
產(chǎn)品的國(guó)際化，即全球化。國(guó)際化的通用設(shè)計(jì)能夠?yàn)楫a(chǎn)品打造一個(gè)全球統(tǒng)一的形象與內(nèi)核。
Chrome的不同地區(qū)首頁(yè)功能與樣式基本一致
一套通用的設(shè)計(jì)系統(tǒng)和設(shè)計(jì)規(guī)范，既可以幫助我們?cè)诋a(chǎn)品的國(guó)際化設(shè)計(jì)中 樹立產(chǎn)品調(diào)性，又可以保證操作的 一致性，同時(shí)提升設(shè)計(jì)的 高效性。阿里旗下面向東南亞市場(chǎng)的購(gòu)物平臺(tái)Lazada在開發(fā)之初，通過(guò)使用Fusion Design的設(shè)計(jì)系統(tǒng)，大大節(jié)省了設(shè)計(jì)的時(shí)間。在如此復(fù)雜的電商業(yè)務(wù)場(chǎng)景之下，整套產(chǎn)品的設(shè)計(jì)最終僅3靠個(gè)設(shè)計(jì)師就完成了。
設(shè)計(jì)系統(tǒng)對(duì)產(chǎn)品研發(fā)成本的影響
除此之外，一致的內(nèi)核也能夠幫助企業(yè)在全球范圍內(nèi)建立起統(tǒng)一的品牌形象，增強(qiáng) 品牌的識(shí)別度與知名度。
產(chǎn)品設(shè)計(jì)的本土化
想要讓產(chǎn)品在某一個(gè)市場(chǎng)上站穩(wěn)腳跟，對(duì)于本土化的思考是必不可少的。本土化的核心是 因地制宜，根據(jù)地區(qū)差異相應(yīng)調(diào)整產(chǎn)品策略。
UC瀏覽器在不同地區(qū)的首頁(yè)布局
為什么說(shuō)本土化對(duì)于產(chǎn)品的出海非常重要？其原因并不難理解。Charles Eames說(shuō)過(guò)，“Recognizing the need is the primary condition for design.” 任何設(shè)計(jì)的本質(zhì)都脫離不開對(duì)需求和問(wèn)題本身的理解。好的設(shè)計(jì)是在對(duì)需求、動(dòng)機(jī)、心理、環(huán)境等相關(guān)因素有了充分了解之后所產(chǎn)出的解決方案。
針對(duì)海外設(shè)計(jì)研究的思維框架
在考慮產(chǎn)品的本土化時(shí)，我們需要關(guān)注到用戶的需求是什么、是否仍然成立，用戶的行為模式是什么樣的，以及整個(gè)外在社會(huì)物質(zhì)、精神環(huán)境等方面的狀況。螞蟻金服團(tuán)隊(duì)通過(guò)海外本土化設(shè)計(jì)實(shí)踐，總結(jié)出了一套“環(huán)境-人-需求“的研究框架，列出了可以去調(diào)研的多個(gè)方面。
螞蟻金服-“環(huán)境-人-需求”出海產(chǎn)品設(shè)計(jì)研究框架（做了小部分修改）
需求（價(jià)值）
首先，我們要做的第一步判斷就是原來(lái)的 用戶需求是否成立。產(chǎn)品在原市場(chǎng)想要解決的問(wèn)題，是否在新的市場(chǎng)仍然存在，即我們的產(chǎn)品是否 有用？這個(gè)問(wèn)題的答案決定了原先的產(chǎn)品是否對(duì)于該市場(chǎng)的用戶是有 價(jià)值的。如果有價(jià)值，那么就可以深入探索如何讓用戶用起來(lái)；如果沒有價(jià)值，那么就需要進(jìn)一步判斷是否要繼續(xù)開拓這個(gè)市場(chǎng)，以及如果繼續(xù)開拓這個(gè)市場(chǎng)，在原有的產(chǎn)品形態(tài)上，我們能否通過(guò)改造的手段讓它符合在新市場(chǎng)的用戶群中挖掘出來(lái)的、不一樣的 新價(jià)值？達(dá)到了“有用”的標(biāo)準(zhǔn)，我們則需要開始考慮“ 好用”的問(wèn)題。只有滿足“好用”這一條件，產(chǎn)品才能夠被用戶用起來(lái)、從而真正在新市場(chǎng)落地。在實(shí)現(xiàn)“好用”的過(guò)程中，我們可以關(guān)注以下幾個(gè)層面的影響因素：
生活形態(tài)、價(jià)值觀
生活環(huán)境與社會(huì)環(huán)境會(huì)塑造當(dāng)?shù)赜脩舻纳钚螒B(tài)與習(xí)慣。下圖分別是日本和北美地區(qū)的新聞資訊類App。同樣是推送新聞資訊，兩者在表現(xiàn)形式上卻大相徑庭。可以看出日本的新聞App布局緊湊、信息量大、頁(yè)面坪效很高；而北美的新聞App則更注重突出重點(diǎn)內(nèi)容，信息密度相對(duì)來(lái)說(shuō)并不高。
日本-新聞資訊類App
北美-新聞資訊類App
這種差異的背后，其實(shí)是兩地上班族生活形態(tài)的差異。日本城市小、人口密度大，上班族通勤大多會(huì)選擇地鐵。而北美地區(qū)面積大，大部分人會(huì)駕車上班。駕車的人雙手需要長(zhǎng)時(shí)間控制方向盤，同時(shí)開車也需要持續(xù)注意路況，只能在間隙中查看新聞內(nèi)容；而乘坐地鐵的人雙手更加自由，也有較長(zhǎng)的通勤時(shí)間需要消磨，故可以接受更多的信息，也能夠接受更繁瑣的操作。
北美（左）和日本（右）各自的生活形態(tài)
有時(shí)候，某個(gè)地區(qū)的用戶長(zhǎng)期習(xí)慣的操作模式，會(huì)與主流的操作模式有所差異。設(shè)計(jì)師junu在個(gè)人博客中講述了他為Melon（一個(gè)韓國(guó)主流音樂播放器）進(jìn)行體驗(yàn)優(yōu)化的一段經(jīng)歷。他發(fā)現(xiàn)Melon當(dāng)時(shí)的播放操作邏輯比較冗長(zhǎng)，用戶需要先點(diǎn)選列表中的多首樂曲，再點(diǎn)擊底下的播放鍵，此時(shí)Melon會(huì)將用戶所選歌曲自動(dòng)生成一個(gè)列表并進(jìn)行播放。這和當(dāng)時(shí)Spotify等音樂播放器“點(diǎn)擊即播放”的主流交互邏輯相比，要更復(fù)雜和麻煩，尤其是在用戶只是想要立即聽到某一首歌曲的時(shí)候。因此，junu 提議引入“點(diǎn)擊=播放”的操作方式。但當(dāng)他們?cè)O(shè)計(jì)出了這樣的優(yōu)化方案后，卻發(fā)現(xiàn)在測(cè)試過(guò)程中老用戶們對(duì)這樣的交互方式感到陌生和沮喪。基于用戶反饋，最終，他們采取了一個(gè)折中的方案，既保留了原先的復(fù)選框作為多選操作的區(qū)域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時(shí)又引入了點(diǎn)擊單曲直接播放的操作。相比第一版優(yōu)化方案，用戶的接受程度有了明顯提升。
Melon播放器的點(diǎn)選操作邏輯
設(shè)備環(huán)境
10年前，高端大屏幕手機(jī)在東南亞和非洲市場(chǎng)普及率并不高，因此產(chǎn)品出海時(shí)需要考慮當(dāng)?shù)爻Ｒ姷脑O(shè)備是什么，并作出相應(yīng)的適配。近幾年，隨著市場(chǎng)經(jīng)濟(jì)的發(fā)展以及中國(guó)手機(jī)的成功出海，即使是東南亞和非州的發(fā)展中國(guó)家，高端移動(dòng)設(shè)備的普及率也已經(jīng)很高，這為設(shè)計(jì)師在考慮通用性的過(guò)程中減輕了不少負(fù)擔(dān)。不過(guò)，在為每個(gè)地區(qū)的用戶做產(chǎn)品設(shè)計(jì)時(shí)，仍然需要調(diào)研清楚當(dāng)?shù)卦O(shè)備的使用情況，比如什么樣設(shè)備更流行、普及率更高；如果某一地區(qū)的設(shè)備不夠發(fā)達(dá)，那么設(shè)計(jì)的操作也需要考慮到設(shè)備不同所造成的差異。
業(yè)態(tài)/監(jiān)管
在不同的國(guó)家或者地區(qū)，各個(gè)行業(yè)的標(biāo)準(zhǔn)與制度也可能存在很大區(qū)別。例如財(cái)會(huì)軟件行業(yè)中，在北美和英國(guó)占據(jù)了重要市場(chǎng)份額的Quickbooks、Xero等公司，卻無(wú)法成功打入歐洲一些國(guó)家的市場(chǎng)。因?yàn)樨?cái)會(huì)軟件本身的功能、流程設(shè)計(jì)與當(dāng)?shù)氐呢?cái)務(wù)制度是緊密相關(guān)的。在這樣的情況下，歐洲本土的企業(yè)顯然會(huì)對(duì)當(dāng)?shù)氐恼吆椭贫雀邮煜?，也更容易設(shè)計(jì)出符合當(dāng)?shù)仄髽I(yè)與會(huì)計(jì)需求的財(cái)會(huì)產(chǎn)品。
2015年，Airbnb進(jìn)入中國(guó)市場(chǎng)。在最初的市場(chǎng)調(diào)研和用戶調(diào)研之后，針對(duì)本土化，他們所邁出的第一步就是根據(jù)中國(guó)的業(yè)態(tài)環(huán)境對(duì)產(chǎn)品的前10%和后10%做了改造。其中，產(chǎn)品的前10%指的是登錄這一類用戶開始使用產(chǎn)品所需要進(jìn)行的步驟，而后10%指的則是支付等用戶完成一個(gè)完整流程所需要進(jìn)行的操作。因?yàn)楫?dāng)用戶進(jìn)入到產(chǎn)品主要鏈路中時(shí)，其功能流程基本相通（搜索地點(diǎn)、挑選房間、瀏覽信息等），不需要做過(guò)多的改變；但產(chǎn)品的前10%和后10%則決定了用戶能不能把產(chǎn)品用起來(lái)并不遇到障礙。因此，針對(duì)登錄的部分，愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號(hào)的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國(guó)本土用戶進(jìn)入產(chǎn)品和完成訂單的壁壘。
Airbnb產(chǎn)品中國(guó)本土化的“前10%與后10%”策略
社會(huì)經(jīng)濟(jì)
社會(huì)經(jīng)濟(jì)環(huán)境的不同代表著社會(huì)階層狀況的不同，它會(huì)影響人們?cè)谙M(fèi)時(shí)的行為方式。螞蟻金服在調(diào)研菲律賓市場(chǎng)時(shí)發(fā)現(xiàn)，當(dāng)?shù)負(fù)碛秀y行賬戶的人口僅占了總?cè)丝诘?4%，同期中國(guó)擁有銀行賬戶的人口則占了總?cè)丝诘?5%。而這34%的人基本上都是當(dāng)?shù)氐母蝗思爸挟a(chǎn)階層。在貧富分化嚴(yán)重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學(xué)特征很大程度影響了螞蟻金服電子錢包業(yè)務(wù)對(duì)菲律賓目標(biāo)用戶的描繪，繼而影響了產(chǎn)品各個(gè)層面的設(shè)計(jì)。
文化/宗教
在各個(gè)文化/宗教里存在著不同的意象，也會(huì)有各自的表達(dá)方式與禁忌等等。在某個(gè)文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設(shè)計(jì)時(shí)需要去注意的。除此之外，在不同的文化/宗教語(yǔ)境下，人們會(huì)有不同的行為模式與價(jià)值取向，這里我們會(huì)引入一個(gè)模型——霍夫斯泰德文化維度模式，來(lái)對(duì)這一問(wèn)題進(jìn)行更詳細(xì)的解讀。
霍夫斯泰德文化維度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化維度模式是荷蘭心理學(xué)家吉爾特·霍夫斯泰德提出的用來(lái)衡量不同國(guó)家文化差異的一個(gè)理論框架。它可以幫助我們對(duì)于不同文化群體的價(jià)值觀有一個(gè)較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結(jié)了衡量各文化價(jià)值觀的六個(gè)維度：
使用他們官方網(wǎng)站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查詢到各個(gè)國(guó)家的文化維度指數(shù)，也可以選擇不同的國(guó)家進(jìn)行對(duì)比。
在為特定地區(qū)的用戶設(shè)計(jì)產(chǎn)品時(shí)，我們可以以從這些維度去解讀他們的行為傾向，并據(jù)此提出相應(yīng)的解決方案或者設(shè)計(jì)方案。滴滴團(tuán)隊(duì)在開拓墨西哥市場(chǎng)時(shí)，根據(jù)墨西哥的文化維度指數(shù)在產(chǎn)品的本土化上制定了從功能到外觀等不同層面上的設(shè)計(jì)策略。
墨西哥地區(qū)的文化特征指數(shù)
滴滴墨西哥的本土化設(shè)計(jì)策略
這類源于文化差異的設(shè)計(jì)差異并不少見。在淘寶等國(guó)內(nèi)的電商平臺(tái)上，“按照銷量排序”是一個(gè)被高頻使用的功能，消費(fèi)者們認(rèn)為什么產(chǎn)品買的人多，什么產(chǎn)品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當(dāng)在北美的電商平臺(tái)亞馬遜上，我們會(huì)發(fā)現(xiàn)并沒有按銷量排序這個(gè)選項(xiàng)。因?yàn)槊绹?guó)的用戶相對(duì)來(lái)說(shuō)個(gè)人主義更強(qiáng)、更相信自己的判斷和選擇，他們不認(rèn)為他人推薦的就一定是好的。
國(guó)內(nèi)外電商平臺(tái)對(duì)比
在企業(yè)即時(shí)通訊工具行業(yè)，國(guó)內(nèi)的主流產(chǎn)品，如企業(yè)微信、釘釘?shù)?，都選擇了藍(lán)色這一比較沉穩(wěn)的顏色作為主色調(diào)，在產(chǎn)品功能的形態(tài)上也偏向于嚴(yán)肅。而海外的辦公產(chǎn)品Slack，視覺色彩更加豐富；整體的產(chǎn)品定位也更加活潑歡樂，常常會(huì)有“不嚴(yán)肅”的表達(dá)，比如在界面多處都使用了emoji。這樣的產(chǎn)品形態(tài)差異，其背后是兩種文化在放縱（享樂）/克制（嚴(yán)肅）這一維度上的差異。
企業(yè)微信與slack的產(chǎn)品風(fēng)格對(duì)比
內(nèi)容本土化
除了功能框架上的設(shè)計(jì)需要考慮本土化外，產(chǎn)品中運(yùn)營(yíng)內(nèi)容的本土化也是不可輕視的一環(huán)。Spotify Design 團(tuán)隊(duì)在《 Designing for Belonging: Why Image Localization Matters 》一文中，記錄了他們對(duì)于內(nèi)容本地化的一些經(jīng)驗(yàn)和思考。同樣，內(nèi)容的翻譯僅僅是本土化的第一步。在地區(qū)之間區(qū)別不大時(shí)，完成內(nèi)容的翻譯便能夠滿足其他地區(qū)的需求。如下圖中 “浴室歌單（ Songs to sing in the shower）”的播放列表，列表上的文案一經(jīng)翻譯，就能夠推送給德國(guó)、波蘭、以色列、意大利等一眾國(guó)家的用戶。但當(dāng)內(nèi)容的閱讀群體有著更顯著的差異時(shí)，僅僅翻譯是不夠的。在看到這張圖片的時(shí)候，其他人種比如亞洲人可能就不會(huì)產(chǎn)生很強(qiáng)的代入感，也會(huì)缺少對(duì)產(chǎn)品的一種歸屬感（這個(gè)產(chǎn)品并不是為”我“設(shè)計(jì)的）。
Spotify "Songs to sing in the shower" 歌單
下圖展示的是Spotify另一個(gè)歌單—— “快樂時(shí)光（ Happy Hits)" 的封面在不同國(guó)家的呈現(xiàn)形式?？梢钥吹剑鎸?duì)文化差異更大的群體時(shí)，Spotify在保持了統(tǒng)一的樣式風(fēng)格的基礎(chǔ)上，針對(duì)每一個(gè)國(guó)家和地區(qū)都展示了當(dāng)?shù)厝嗽谒麄兊纳钪小翱鞓贰钡臉幼?。這種本地化內(nèi)容更加貼近當(dāng)?shù)赜脩簦材軌蜃層脩舢a(chǎn)生更強(qiáng)的連結(jié)感與共感。
Spotify "Happy Hits" 歌單
結(jié)語(yǔ)
回到那句話 —— ”Recognizing the need is the primary condition for design.“ 產(chǎn)品的出海其實(shí)只是我們?cè)谠O(shè)計(jì)中會(huì)遇到的一種場(chǎng)景，在這個(gè)特定場(chǎng)景下我們的設(shè)計(jì)思考與其他場(chǎng)景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場(chǎng)下另一群用戶的特征、需求、使用情景、操作習(xí)慣等關(guān)鍵信息。無(wú)論是不是在為產(chǎn)品的出海而設(shè)計(jì)，我們始終應(yīng)該保持對(duì)用戶的好奇，讓最終的設(shè)計(jì)實(shí)現(xiàn)我們期望達(dá)成的目標(biāo)。
文章來(lái)源：UI中國(guó) 作者：酷家樂用戶體驗(yàn)設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
迪士尼的12條動(dòng)畫基本原則是傳統(tǒng)動(dòng)畫中最有價(jià)值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統(tǒng)動(dòng)畫（例如角色動(dòng)畫）設(shè)計(jì)的，但在本文中，我們將探討如何將其中的一些原理應(yīng)用于UI動(dòng)效上。
在動(dòng)畫中，擠壓和拉伸表示對(duì)象的重力，質(zhì)量，彈性。當(dāng)場(chǎng)景中的彈球撞擊地面時(shí)會(huì)被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結(jié)合。
例如，按鈕的按下狀態(tài)為擠壓。通過(guò)控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態(tài)。除此之外，它還可以應(yīng)用于界面上的所有的交互式元素。
應(yīng)用于按鈕上的擠壓和拉伸
應(yīng)用于側(cè)邊欄的擠壓和拉伸
預(yù)備動(dòng)作為用戶展示了即將發(fā)生的事情。就像奔跑開始時(shí)，我們的身體會(huì)先向后傾，然后才是加速跑，這就是預(yù)備動(dòng)作。在UI動(dòng)效中，懸停狀態(tài)就是很好的例子。每當(dāng)我們將鼠標(biāo)懸停在元素上時(shí)，某些元素都會(huì)做出反應(yīng)，表明它是可單擊的，并且當(dāng)您單擊它時(shí)會(huì)發(fā)生某些事情。
懸?；?dòng)通常會(huì)告訴我們接下來(lái)有一個(gè)動(dòng)作發(fā)生
涉及水平滾動(dòng)的界面通常會(huì)顯示下一個(gè)元素的一部分，該元素會(huì)出現(xiàn)在滾動(dòng)/滑動(dòng)中
在傳統(tǒng)動(dòng)畫中，時(shí)間由繪制的幀動(dòng)畫來(lái)控制。幀數(shù)越多，動(dòng)畫將越流暢和越慢。時(shí)間還可以表現(xiàn)對(duì)象的情緒和性格。
時(shí)間也是所有UI動(dòng)效最基本的屬性。定時(shí)和緩動(dòng)功能在動(dòng)效設(shè)計(jì)中起著重要的作用。漫長(zhǎng)的過(guò)渡會(huì)使您的用戶等待太久。另一方面，如果動(dòng)畫太快，用戶可能會(huì)錯(cuò)過(guò)一些東西。通常，大多數(shù)界面動(dòng)畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過(guò)渡之類的復(fù)雜動(dòng)作約為500毫秒。您可以參考Material Design，其中對(duì)每種類型的動(dòng)畫的持續(xù)時(shí)間都有很好的解釋。
右側(cè)的過(guò)渡會(huì)使用戶等待太久
現(xiàn)實(shí)世界中的大多數(shù)對(duì)象都遵循緩動(dòng)效果。換句話說(shuō)，物體的運(yùn)動(dòng)并不突然。就像自由下落的物體會(huì)在運(yùn)動(dòng)過(guò)程中逐漸加速。
向UI元素添加緩動(dòng)效果可以使它們看起來(lái)更生動(dòng)自然。制定時(shí)間節(jié)奏和緩動(dòng)標(biāo)準(zhǔn)可以讓你建立一個(gè)高效的動(dòng)效庫(kù)。
右側(cè)添加了緩動(dòng)效果，所以看起來(lái)更自然
轉(zhuǎn)場(chǎng)，它包括如何將對(duì)象放置在場(chǎng)景中，如何以及何時(shí)進(jìn)行每個(gè)動(dòng)畫等等。它將用戶的注意力引向場(chǎng)景中最重要的對(duì)象。
對(duì)于UI界面，轉(zhuǎn)場(chǎng)決定了元素的放置位置以及在發(fā)生交互時(shí)如何對(duì)元素進(jìn)行排版。它將用戶的注意力引向最關(guān)鍵的元素。
這是一個(gè)音樂類的APP，轉(zhuǎn)場(chǎng)動(dòng)畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨(dú)出現(xiàn)，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會(huì)讓事物更自然。在UI界面中，使用弧線運(yùn)動(dòng)會(huì)比使用直線運(yùn)動(dòng)更加的自然，要突出元素運(yùn)動(dòng)的路徑時(shí)可以使用弧線。
弧線運(yùn)動(dòng)更加生動(dòng)自然
在動(dòng)畫中，輔助動(dòng)畫用于強(qiáng)調(diào)場(chǎng)景中發(fā)生主要?jiǎng)幼?。例如，角色的頭發(fā)在行走時(shí)的微妙移動(dòng)，或者是面部表情的微妙變化。
在UI界面中，輔助動(dòng)畫可以使主要?jiǎng)幼鞲油怀?，這在向用戶反饋信息時(shí)非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動(dòng)畫讓點(diǎn)贊效果更飽滿
場(chǎng)景中的重要角色必須具有吸引力，通常會(huì)將某些動(dòng)作進(jìn)行夸大以引起更多關(guān)注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設(shè)計(jì)就是一個(gè)很好的例子，懸浮的按鈕在靜態(tài)狀態(tài)很顯眼，因?yàn)樗念伾兀⑶覒腋≡谒性刂?。?dāng)發(fā)生任何交互時(shí)，夸張的動(dòng)畫讓它可以占據(jù)整個(gè)屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動(dòng)畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當(dāng)車前進(jìn)的時(shí)，身體會(huì)短暫后仰，然后也會(huì)隨之前進(jìn)，我們稱之為延時(shí)。突然剎車時(shí)，又會(huì)由于慣性運(yùn)動(dòng)身體向前傾然后回來(lái) 。
在UI界面中，同樣可以在元素靜止之前添加慣性運(yùn)動(dòng)，以使它們感覺更自然。不同元素直接也可以添加延時(shí)效果，讓動(dòng)效更細(xì)膩~
窗口放大時(shí)添加了慣性效果
圖像和文本添加了短暫的延時(shí)效果
文章來(lái)源：UI中國(guó) 作者：設(shè)計(jì)師深海
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
編輯導(dǎo)語(yǔ)：在一個(gè)團(tuán)隊(duì)里，成員之間“協(xié)同合作”是非常有必要的，比如一些崗位沒辦法完全理解設(shè)計(jì)師的想法，多溝通可以避免一些不必要的摩擦；在出現(xiàn)問(wèn)題時(shí)，現(xiàn)在自己的環(huán)節(jié)找找問(wèn)題，再進(jìn)行溝通；本文作者分享了關(guān)于精準(zhǔn)還原設(shè)計(jì)稿的環(huán)節(jié)，我們一起來(lái)看一下。
UI設(shè)計(jì)師作為展示產(chǎn)品形態(tài)的執(zhí)行層，產(chǎn)品上線前走查視覺與交互還原是必經(jīng)環(huán)節(jié)。
設(shè)計(jì)師可能都遇到過(guò)一個(gè)問(wèn)題，作圖時(shí)連一像素的分割線都糾結(jié)好幾次，但是開發(fā)完的效果卻不盡人意，UI驗(yàn)收不通過(guò)；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來(lái)血拼。
我們經(jīng)常會(huì)聽到身邊的設(shè)計(jì)師與開發(fā)哥的一些對(duì)話，關(guān)于對(duì)齊、大小、間距等設(shè)計(jì)還原問(wèn)題經(jīng)常會(huì)討論很久；甚至有時(shí)會(huì)覺得，幾個(gè)像素的間距是不是有必要這么糾結(jié)？
「還原」是指事物恢復(fù)到原來(lái)的狀況或形狀，互聯(lián)網(wǎng)中的「設(shè)計(jì)還原」是說(shuō)開發(fā)后實(shí)際界面和設(shè)計(jì)稿效果有偏差，進(jìn)行設(shè)計(jì)校對(duì)。
一直以來(lái)，設(shè)計(jì)驗(yàn)收都不太受重視：
不同的項(xiàng)目類型還原度也不同：用戶產(chǎn)品>B端產(chǎn)品>后臺(tái)；對(duì)于用戶產(chǎn)品最好是能做到像素級(jí)還原。
在這個(gè)快速發(fā)展、迭代、更新的時(shí)代，互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)重視度越來(lái)越高，而其中的產(chǎn)品設(shè)計(jì)還原也成為了工作流中重要的一環(huán)。
我相信每一名UI設(shè)計(jì)師，心里應(yīng)該都有一個(gè)前端能100%還原設(shè)計(jì)稿的夢(mèng)想，畢竟那是我們艱苦奮斗的勞動(dòng)成果。
而視覺還原的高低與否，則直接取決于設(shè)計(jì)——開發(fā)——測(cè)試這些環(huán)節(jié)的協(xié)作質(zhì)量；不僅僅影響上線產(chǎn)品的用戶體驗(yàn)，還影響著作為產(chǎn)品設(shè)計(jì)最后一環(huán)的工作質(zhì)量。
經(jīng)過(guò)走訪UI/UX設(shè)計(jì)師、前端工程師和測(cè)試工程師的還原設(shè)計(jì)圖的工作場(chǎng)景。
深究原因后，線上效果的失真率其實(shí)涉及到設(shè)計(jì)、前端開發(fā)、測(cè)試這三個(gè)環(huán)節(jié)，分析造成這種現(xiàn)象出現(xiàn)的原因大概有以下幾點(diǎn)：
了解開發(fā)依據(jù)哪些規(guī)則還原設(shè)計(jì)稿，前期的準(zhǔn)備工作是重中之重，設(shè)定好每一個(gè)細(xì)節(jié)規(guī)則，后期落地還原時(shí)才會(huì)將頁(yè)面的失真率降到最低。
UI 設(shè)計(jì)中，設(shè)計(jì)規(guī)范是設(shè)計(jì)還原一個(gè)關(guān)鍵步驟；一個(gè)好的規(guī)范應(yīng)該是高效的、簡(jiǎn)單易懂的。
設(shè)計(jì)規(guī)范通?？梢园杨伾?、字體、組件等內(nèi)容制定成規(guī)范，不僅僅保證視覺的一致性，也極大方便樣式和組件的復(fù)用，后期的維護(hù)和開發(fā)；在規(guī)范的輔助下，開發(fā)在搭建全局共用控件時(shí)規(guī)則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
3.1.1 色彩規(guī)范
顏色是設(shè)計(jì)中最重要的元素，顏色的運(yùn)用與搭配決定設(shè)計(jì)的品質(zhì)感；在 UI 設(shè)計(jì)中，顏色的使用規(guī)范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。
3.1.2 字體規(guī)范
文字是APP主要信息的表現(xiàn)，尤其是新聞閱讀、社區(qū)APP等制定標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范和良好的排版方式，用戶使用APP也覺得毫無(wú)疲勞感，這一點(diǎn)很重要。
不同的字體氣質(zhì)不一樣，并且不同場(chǎng)景下帶給人的感受也不一樣；所以需要在設(shè)計(jì)的時(shí)候考慮到字體的設(shè)計(jì)效果，然后在設(shè)計(jì)規(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)識(shí)性質(zhì)的圖形就是圖標(biāo)。作為 UI 設(shè)計(jì)中重要的設(shè)計(jì)模塊，產(chǎn)品的每個(gè)頁(yè)面中都有可能存在圖標(biāo)。
設(shè)計(jì)規(guī)范中，圖標(biāo)一般按照用途分為兩類：應(yīng)用圖標(biāo)、功能圖標(biāo)。
圖標(biāo)還應(yīng)該根據(jù)不同的功能需求設(shè)計(jì)不同的狀態(tài)：如常態(tài)、選中態(tài)、點(diǎn)擊態(tài)等。
應(yīng)用圖標(biāo)：各種應(yīng)用程序的識(shí)別標(biāo)志，在應(yīng)用商店里下載的一些應(yīng)用程序的標(biāo)志。
功能圖標(biāo)：規(guī)范中最好標(biāo)明圖標(biāo)格式與使用方式。比如 Web 設(shè)計(jì)，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發(fā)；如果是原生 APP，那么需要標(biāo)注圖標(biāo)導(dǎo)出格式與尺寸。
3.1.4 圖片規(guī)范
圖片作為界面設(shè)計(jì)的重要組成部分，需要標(biāo)明尺寸規(guī)范，分為不同用途的種類。
3.1.5 控件規(guī)范
控件是指產(chǎn)品界面中可操作的部件，與組件是有一些區(qū)別的：控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說(shuō)法就是組件為多個(gè)元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復(fù)選框、選項(xiàng)卡、搜索框、分頁(yè)、切換按鈕、步進(jìn)器、進(jìn)度條、角標(biāo)等。
3.1.5.1 按鈕
按鈕有 5 個(gè)狀態(tài)：正常、點(diǎn)擊、懸停、加載、禁用。
需要在規(guī)范中分別羅列出這五個(gè)狀態(tài)，標(biāo)注上對(duì)應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值；如果是圖標(biāo)按鈕的話，除了上述參數(shù)值以外，還需要標(biāo)注 icon 和按鈕文本之間的間距，icon 圖標(biāo)的大小。
3.1.5.2 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對(duì)特定格式的文本進(jìn)行處理：密碼隱藏顯示、身份證、卡號(hào)分段顯示，標(biāo)注寬高。
3.1.5.3 選擇
選擇可分為單選與多選，并且也有五種不同狀態(tài)：未選擇、已選中、未選懸停、已選失效、未選失效項(xiàng)，規(guī)范中需展示出所有效果狀態(tài)。
3.1.5.4 進(jìn)度條
用于向用戶展示步驟的步數(shù)以及當(dāng)前所處的進(jìn)程。
3.1.6 缺省頁(yè)
常用的 UI 組件（Component）：表格、對(duì)話框、提示條、氣泡提示、日期選擇器、多級(jí)選擇器、標(biāo)簽輸入框、組合框、上傳等。
如果UI忽略規(guī)范，前端在不知道有可復(fù)用組件的情況下，很可能每一次都要手動(dòng)書寫代碼；寫的代碼越多，遺漏掉細(xì)節(jié)和犯錯(cuò)的可能性越大，導(dǎo)致效率降低。
最關(guān)鍵的是——對(duì)于今后的迭代，前端又得一個(gè)頁(yè)面一個(gè)頁(yè)面修改。
3.2.1 組件的好處
統(tǒng)一性：
高效性：
延續(xù)性：
3.2.2 組件化的特點(diǎn)
3.2.3 組件化分類
我們根據(jù)當(dāng)下現(xiàn)有的業(yè)務(wù)場(chǎng)景和對(duì)往后一段時(shí)期的業(yè)務(wù)發(fā)展方向進(jìn)行規(guī)劃，將組件庫(kù)的組件類型分為通用組件和業(yè)務(wù)組件；一般業(yè)務(wù)組件庫(kù)是不對(duì)外的，所以在Ant Design官網(wǎng)只能看到通用組件部分。
3.2.3.1 通用組件
指適用范圍廣，擴(kuò)大頻次高，可重復(fù)使用多個(gè)業(yè)務(wù)且不包含業(yè)務(wù)邏輯。某些導(dǎo)航欄，按鈕，吐司，彈窗等。我們將通用組件細(xì)分為五個(gè)子類別：基礎(chǔ)組件，導(dǎo)航，數(shù)據(jù)錄入，數(shù)據(jù)展示，操作反饋。
2.3.2 業(yè)務(wù)組件
這類組件對(duì)比通用組件而言最大的特點(diǎn)就是包含了一系列業(yè)務(wù)屬性，跟產(chǎn)品功能有重疊的關(guān)聯(lián)性，因此影響到適用范圍可能僅限于于1?2個(gè)業(yè)務(wù)系統(tǒng)或特殊場(chǎng)景，且復(fù)使用頻次不高。畢竟使用場(chǎng)景特殊也有限，放出參考意義不大。
2.3.3 組件化搭建流程場(chǎng)景
組件化的搭建在兩種場(chǎng)景下進(jìn)行：
1）產(chǎn)品立項(xiàng)前就開始組件化，在產(chǎn)品0到1之前，擁有一套組件和設(shè)計(jì)規(guī)范。設(shè)計(jì)師可以從以前項(xiàng)目的組件庫(kù)和設(shè)計(jì)規(guī)范直接套用并修改，這樣項(xiàng)目前期設(shè)計(jì)做起來(lái)更加方便且省時(shí)省力少挖坑。
2）產(chǎn)品經(jīng)歷過(guò)0到1后，產(chǎn)品趨于成熟，這個(gè)時(shí)候開始做組件化。組件化搭建最多會(huì)有六個(gè)步驟，分別為：梳理類目、場(chǎng)景走查、問(wèn)題分析、方案設(shè)計(jì)、生成插件庫(kù)、驗(yàn)證開發(fā)。
具體的組件化設(shè)計(jì)升級(jí)流程我總結(jié)成了下圖：
當(dāng)團(tuán)隊(duì)搭建完成組件化之后，接下來(lái)就是成員間的使用，這一過(guò)程有業(yè)務(wù)需求產(chǎn)生組件模板、組件模版形成頁(yè)面、頁(yè)面形成頁(yè)面流程和頁(yè)面流程形成用戶體驗(yàn)。
組件庫(kù)重建之初無(wú)法一應(yīng)俱全，是需要后續(xù)設(shè)計(jì)師不斷的維護(hù)與迭代的。
關(guān)于設(shè)計(jì)輸出，現(xiàn)在很多像藍(lán)湖、zeplin、Pxcooker這種標(biāo)注軟件把設(shè)計(jì)師從手動(dòng)標(biāo)注解救出來(lái)，往往把視覺稿在藍(lán)湖一扔就完事，前端開發(fā)完界面視覺還原度還是不高。
因?yàn)闃?biāo)注軟件只能負(fù)責(zé)生成元素的尺寸、樣式，遇到復(fù)雜樣式即使你反復(fù)衡量的一些像素，開發(fā)還是會(huì)漏掉——這樣很有可能出現(xiàn)視覺災(zāi)難。
所以，一些復(fù)雜而又關(guān)鍵的頁(yè)面我建議可以貼心的做些手動(dòng)標(biāo)注，主動(dòng)告訴開發(fā)重要性和注意點(diǎn)。
我們現(xiàn)在工作中會(huì)有兩種標(biāo)注情景：
3.3.1 運(yùn)營(yíng)標(biāo)注
因?yàn)楹芏鄶?shù)據(jù)是后臺(tái)傳輸?shù)角岸?，有圖片、有文字，每個(gè)內(nèi)容都需要給運(yùn)營(yíng)設(shè)置一個(gè)上傳標(biāo)準(zhǔn)。
3.3.2 開發(fā)標(biāo)注
開發(fā)標(biāo)注是從設(shè)計(jì)稿落地成代碼的主要參考，除了藍(lán)湖提供的標(biāo)注，我們還需要寫一些重要部分設(shè)計(jì)說(shuō)明，例如：模塊區(qū)分、局部特殊設(shè)計(jì)（該內(nèi)容根據(jù)自身產(chǎn)品而確定）。
3.3.2.1 常規(guī)手動(dòng)標(biāo)注
3.3.2.2 特殊模塊/頁(yè)面劃分說(shuō)明
復(fù)雜的表單設(shè)計(jì)，是很具有代表性的復(fù)雜頁(yè)面，根據(jù)頁(yè)面的布局進(jìn)行原型化示例，幫助前端更好的搭建代碼框架。
關(guān)于切圖，切圖之前應(yīng)跟開發(fā)確定好輸出的格式和尺寸，確定應(yīng)該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質(zhì)量好，單色使時(shí)還能替換顏色；PNG則通常用在實(shí)景圖，一倍圖和二倍圖則根據(jù)實(shí)際需要進(jìn)行輸出。
如果要做分層動(dòng)畫，那我們就涉及到分層切圖，如果桌面端和手機(jī)端樣式差別較大，那我們需要和開發(fā)溝通好如何實(shí)現(xiàn)，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應(yīng)該提前跟開發(fā)溝通好。
設(shè)計(jì)-開發(fā)這個(gè)環(huán)節(jié)的協(xié)作質(zhì)量對(duì)視覺還原起著決定性的重要影響；但是，由于本身的工作性質(zhì)，我們和開發(fā)之間溝通是個(gè)棘手又麻煩的歷史遺留難題；設(shè)計(jì)師與開發(fā)雞同鴨講從而導(dǎo)致視覺還原度低下的局面，幾乎每天都在上演。
俗話說(shuō)“知己知彼百戰(zhàn)百勝”，如果設(shè)計(jì)師能夠了解一些基本的開發(fā)術(shù)語(yǔ)以及開發(fā)流程，就可以更好的打破溝通隔閡。
那網(wǎng)頁(yè)設(shè)計(jì)稿的實(shí)現(xiàn)具體是怎樣操作的呢？
步驟可以概括如下：
3.5.1 設(shè)計(jì)師的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在開發(fā)的工作流當(dāng)中反復(fù)提到的盒子模型。雖然不需要完全了解前端是怎么通過(guò)代碼來(lái)落地你的設(shè)計(jì)稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基礎(chǔ)知識(shí)，在「盒子模型」理論中，頁(yè)面中的所有元素都可以看成一個(gè)盒子，并且占據(jù)著一定的頁(yè)面空間。
一個(gè)頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)互相影響，因此掌握盒子模型需要從兩個(gè)方面來(lái)理解：一是理解單獨(dú)一個(gè)盒子的內(nèi)部結(jié)構(gòu)，二是理解多個(gè)盒子之間的相互關(guān)系。
3.5.1.2 盒子模型的組成
每個(gè)元素都看成一個(gè)盒子，盒子模型是由 content（內(nèi)容）、padding（內(nèi)邊距）、margin（外邊距）和 border（邊框）這 4 個(gè)屬性組成的；此外，在盒子模型中，還有寬度 width 和高度 height 兩大輔助性屬性。
舉一個(gè)真實(shí)界面示例，我們?cè)跒g覽器中打開「開發(fā)者模式」可以看到網(wǎng)頁(yè)的樣式代碼以及當(dāng)前界面是如何通過(guò)「盒子模型」來(lái)布局的。
前端并不能簡(jiǎn)單的像UI畫圖時(shí)一樣，隨意地拖放一個(gè)可見元素到某一個(gè)位置；他們要通過(guò)把每一個(gè)元素裝進(jìn)一個(gè)「盒子」中，再去界面中定位它所處的位置。
3.5.1.3 了解盒子模型對(duì)于UI的好處
當(dāng)你摸清了前端是如何布局實(shí)現(xiàn)你的設(shè)計(jì)稿后，你在作圖的過(guò)程中就會(huì)開始懂得站在落地的角度思考問(wèn)題，善用「盒子」，將界面中每一塊布局「盒子化」。
我舉一個(gè)示例，如果我們不使用「盒子」，當(dāng)我們?cè)谧鲆粋€(gè)卡片時(shí)，前端并不知道UI是如何定義每一個(gè)元素的間距；比如，然后將這一個(gè)間距套用在他也不知道應(yīng)該設(shè)置為多高的「盒子」當(dāng)中。
所以UI在出稿時(shí)就帶入「盒子模型」思維，合理地構(gòu)思好每一塊元素的布局，一方面可以幫助自己在輸出頁(yè)面時(shí)，布局更加合理；另一方面可以在前端落地時(shí)輔助前端準(zhǔn)確還原。
優(yōu)秀的設(shè)計(jì)離不開開發(fā)人員的落地支持，作為設(shè)計(jì)師，協(xié)同開發(fā)人員完成設(shè)計(jì)落地也是工作中重要的一環(huán)。
做好以下幾點(diǎn)，站在開發(fā)人員的角度為他們“多想一步”，高質(zhì)量的設(shè)計(jì)還原指日可待。
在進(jìn)行設(shè)計(jì)還原的時(shí)候我更希望大家把設(shè)計(jì)評(píng)審的環(huán)節(jié)重視起來(lái)，之前也有詳細(xì)的講到過(guò)《如何進(jìn)行設(shè)計(jì)評(píng)審》的，因?yàn)槲艺J(rèn)為評(píng)審對(duì)于設(shè)計(jì)還原的意義是把問(wèn)題前置化。
通過(guò)設(shè)計(jì)評(píng)審可以把改版視覺變化最大的地方和開發(fā)說(shuō)明清楚，這些改版布局框架改變都會(huì)增加開發(fā)工作量；這個(gè)環(huán)節(jié)把握好了，那基本都能實(shí)現(xiàn)出來(lái)，特殊情況除外，比如前期忽略了一些后臺(tái)數(shù)據(jù)的問(wèn)題。
有些細(xì)微的地方需要我們特別像開發(fā)說(shuō)明，也加深他們的印象，在實(shí)現(xiàn)時(shí)候就減少出錯(cuò)；像開發(fā)走讀的時(shí)候，只把關(guān)鍵核心點(diǎn)，規(guī)則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時(shí)候要輕松一些，開發(fā)也輕松一些，就比如前期基礎(chǔ)沒打好，后面深入很難。
設(shè)計(jì)師做好會(huì)議記錄（記錄問(wèn)題及解決方案，以及達(dá)成的共識(shí)），并且在會(huì)議結(jié)束后以郵件形式發(fā)送前端們，抄送產(chǎn)品和運(yùn)營(yíng)，確保會(huì)議內(nèi)容的傳達(dá)到位；讓設(shè)計(jì)師與前端工程師相關(guān)問(wèn)題達(dá)成一致，提升工作效率。
在開發(fā)緊張環(huán)節(jié)中，即使我們前面所有工作都準(zhǔn)備好了，也很難避免開發(fā)不找我溝通；這時(shí)候我們要積極回應(yīng)他們，并且和他們一起處理問(wèn)題。
比如某些難度大一點(diǎn)的頁(yè)面，開發(fā)實(shí)現(xiàn)效果和設(shè)計(jì)稿差異不?。荒敲催@時(shí)候，開發(fā)會(huì)截一張他們實(shí)現(xiàn)的效果圖給你看，這時(shí)你就要仔細(xì)去找問(wèn)題，不要一口咬定就是開發(fā)的原因；先溝通具體原因，然后找出解決辦法，如果是標(biāo)注出現(xiàn)問(wèn)題，比如標(biāo)注標(biāo)死了，頁(yè)面不靈活，適配局限性很大。
在視覺走查的時(shí)候我們可以把test環(huán)境下的頁(yè)面和設(shè)計(jì)稿拿出來(lái)對(duì)比，走查頭部、尾部等位置是否完整統(tǒng)一，按鈕樣式、反饋狀態(tài)、報(bào)錯(cuò)等樣式是否統(tǒng)一；是否有缺少的場(chǎng)景和狀態(tài)，根據(jù)任務(wù)流程對(duì)場(chǎng)景和狀態(tài)進(jìn)行排查，保證設(shè)計(jì)的完整性。
這里給大家推薦兩個(gè)視覺走查方法：
1）大家來(lái)找茬法
驗(yàn)收的時(shí)候，我們需要把開發(fā)實(shí)現(xiàn)后的效果截圖，然后再去和設(shè)計(jì)稿做對(duì)比。
我們可以直接把截圖放在設(shè)計(jì)圖上方，降低透明度，大致比對(duì)下，就知道哪里不太對(duì)，然后再具體標(biāo)注需要修改地方的參數(shù)。
2）頁(yè)面重構(gòu)走查
走查還原的時(shí)候，在Chrome瀏覽器的空白處右鍵點(diǎn)擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。
有時(shí)候一些比較細(xì)微的調(diào)整，我們可以雙擊具體的數(shù)值進(jìn)行調(diào)整，調(diào)整到自己滿意之后再給到具體的數(shù)值給開發(fā)；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾
4.3.1 確?？捎眯?/span>
設(shè)計(jì)任務(wù)流程，進(jìn)行設(shè)計(jì)走查，在移動(dòng)App端，我們所設(shè)計(jì)的應(yīng)用是建立在手指點(diǎn)擊操作的基礎(chǔ)上進(jìn)行使用的。
我們的手指不像鼠標(biāo)一樣能夠精確定位和響應(yīng)，所以我們需要在設(shè)計(jì)的過(guò)程中確保可點(diǎn)擊的區(qū)域能夠較為明顯的識(shí)別。
4.3.2 確保易讀性
文本內(nèi)容是大部分產(chǎn)品的重要組成部分，所以文本的排版是非常重要的（很多人說(shuō)中文排版不好看，那是因?yàn)槟悴粫?huì)用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。
在眾多設(shè)計(jì)原理中，格式塔原理一直被廣泛應(yīng)用，它可以很好的梳理界面信息結(jié)構(gòu)、層級(jí)關(guān)系，從而提升設(shè)計(jì)的可讀性；在自查過(guò)程中，我們可以通過(guò)格式塔原理檢驗(yàn)頁(yè)面中的元素是否符合標(biāo)準(zhǔn)。
4.3.3 反饋機(jī)制
當(dāng)用戶和產(chǎn)品需要交互時(shí)，會(huì)使用不同的模式反饋信息或結(jié)果，為用戶在各個(gè)階段提供必要、積極、及時(shí)的反饋，避免過(guò)度反饋，以免帶來(lái)不必要的打擾。
常見的三種反饋信息如下，大家可以在此基礎(chǔ)上自查是否有反饋、反饋是否傳達(dá)清晰，是否對(duì)用戶有即時(shí)的響應(yīng)等細(xì)節(jié)
4.3.4 動(dòng)效還原
動(dòng)效這塊是產(chǎn)品中比較高規(guī)格的一個(gè)存在，所以在使用的過(guò)程中一定要謹(jǐn)慎，不能隨意加入多余的動(dòng)效，導(dǎo)致在使用產(chǎn)品的過(guò)程中出現(xiàn)問(wèn)題。
在我走查的經(jīng)驗(yàn)多了以后，發(fā)現(xiàn) 最容易造成落地頁(yè)面與設(shè)計(jì)稿視覺差異的，其實(shí)就是顏色與間距還有圖標(biāo)的視覺錯(cuò)覺。不要小看這兩個(gè)細(xì)節(jié)元素，把控不好它們會(huì)讓落地頁(yè)面效果大打折扣。所以在進(jìn)行頁(yè)面還原的可以著重對(duì)比一下幾點(diǎn):
4.4.1 分割線
在驗(yàn)收的時(shí)候要特別注意分割線的問(wèn)題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個(gè)，或者說(shuō)設(shè)計(jì)師在開發(fā)前沒有特別說(shuō)明；程序員就寫成了1pt，因?yàn)閜t是1x下的單位，px是實(shí)際單位。
所以在做分割線的是，單位需要是「px」，這樣才能保證每個(gè)屏幕的分割線都是1像素。
下面主要以3個(gè)主要場(chǎng)景來(lái)分點(diǎn)解釋分割線的標(biāo)注：
4.4.2 投影
陰影作為一個(gè)重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級(jí)呈現(xiàn)給用戶。
常規(guī)投影與彌散陰影推薦使用css代碼完美實(shí)現(xiàn)；特殊情況下還需提前與開發(fā)人員溝通權(quán)衡各種方式的利弊，選擇適合項(xiàng)目產(chǎn)品的實(shí)現(xiàn)方式。
結(jié)合自己實(shí)際的工作經(jīng)驗(yàn)和與開發(fā)人員溝通的心得，實(shí)現(xiàn)彌散投影的方法，可以通過(guò)兩個(gè)方法實(shí)現(xiàn)：
1）切圖對(duì)接開發(fā)人員
雖然切圖可以解決這個(gè)問(wèn)題，但是切圖也有一些弊端，因?yàn)槊總€(gè)卡片都使用切圖的話，會(huì)使開發(fā)的包變大，可能會(huì)出現(xiàn)加載慢、閃退等情況，這些體驗(yàn)也是很糟糕了；所以在這個(gè)過(guò)程中的一些問(wèn)題務(wù)必要提前與開發(fā)人員及項(xiàng)目人員溝通好。
2）CSS代碼實(shí)現(xiàn)
常規(guī)情況下，效果都比較好，但是也會(huì)遇到一些遇到異常情況，比如不規(guī)則形狀，通常用代碼也比較復(fù)雜，這個(gè)時(shí)候需要提前與開發(fā)人員溝通切圖情況，避免后期一些問(wèn)題。
在做設(shè)計(jì)的過(guò)程中，我們需要更好地理解下游的工作，達(dá)到一個(gè)高效的溝通。
不管是哪一種方法，沒有對(duì)錯(cuò)之分，關(guān)鍵是要懂得“權(quán)衡利弊”，提前與開發(fā)人員溝通到位；只要是適合自己公司項(xiàng)目且能夠高效還原設(shè)計(jì)稿的方法，都是值得一用的。
4.4.3 文字行高
文本間距也是影響落地效果的關(guān)鍵因素之一，文本間距指的是——純文本與其他元素之間的間距。
UI出稿時(shí)應(yīng)該注意 文本行高可能導(dǎo)致前端的測(cè)量誤差，文本間距主要的原因是 sketch 與 ios 系統(tǒng)中字體的行高不同；最簡(jiǎn)單的解決方法是通過(guò)手動(dòng)調(diào)整 sketch 中字體的行高，業(yè)界常用的行高是字體 size 的1.2或者1.4倍，實(shí)際這兩個(gè)值都是夠不準(zhǔn)確的。
首先我們要理解什么是行高（line-height）。
我以 Sketch 為例，當(dāng)我們?cè)O(shè)置了一個(gè)70px的文本，Sketch 會(huì)默認(rèn)給我們?cè)O(shè)置文本為98px行高，文本的上下會(huì)包含一定的空白像素。
如果UI不設(shè)定行高規(guī)范，落地過(guò)程中就會(huì)出現(xiàn)以下問(wèn)題：
行高的解決辦法：
面對(duì)行高的問(wèn)題，我一般會(huì)在設(shè)計(jì)的過(guò)程中，輸出規(guī)范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進(jìn)行對(duì)接落地。
最簡(jiǎn)單的解決方法是通過(guò)手動(dòng)調(diào)整 sketch 中字體的行高，業(yè)界常用的行高是字體 size 的1.2或者1.4倍，實(shí)際這兩個(gè)值都是夠不準(zhǔn)確的。
最近看到了一個(gè)新的公式可以同步開發(fā)根據(jù)字號(hào)設(shè)置行高。
設(shè)字號(hào)為x，行高=x+2ceil（x/10），ceil（）的意思是向上取整數(shù) L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意這里適用于單行行高，由于多行涉及到的排版問(wèn)題不僅僅是行高帶來(lái)的，有機(jī)會(huì)的話可以單獨(dú)聊一下。
推薦DoraemonKit 是一個(gè)功能平臺(tái)，能夠讓每一個(gè) App 快速接入一些常用的或者你沒有實(shí)現(xiàn)的一些輔助開發(fā)工具、測(cè)試效率工具、視覺輔助工具；而且能夠完美在 Doraemon 面板中接入你已經(jīng)實(shí)現(xiàn)的與業(yè)務(wù)緊密耦合的一些非通有的輔助工具；并搭配滴滴的dokit平臺(tái)，讓功能得到延伸，接入方便，便于擴(kuò)展。
4.4.4 視覺重心修正
在設(shè)計(jì)上為了保證界面的視覺平衡，往往不是設(shè)計(jì)軟件直接精準(zhǔn)對(duì)齊，我們總是會(huì)通過(guò)調(diào)整間距、大小或者角度補(bǔ)齊一些負(fù)空間，讓畫面保持視覺平衡。
還有設(shè)計(jì)中通常向右箭頭來(lái)表示模塊入口，當(dāng)我們把箭頭和文字右對(duì)齊，箭頭視覺上會(huì)更外突；這時(shí)候我們會(huì)往里面縮進(jìn)1至2像素，但是切圖完給完全不知情的前端后，設(shè)計(jì)師要主動(dòng)講解一下，或者寫進(jìn)規(guī)范里。
項(xiàng)目會(huì)有些需要展示logo的地方， 有的圓形、有的長(zhǎng)方形、有的純文字，尺寸差距比較懸殊。
這種情況下，我們需要給他限制一個(gè)高度，在這個(gè)高度以內(nèi)，再根據(jù)logo本身的體量來(lái)調(diào)整圖形的大小，處理好logo的視覺平衡。
特殊場(chǎng)景在設(shè)計(jì)過(guò)程中常常會(huì)被忽略，等到在現(xiàn)實(shí)中碰到才會(huì)意識(shí)到缺失異常狀態(tài)會(huì)非常尷尬，所以大家在完成主流程設(shè)計(jì)后，一定也要考慮到特殊場(chǎng)景。
大家可以參照以下幾種場(chǎng)景對(duì)設(shè)計(jì)進(jìn)行自查優(yōu)化調(diào)整：
1）網(wǎng)絡(luò)異常
考慮到網(wǎng)絡(luò)異常情況時(shí)，通常產(chǎn)品會(huì)通過(guò)異常狀態(tài)頁(yè)面或者交互反饋來(lái)告知用戶當(dāng)前的異常狀態(tài)和如何解決問(wèn)題（解決方案引導(dǎo)、刷新、toast）。
2）服務(wù)器異常
服務(wù)器異常狀況較少出現(xiàn)，時(shí)間也較短，通常不提示具體原因，設(shè)計(jì)處理方式為在新頁(yè)面展示缺省頁(yè)，文案+插畫的形式給予用戶提示及重試引導(dǎo)。
3）空狀態(tài)
空狀態(tài)指的是頁(yè)面中無(wú)內(nèi)容，主要的幾個(gè)情況，設(shè)計(jì)師需要根據(jù)不同的場(chǎng)景給出文案+插畫的表現(xiàn)形式引導(dǎo)用戶：
4）內(nèi)容缺失
內(nèi)容缺失展示效果的考慮，設(shè)定頁(yè)面圖片缺失的占位圖。
5）加載頁(yè)面的表達(dá)方
考慮網(wǎng)絡(luò)加載或者數(shù)據(jù)加載的時(shí)候會(huì)等待幾秒鐘，通常產(chǎn)品會(huì)有一個(gè)簡(jiǎn)單頁(yè)面的占位圖形式來(lái)減輕用戶在等待時(shí)的焦慮感；可以是loading，也可以是整體頁(yè)面的刷新動(dòng)效。
設(shè)計(jì)還原的時(shí)候最后還還看一下不同機(jī)型適配的問(wèn)題。保證不同機(jī)型的界面呈現(xiàn)效果一致。
4.6.1 動(dòng)態(tài)眼光
手機(jī)適配的時(shí)候很多設(shè)計(jì)師會(huì)遇到一個(gè)問(wèn)題，就是在750*1335的屏幕上做的設(shè)計(jì)圖；但是適配到640*1136的屏幕上就有元素放不下，所以設(shè)計(jì)師在出圖時(shí)需要用動(dòng)態(tài)的眼光去考慮問(wèn)題。
知識(shí)點(diǎn)：在簡(jiǎn)單的界面中，由于本身界面的內(nèi)容比較少，確定位置就會(huì)比較難，因?yàn)橐紤]到不同的界面內(nèi)容要怎么放才能保持視覺統(tǒng)一；這個(gè)時(shí)候可以先將界面中的信息分成不同的幾個(gè)部分，先保證每個(gè)部分內(nèi)的固定內(nèi)容，再確定自適應(yīng)的內(nèi)容。
4.6.2 固定適配內(nèi)容
在簡(jiǎn)單的界面中，由于本身界面的內(nèi)容比較少，確定位置就會(huì)比較難，因?yàn)橐紤]到不同的界面內(nèi)容要怎么放才能保持視覺統(tǒng)一；這個(gè)時(shí)候可以先將界面中的信息分成不同的幾個(gè)部分，先保證每個(gè)部分內(nèi)的固定內(nèi)容，再確定自適應(yīng)的內(nèi)容。
4.6.2.1 圖標(biāo)或按鈕
4.6.2.2 搜索框
4.6.2.3 Y軸間距
一般來(lái)說(shuō)，Y軸的間如果在相近的組件里，都會(huì)是固定的，不會(huì)有變化。
4.6.2.4 圖片
像這種圖片的列表或者，十字縱橫的頭像或文字，大小都是固定的，變得會(huì)是間距或者數(shù)量，如下圖所示：
對(duì)于比較復(fù)雜的模塊，快速找到將以上所說(shuō)的固定因素和自適應(yīng)因素，除了能夠讓標(biāo)注效率大大提高之外，還能夠找到合適的適配方法，避免出現(xiàn)開發(fā)完成后才發(fā)現(xiàn)某機(jī)型適配效果不理想的情況。
4.6.3 自適配內(nèi)容
自適配內(nèi)容也給大家梳理出來(lái)。
4.6.3.1 文字彈性適配
文字流指在多行文字的情況下，文字?jǐn)?shù)量變化會(huì)影像頁(yè)面布局和元素大小，如下圖所示：
文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁(yè)邊距，中間彈性拉伸。
當(dāng)文字左右兩邊有內(nèi)容的時(shí)候，我們需要標(biāo)明文字可顯示的范圍，也就是說(shuō)它最多能顯示幾個(gè)字——這種方式可以做到較好的適配，也是做快速常用的適配方法。
4.6.3.2 banner
這里說(shuō)的圖片是指banner或者feed流里的圖片，適配的方法大多都是自適應(yīng)，界面中的元素間距和數(shù)量不變，元素尺寸進(jìn)行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：
對(duì)于比較復(fù)雜的模塊，快速找到將以上所說(shuō)的固定因素和自適應(yīng)因素，除了能夠讓標(biāo)注效率大大提高之外，還能夠找到合適的適配方法，避免出現(xiàn)開發(fā)完成后才發(fā)現(xiàn)某機(jī)型適配效果不理想的情況。
假設(shè)視覺還原上真的出了問(wèn)題，首先要尋找原因，是自己沒做到位？還是對(duì)方?jīng)]理解你的想法？
我感覺可以按照以下幾個(gè)方法去做：
設(shè)計(jì)團(tuán)隊(duì)內(nèi)部先弄明白改版的意義，畫好標(biāo)注色值、像素的示意圖和文檔，做好產(chǎn)品原型等任何能讓對(duì)方不需糾結(jié)，直接可以上手的工作。
做好前期的準(zhǔn)備工作，盡可能的多做思考，完善設(shè)計(jì)稿；尤其是邊界情況，把自己的問(wèn)題留給自己，這樣可能產(chǎn)生的設(shè)計(jì)還原問(wèn)題就會(huì)大幅減少。
多向開發(fā)同學(xué)請(qǐng)教，即便遇到技術(shù)確實(shí)難以實(shí)現(xiàn)的情況，不要逃避或者過(guò)于固執(zhí)，了解具體原因，不斷累積自己的技術(shù)知識(shí)；自己的專業(yè)、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。
這是一個(gè)比較復(fù)雜而且需要長(zhǎng)期努力的話題，每個(gè)公司都會(huì)有其實(shí)際情況存在，團(tuán)隊(duì)越大，情況越復(fù)雜。
設(shè)計(jì)師團(tuán)隊(duì)或者個(gè)人的話語(yǔ)權(quán)如果很弱，確實(shí)會(huì)面對(duì)十分被動(dòng)的處境；首先需要說(shuō)明的是，話語(yǔ)權(quán)是贏得的，而不是賦予的；想要改善被動(dòng)的局面，要認(rèn)清所處的環(huán)境，問(wèn)題的癥結(jié)，調(diào)整定位，并付出努力；只有證明了設(shè)計(jì)確實(shí)能夠解決問(wèn)題，甚至驅(qū)動(dòng)商業(yè)價(jià)值，才會(huì)逐步提升話語(yǔ)權(quán)。
完成一項(xiàng)任務(wù)時(shí)最重要的是團(tuán)隊(duì)的思維模式是否統(tǒng)一，設(shè)計(jì)師在乎用戶體驗(yàn)，工程師只在乎開發(fā)成本，那問(wèn)題沒辦法達(dá)成一致是很正常的。
想要讓大家認(rèn)同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產(chǎn)品、聊體驗(yàn)、聊感受，慢慢給他們灌輸體驗(yàn)的重要性。
只要你的話題有趣，人有趣，沒有人會(huì)拒絕跟你聊；時(shí)間長(zhǎng)了，整個(gè)團(tuán)隊(duì)的思路就會(huì)有所轉(zhuǎn)變。
設(shè)計(jì)師自己可以先按優(yōu)先級(jí)去排布還原順序，看這1像素是否對(duì)當(dāng)前產(chǎn)品重要性。
在搞清楚產(chǎn)品進(jìn)度、優(yōu)先級(jí)的情況下，記錄所有還原問(wèn)題，自己標(biāo)記優(yōu)先級(jí)，整理完畢后一次性給他，再跟程序員解決方案和時(shí)間；也可以與開發(fā)同學(xué)共同摸索一套雙方都能接受的清單模式，標(biāo)明問(wèn)題，修改建議，重要層級(jí)，根據(jù)實(shí)際情況詳細(xì)說(shuō)明或者簡(jiǎn)要說(shuō)明，能夠當(dāng)面溝通更佳。
良好的團(tuán)隊(duì)合作氛圍是有效的潤(rùn)滑劑；好的合作關(guān)系如同一條戰(zhàn)壕里的戰(zhàn)友，哪怕多年后回想起來(lái)，也應(yīng)該是一起沖鋒陷陣的光輝歲月。
設(shè)計(jì)師應(yīng)該認(rèn)識(shí)到自己在整個(gè)項(xiàng)目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責(zé)任或者互相推諉，逐步打造自己的聲譽(yù)和氣場(chǎng)。
一個(gè)優(yōu)質(zhì)的項(xiàng)目落地是各部門協(xié)同合作的成果，就像我們玩游戲，后期高質(zhì)量的輸出也需要前期優(yōu)秀的輔助來(lái)打鋪墊。
在“協(xié)同作戰(zhàn)”的基礎(chǔ)上，靈活運(yùn)用規(guī)范、標(biāo)注和走查的方法來(lái)主動(dòng)推動(dòng)項(xiàng)目的進(jìn)行；不僅可以讓設(shè)計(jì)稿得到最大程度的還原，也可以提升我們協(xié)作能力和對(duì)環(huán)節(jié)的把控能力。
任何問(wèn)題只要多交流，會(huì)避免很多阻塞情況；出于設(shè)計(jì)師的角度當(dāng)然都希望每一張視覺稿得到100%的還原；因?yàn)橛脩糁豢茨闵暇€效果，但是往往排期緊張需要一些取舍，我希望能在有限的時(shí)間內(nèi)做到最好。
在后期視覺驗(yàn)收的時(shí)候，我們可以換位思考，把自己當(dāng)做程序員，站在他們的角度去思考問(wèn)題；怎么樣的驗(yàn)收方式會(huì)更方便開發(fā)修改，減少重復(fù)返工的次數(shù)，情愿驗(yàn)收標(biāo)注的時(shí)候多花10分鐘，也要把修改意見寫詳細(xì)，幫開發(fā)節(jié)省時(shí)間，反過(guò)來(lái)也幫我們自己減少了二次驗(yàn)收的成本。
文章來(lái)源：人人都是產(chǎn)品經(jīng)理 作者：郝小七
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
產(chǎn)品設(shè)計(jì)的過(guò)程雖然需要天馬行空，但是最終也要落地。設(shè)計(jì)是為人服務(wù)的，因此也要充分的考慮到“人性”。下面，本文作者為我們分享了如何通過(guò)設(shè)計(jì)讓用戶體驗(yàn)到自由、尊嚴(yán)和幸福。
人的所有體驗(yàn)上的感受，最終都可以追溯到人對(duì)自由的渴望，以及在自由基礎(chǔ)上對(duì)尊嚴(yán)和幸福的追求，這些都指向人性的深處，所以不了解人性就不可能做出好的體驗(yàn)設(shè)計(jì)。
下面我就分別來(lái)說(shuō)一下如何通過(guò)設(shè)計(jì)來(lái)讓人感受到自由的體驗(yàn)，尊嚴(yán)的體驗(yàn)和幸福的體驗(yàn)。
提到體驗(yàn)其實(shí)暗指這是人類專屬的一種感受，它直指人的本質(zhì)所向即自由，這也是人與動(dòng)物的一種本質(zhì)區(qū)別，自由是一個(gè)純粹的哲學(xué)概念，它無(wú)法被直接明確定義解釋，但我們可以從鄧曉芒先生提出的自由三個(gè)特性，來(lái)對(duì)自由有個(gè)更深入認(rèn)知。
人對(duì)自由的追求就是人的根本人性所在，所有精神追求最終都可以追溯和被自由所解釋。體驗(yàn)到自由的時(shí)候，人就愉快，體驗(yàn)到不自由的時(shí)候，人就難受。體驗(yàn)中的一切感受，最終都可以還原為對(duì)自由不同程度的體驗(yàn)。
比如哈雷·曼寧等人將客戶對(duì)體驗(yàn)的定位分為 3 個(gè)不同的層級(jí)，稱之為“客戶體驗(yàn)金字塔”（見下圖，自繪）。由低往高分別是∶需求滿足，容易性，愉悅性。其核心體驗(yàn)都可以歸結(jié)為不同類型的自由。
客戶的需求得到滿足，其目的得到實(shí)現(xiàn)，這是感受到動(dòng)機(jī)的自由（不受需求的束縛了，可以設(shè)定目標(biāo)、實(shí)現(xiàn)目標(biāo)）;客戶感到容易，無(wú)需大費(fèi)周章，這是感受到行為的自由（操作自由，時(shí)間自由的掌控）; 客戶感到愉悅、感到滿意，這是感受到精神的自由（內(nèi)心情感得到滿足）。
自由的力量也可以在日常生活中得到發(fā)揮和應(yīng)用，比如現(xiàn)在家長(zhǎng)們苦惱的小孩玩手機(jī)游戲沉迷問(wèn)題，你可以給他設(shè)定每日強(qiáng)制必須完成的游戲目標(biāo)，比如每天必須通10關(guān)獲得10個(gè)游戲道具和一萬(wàn)個(gè)金幣，不完成不許做其它任何事情，孩子就會(huì)對(duì)游戲越來(lái)越厭煩，背后的原因就是他失去了目標(biāo)自由和行動(dòng)自由，感受不到自由的游戲帶來(lái)的愉悅了。
還有為什么孩子不愛閱讀收錄進(jìn)語(yǔ)文課本里面的文章？
那是因?yàn)橐话阏Z(yǔ)文課本的文章都有課后題要求必須完成，還會(huì)強(qiáng)制要求背誦某某段落，孩子在翻開課本學(xué)習(xí)這些文章時(shí)，就已經(jīng)意識(shí)到接下來(lái)將面對(duì)枯燥乏味的課后題，這影響了他對(duì)文章的興趣，他感受不到自由而只有限制和約束。
如果你領(lǐng)他到一個(gè)書店，告訴他說(shuō)：“我們今天需要完成購(gòu)買一本文學(xué)類書并帶回去讀完，但選哪一本，如何讀完你自己來(lái)定，你現(xiàn)在去翻看能讓你讀進(jìn)去的書吧”。我想這個(gè)孩子因?yàn)楂@得了動(dòng)機(jī)自由和精神自由，自主選出了能給自己帶來(lái)精神愉悅的文字，他是會(huì)將此書讀完讀透的。
體驗(yàn)到自由，就是體驗(yàn)到他的自由意志沒有受到外在的限制而只受到自己的限制，這是體驗(yàn)的最基本層面。
著名交互設(shè)計(jì)專家理查德·布坎南教授指出∶“所有設(shè)計(jì)背后的理念都是人類的尊嚴(yán)。交互設(shè)計(jì)的原料是我們服務(wù)大眾的‘目的和渴望’，我們賦予其形式和體驗(yàn)。我們的設(shè)計(jì)都是為人類的尊嚴(yán)而設(shè)計(jì)”。
按照他的觀點(diǎn)，那做設(shè)計(jì)的人就很有必要先搞清楚什么是人類的尊嚴(yán)？為人類尊嚴(yán)而設(shè)計(jì)從何做起？
讓顧客體驗(yàn)尊嚴(yán)，并非一件容易之事。并不是對(duì)顧客有歧視、謾罵等侮辱性的行為或語(yǔ)言才算損害顧客尊嚴(yán)，需要對(duì)尊嚴(yán)有深入的理解。
德國(guó)哲學(xué)家羅伯特·施佩曼（Robert Spaemann）這樣說(shuō)∶“只要人活著，就其種差來(lái)說(shuō)，我們需能夠且必須指望他同意向善。然而這種同意向善只可能發(fā)生在自由之中。不僅僅這種對(duì)同意向善的指望，而且對(duì)同意向善能夠得以發(fā)生的自由空間的允諾，都是對(duì)人的尊嚴(yán)的敬重的奠基性行為。”
這段話可以理解為我們必須指望人們同意向善，而且要允許人們自由地同意向善。既不假定他會(huì)做惡，也不能強(qiáng)迫他同意行善。允許人自由，相信人會(huì)同意行善，是尊敬人的尊嚴(yán)的最起碼行為。
在我們的文化中一直有“你不仁，我不義”，“以其人之道反治其人之身”等一些言語(yǔ)在一直流傳，這些都是以人的表現(xiàn)來(lái)決定我們尊重其尊嚴(yán)的程度，即對(duì)人的尊嚴(yán)采取一種有條件的尊敬，而不是無(wú)條件的尊敬。
其實(shí)只要是人，都要尊敬其尊嚴(yán)。在這種文化背景下讓人們真正去理解尊嚴(yán)并不容易，但如果你真正想創(chuàng)造優(yōu)秀的用戶體驗(yàn)，這一關(guān)必須要過(guò)，并且在語(yǔ)言和行為動(dòng)作兩個(gè)方面做出相應(yīng)的行動(dòng)。
先舉一個(gè)生活中常見的例子，當(dāng)你逛街進(jìn)入到一些店里后，會(huì)不會(huì)經(jīng)常見到如下提示語(yǔ)“請(qǐng)不要隨意觸摸商品”，“店內(nèi)設(shè)有探頭，請(qǐng)自重”，“錢物當(dāng)面點(diǎn)清，離店概不負(fù)責(zé)”，諸如此類的語(yǔ)言。
這就是在字面上尊重，在內(nèi)容上卻把受眾設(shè)定為已犯錯(cuò)誤狀態(tài)，不尊重你的顧客的一種做法。這么做與懂不懂語(yǔ)言學(xué)無(wú)關(guān)，而與對(duì)人性的了解、對(duì)人的尊嚴(yán)的理解密切相關(guān)。
我們用什么樣的語(yǔ)言和客戶打交道，我們就在客戶心中創(chuàng)造什么樣的形象。
20世紀(jì)80年代中國(guó)內(nèi)地企業(yè)開始導(dǎo)入CIS設(shè)計(jì)（企業(yè)識(shí)別系統(tǒng)設(shè)計(jì)）。
CIS系統(tǒng)包括 MI（理念識(shí)別）、BI（行為識(shí)別）、VI（視覺識(shí)別），其中理念識(shí)別就是樹立企業(yè)的價(jià)值觀，行為識(shí)別包含員工接待客戶時(shí)應(yīng)遵守的行為規(guī)范，員工在按照這些語(yǔ)言和行為的外在規(guī)范來(lái)對(duì)待客戶的過(guò)程中，可以逐步提升內(nèi)在的職業(yè)道德意識(shí)。
視覺識(shí)別最為人熟知，VI是一個(gè)嚴(yán)密而完整的符號(hào)系統(tǒng)，它的特點(diǎn)在于展示清晰的“視覺力”結(jié)構(gòu)，從而準(zhǔn)確地傳達(dá)獨(dú)特的企業(yè)形象，通過(guò)差異性面貌的展現(xiàn)，從而達(dá)成企業(yè)認(rèn)識(shí)、識(shí)別的目的。
當(dāng)時(shí)企業(yè)把CIS視為營(yíng)銷利器，開始在戰(zhàn)略層面思考企業(yè)和員工在客戶心中的形象問(wèn)題了。這就為今天的“以用戶為中心”、注重“用戶體驗(yàn)”、強(qiáng)調(diào)“用戶思維”這些理念的實(shí)行奠定了基礎(chǔ)。
比起早期CIS系統(tǒng)中行為準(zhǔn)則的口號(hào)化和粗放型，現(xiàn)在的企業(yè)準(zhǔn)則更加關(guān)注體驗(yàn)細(xì)節(jié)和可操作性，在用語(yǔ)上達(dá)到了”語(yǔ)言工程設(shè)計(jì)”的層次，在行為上達(dá)到了”行為設(shè)計(jì)”的層次。其核心都指向企業(yè)的道德水平的提升，從而為客戶體驗(yàn)尊嚴(yán)開辟了切實(shí)的路徑。
需特別強(qiáng)調(diào)一下，雖然我們尊敬人尊嚴(yán)所使用的語(yǔ)言和動(dòng)作做不到完全的真誠(chéng)，總是包含著虛偽和假象，但使用這些語(yǔ)言和動(dòng)作總比不使用它們要好，總比損害人的尊嚴(yán)的語(yǔ)言和動(dòng)作要好。
正是在包含著虛偽和假象的真誠(chéng)中，我們才有可能逐步減少虛偽和假象，朝著純粹的真誠(chéng)不斷靠近。
語(yǔ)言和動(dòng)作是對(duì)心靈的訓(xùn)練，當(dāng)我們能持續(xù)地說(shuō)出善良的話、持續(xù)地做出善良的動(dòng)作，我們的心靈也就離真誠(chéng)不遠(yuǎn)了。切不可因?yàn)樽霾坏酵耆恼嬲\(chéng)，就在語(yǔ)言和行為上對(duì)自己降低要求甚至沒要求。
幸福這個(gè)話題在生活中一直被人們反復(fù)提及，它的價(jià)值意義也是毋庸置疑的，幸福的感覺是讓人感受人的本質(zhì)力量的重要確證，所以每個(gè)人都需要也該擁有幸福感。關(guān)于幸福和價(jià)值，經(jīng)濟(jì)學(xué)家張維迎曾有如下論述：
“人行動(dòng)的最終目的是什么呢？簡(jiǎn)單說(shuō)，就是生活得幸福！幸福是人行動(dòng)的最終目的，意味著其它目的都只是實(shí)現(xiàn)幸福的手段，而幸福本身不能是任何其它目的的手段，為了其它目的而犧牲幸福都是非理性的。因?yàn)槿说淖罱K目的是幸福，因此任何物品和行動(dòng)的價(jià)值，最終都來(lái)自它們對(duì)幸福這個(gè)終極目的所做的貢獻(xiàn)。如果一件物品或一個(gè)行動(dòng)能增加人的幸福感，我們就說(shuō)它是有價(jià)值的?！?
其實(shí)幸福不僅是經(jīng)濟(jì)學(xué)會(huì)關(guān)注的問(wèn)題，更是設(shè)計(jì)學(xué)科所要關(guān)注的問(wèn)題。只不過(guò)商家通常是把產(chǎn)品、服務(wù)當(dāng)作使用戶幸福的基礎(chǔ)手段，設(shè)計(jì)成為手段的手段，而不了解真正創(chuàng)造幸福的方法。只有在深入了解人性的前提下去做好設(shè)計(jì)，幸福感才會(huì)提供給到用戶。
幸福只能是建立在人人幸福的基礎(chǔ)上。這個(gè)人人，包括自己，也包括別人。
這對(duì)我們的固有觀念是一個(gè)挑戰(zhàn)，傳統(tǒng)觀念中，我們雖然反對(duì)”把自己的幸福建立在別人痛苦的基礎(chǔ)上”，但卻肯定和鼓勵(lì)把自己的幸福建立在自己痛苦的基礎(chǔ)上。我們文化中重視“痛苦”的價(jià)值。
比如“梅花香自苦寒來(lái)”，“學(xué)海無(wú)涯苦作舟”，“吃得苦中苦方為人上人”“要想人前顯貴，就得背后受罪”等等，一直在強(qiáng)調(diào)“苦盡甘來(lái)”的價(jià)值理念。
這種價(jià)值觀看起來(lái)很勵(lì)志，但實(shí)際上苦只是某事事物的副產(chǎn)品，苦本身完全沒有價(jià)值，苦不可能轉(zhuǎn)化為人的內(nèi)在能量，這些錯(cuò)誤的認(rèn)知該被今天人們摒棄，苦就更不是通往幸福體驗(yàn)的正確方向。
因?yàn)槭紫刃腋]到來(lái)之前，人所受的苦就是直接的痛苦體驗(yàn)，只能夠損害人的健康和情緒，這是明顯的不幸福感覺；其次，如果認(rèn)為幸福必須是通過(guò)痛苦換來(lái)，那么不用自己的痛苦去換，而用別人的痛苦換，則是最有利的方式了，這就自然地引向“把自己的幸福建立在自己痛苦的基礎(chǔ)上”這條路。
而這條路只會(huì)導(dǎo)致更多的不幸，而不是幸福。最核心的是“苦”不是將來(lái)能換取“樂”的債權(quán)，更不是修行資源，尤其是對(duì)心智不成熟的人更不是好東西，苦是對(duì)人的傷害。
我們應(yīng)該盡可能別讓人吃苦，記住，只有成功能帶來(lái)更大的成功！這是心理學(xué)上已被證實(shí)的勝利者效應(yīng)。
其實(shí)我們只能用幸福交換幸福。這種交換，實(shí)際上是激發(fā)和共鳴，交換的雙方都不會(huì)減少幸福，而是確證了彼此的幸福，是對(duì)幸福體驗(yàn)的共鳴。以現(xiàn)在的幸福，激發(fā)起未來(lái)的幸福；以自己幸福，激發(fā)起別人的幸福。
這就意味著，對(duì)客戶體驗(yàn)來(lái)說(shuō)，要想使用戶體驗(yàn)到幸福，產(chǎn)品和服務(wù)提供商也首先要有幸福感。不能認(rèn)為“辛苦我一個(gè)，幸福千萬(wàn)人”，而要樹立“我是幸福的，也要把幸福傳遞給千萬(wàn)人”的觀念。
設(shè)計(jì)師、提供商、企業(yè)員工要以自己的幸福感所創(chuàng)造的幸福氛圍作為必要條件，激起用戶、消費(fèi)者、客戶的幸福共鳴，這就是“真正讓人體驗(yàn)幸?！钡姆ㄩT。
理解這一方法的企業(yè)可以說(shuō)是少之又少，大部分企業(yè)都走在誤區(qū)，它們可以做到全心全意為客戶服務(wù)，但認(rèn)為只有犧牲員工的幸福感，才能促進(jìn)客戶的幸福感，正如當(dāng)下很多公司員工過(guò)勞問(wèn)題嚴(yán)重。
這使它們從根本上就不可能為用戶創(chuàng)造出幸福體驗(yàn)，核心是因?yàn)槠髽I(yè)的文化和價(jià)值觀出了問(wèn)題。
我們一起看一個(gè)這方面做的優(yōu)秀的例子——迪士尼樂園，迪士尼自身的使命，確立的就是使人們快樂。
一旦你來(lái)到迪士尼，或者走進(jìn)其中的一個(gè)場(chǎng)館和設(shè)施，你就能觀察和感受迪士尼樂園里面散發(fā)出來(lái)幸福的氣氛。這依托于企業(yè)內(nèi)部正確的態(tài)度，配以培訓(xùn)和鼓勵(lì)的支持，然后再結(jié)合對(duì)這種氣氛價(jià)值足夠的重視。
同時(shí)也離不開塑造迪斯尼每一名工作人員的幸福感，由此才營(yíng)造出的幸福氛圍。營(yíng)造幸福氛圍的承諾就是他們創(chuàng)造幸福體驗(yàn)的秘訣，即使所有人現(xiàn)在都知道了這個(gè)秘訣，很多企業(yè)也是不可能做到的。
原因很簡(jiǎn)單就是大多數(shù)企業(yè)主張的企業(yè)價(jià)值觀里就根本不涉及幸福的價(jià)值。要想做到讓企業(yè)的顧客用戶體驗(yàn)到幸福，就要對(duì)企業(yè)的價(jià)值觀進(jìn)行重新設(shè)計(jì)，確保企業(yè)的價(jià)值主張里要包含“基于幸福的價(jià)值”的觀點(diǎn)。
首先要清楚對(duì)幸福的追求是普遍的，所有業(yè)務(wù)活動(dòng)的本質(zhì)基礎(chǔ)是使每一個(gè)個(gè)體幸福。并且要保障業(yè)務(wù)活動(dòng)中交互的雙方都是幸福的，業(yè)務(wù)中的一方不幸福，另一也不會(huì)幸福。
業(yè)務(wù)活動(dòng)的最終目標(biāo)是為了改善業(yè)務(wù)活動(dòng)中所有相關(guān)者（顧客、雇員和股東）的幸福，每一個(gè)體的幸福都如此重要，應(yīng)當(dāng)把幸福作為組織價(jià)值觀的核心概念。這樣才能保障你的業(yè)務(wù)會(huì)給客戶帶來(lái)真正的幸福體驗(yàn)和好口碑。
偉大哲學(xué)家馬克思曾說(shuō)過(guò)∶“人的本質(zhì)客觀展開的豐富性、主體感性的產(chǎn)生與發(fā)展，依靠著有音樂感的耳朵、能感受形式美的眼睛，那些能成為人的享受的感覺，即確證自己是人的本質(zhì)力量的感覺。”
人體驗(yàn)幸福，從哲學(xué)上說(shuō)，就是在體驗(yàn)人的本質(zhì)上的豐富性。在體驗(yàn)的交互中，人的感覺不斷發(fā)展和豐富，人的本質(zhì)力量不斷地得到確證，進(jìn)而感覺到人所應(yīng)有也配有的幸福感。
要想真正做出好的體驗(yàn)設(shè)計(jì)，必須看見和重視人性：對(duì)人自由的追求是人性的根本所在；對(duì)人始終都要以恰當(dāng)?shù)恼Z(yǔ)言和行為使其體驗(yàn)到尊嚴(yán)；將幸福建立在人人幸福的基礎(chǔ)上。
關(guān)注和尊重人性是做好當(dāng)下一切設(shè)計(jì)的基礎(chǔ)和根本，因?yàn)轶w驗(yàn)經(jīng)濟(jì)時(shí)代的設(shè)計(jì)都要以人為本，服務(wù)于人。
文章來(lái)源：人人都是產(chǎn)品經(jīng)理 作者：洪灃
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
信息有各種形式，圖、文、視頻、音頻等，而承載信息的形式也多種多樣。
本文意將信息容器進(jìn)行整理歸納，以總結(jié)出一些經(jīng)驗(yàn)規(guī)律。
信息容器是承載信息的載體，位于內(nèi)容層。要理解信息容器的概念，首先要理解界面中的層級(jí)關(guān)系。一個(gè)界面除了豎直方向和水平方向維度，還有縱深維度。
從底層（遠(yuǎn)離用戶）到頂層（靠近用戶），基本上可以分為以下幾層：
背景層
信息層
全局操作層（各種常駐于屏幕的bar、懸浮按鈕等）
浮出層（模態(tài)類型的浮出層還需要有蒙版進(jìn)行隔斷）
本文要討論的“信息容器”，指的是信息層上，裝載信息的載體。信息的類型多種多樣，可以是文字、圖片、視頻、各種操作控件等。
常見的信息容器主要有2大類：列表和卡片。
在整理案例的時(shí)候，我不禁產(chǎn)生了一個(gè)疑問(wèn)，到底什么是列表，什么是卡片？如何界定和區(qū)分兩者？這個(gè)問(wèn)題乍一聽有點(diǎn)無(wú)厘頭，列表不就是列表嗎，多個(gè)布局一致的狹長(zhǎng)單元組合在一起，就形成了列表。那么什么是卡片呢？和屏幕兩側(cè)保持一定間距，帶圓角的就是卡片嗎？
我們不妨先看看下圖案例：
為什么類似的布局形式，上圖中，圖1給人感覺是列表，圖2給人感覺是卡片，圖3既像列表又像卡片？
從內(nèi)容層面來(lái)說(shuō)，包含的信息類型有：文字、圖標(biāo)/圖片、按鈕。幾乎沒有太大區(qū)別。
是什么導(dǎo)致我們觀感上的不同呢？
電商案例也許可以給出答案。
從電商產(chǎn)品的商品列表頁(yè)中可以看到，用戶可以自主選擇兩種不同的商品展示模式：列表模式和卡片模式。
這兩種模式幾乎可以對(duì)應(yīng)“列表”和“卡片”兩種信息容器樣式。完全一致的信息量：主圖、標(biāo)題信息、價(jià)格信息、輔助信息，相似的展示效率（一屏展示約4.5個(gè)商品），不同的信息容器展示形式給人不同的感覺。
單純從信息層面或者視覺層面都不能界定列表和卡片，如果多維度疊加限定又太繁瑣，因此本文給出的列表和卡片直接的區(qū)別界定是：可以自主定位關(guān)鍵線索，規(guī)劃視覺瀏覽動(dòng)線。如果視覺瀏覽大方向是豎直的，那么就歸入列表范疇，瀏覽動(dòng)線不是豎直而是折線的，都算在卡片范疇。
除了上面說(shuō)的，最常見的兩類信息容器：列表和卡片之外，還有另外兩種形式，分別是：無(wú)容器和復(fù)合容器。
這些容器具體有哪些特點(diǎn)，我們一一來(lái)看。
列表的定義：將結(jié)構(gòu)一致的信息單元在豎直方向上鋪陳下去，形成的信息集合。
不同場(chǎng)景要呈現(xiàn)的信息側(cè)重不同。
舉例幾種常見的列表形式：
用戶/消息列表
圖文列表
功能列表
“卡片型”列表
用戶/消息列表的內(nèi)容結(jié)構(gòu)很清晰，頭像+身份+內(nèi)容提要+輔助信息。
圖片天然地比文字更具有吸引力，視覺上的優(yōu)先級(jí)排序是頭像＞身份＞內(nèi)容提要＞輔助信息。
當(dāng)然用戶可以很方便地選擇關(guān)注的對(duì)象是圖片還是文字，這體現(xiàn)了列表的優(yōu)越性，瀏覽動(dòng)線豎直，可以方便用戶根據(jù)自己想要的索引快速定位。
這里值得討論的是頭像用方形還是圓形的問(wèn)題，相信大家都想到過(guò)這個(gè)問(wèn)題，同樣是社交產(chǎn)品，qq是圓頭，微信是方頭，這里邊有什么原因呢？
本文嘗試分析一下，僅是個(gè)人意見，歡迎討論。
按照理論，圓頭親切的形狀感知更加適合輕松基調(diào)的產(chǎn)品，方頭嚴(yán)謹(jǐn)?shù)男螤罡兄舆m合嚴(yán)肅基調(diào)的產(chǎn)品。這解釋了電商類型產(chǎn)品（淘寶、京東）的信息通知一般都是圓頭的，匹配輕松愉悅的網(wǎng)購(gòu)體驗(yàn)，而金融類產(chǎn)品（支付寶）多是方頭。對(duì)于同是熟人社交類產(chǎn)品的微信和qq來(lái)說(shuō)，qq用戶層年齡偏低，屬性相對(duì)更加活躍，更加輕松的圓頭可能更適合此類用戶。
以iOS為例，當(dāng)用戶向左滑動(dòng)列表時(shí)，呼出針對(duì)該列表單元的操作。具體列表對(duì)應(yīng)具體操作，操作項(xiàng)數(shù)量不同。
方案A：
優(yōu)點(diǎn)：操作底板寬度適應(yīng)文案，不會(huì)出現(xiàn)空間局促的現(xiàn)象。
缺點(diǎn)：當(dāng)文案字段長(zhǎng)時(shí)，列表被推出屏幕外的內(nèi)容較多，當(dāng)用戶操作分心時(shí)，可能會(huì)忘記正在操作的對(duì)象，雖然這種情況極少發(fā)生。
方案B：
優(yōu)點(diǎn)：操作底板固定，文案折行規(guī)則明確，既不會(huì)造空間擁擠，被擠出屏幕外的列表區(qū)域可控。
方案C：
優(yōu)點(diǎn)：搭配圖標(biāo)，視覺更豐富。
缺點(diǎn)：圖標(biāo)占據(jù)了一定高度，導(dǎo)致文案無(wú)法折行，列表被推出屏幕外的內(nèi)容較多，與方案A類似。
綜上，個(gè)人認(rèn)為方案B是最合理的，對(duì)于文案長(zhǎng)度的寬容度高，即便文案較長(zhǎng)，也可以保證視覺和諧，并保留較多列表內(nèi)容。
在用色策略上，使用的是為大眾所接受的“語(yǔ)義色”，一些具體的顏色在長(zhǎng)期經(jīng)驗(yàn)積累中形成了固定的語(yǔ)義。
當(dāng)用戶觸發(fā)了帶有一定破壞性的操作時(shí)，需要用戶進(jìn)行二次確認(rèn)。
并不是所有情況都需要二次確認(rèn)，二次確認(rèn)的樣式也有多種。
同樣都是模態(tài)視圖，要表達(dá)的信息也相似，都是要求用戶進(jìn)行選擇，為什么有些產(chǎn)品選擇將對(duì)話框居中，有些產(chǎn)品選擇將對(duì)話框放在底部？這里涉及到關(guān)于模態(tài)視圖的相關(guān)知識(shí)點(diǎn)，本篇文章旨在討論信息層面的內(nèi)容，模態(tài)視圖涉及到了浮出層的內(nèi)容，將在下篇文章中進(jìn)行詳細(xì)探討。本篇文章不做過(guò)多延展。
信息流產(chǎn)品一般是由圖片+重點(diǎn)文案+標(biāo)簽（可有可無(wú)）構(gòu)成。
不同性質(zhì)的產(chǎn)品想要突出的重點(diǎn)不同，根據(jù)內(nèi)容的重要性權(quán)重來(lái)分配視覺占比。
從上方幾個(gè)例子中我們可以看到：
在圖文比例從左到右依次提升；
圖文布局案例1-3使用了左文右圖的方式，案例4-7使用了左圖右文的方式。
搞清楚如何圖文布局和設(shè)置圖文比例，就基本解決了資訊流頁(yè)面最關(guān)鍵的問(wèn)題。
資訊列表或稱feed流，主要根據(jù)用戶喜好定向推送內(nèi)容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息，用戶主動(dòng)反饋的信息精度更高，用戶不惜花費(fèi)更多操作成本來(lái)提示產(chǎn)品，對(duì)內(nèi)容不感興趣。
從視覺上說(shuō)：
1、提交反饋的入口（小而淺的icon）都不明顯，有些產(chǎn)品用“更多”來(lái)提示用戶，有些產(chǎn)品用更加負(fù)面的“關(guān)閉”來(lái)提示用戶。當(dāng)用戶對(duì)內(nèi)容產(chǎn)生較為強(qiáng)烈的反感時(shí)，才會(huì)注意到屏蔽入口。常規(guī)瀏覽時(shí)，該圖標(biāo)不會(huì)影響用戶注意力。
2、反饋形式采用模態(tài)對(duì)話框，用戶需要選擇具體操作，是屏蔽內(nèi)容或作者、還是舉報(bào)或不感興趣。
3、對(duì)話框是否有指向性：從表意明確的角度上來(lái)說(shuō)，帶有箭頭的氣泡更有利于用戶定位對(duì)象。
從交互上說(shuō)：
反饋入口熱區(qū)較小，容易誤觸，大多數(shù)情況下，用戶不會(huì)注意和點(diǎn)擊該圖標(biāo)，用戶是以瀏覽為主要行為。
列表索引一般還是定位文字為主要形式，不同用戶的認(rèn)知水平不同，圖標(biāo)表意始終是一大難點(diǎn)，多用為輔助記憶或單純提升視覺美觀。圖標(biāo)雖然是體現(xiàn)設(shè)計(jì)風(fēng)格的重點(diǎn)，但是在具體情境下，如設(shè)置頁(yè)，用戶更加在意快速找到自己要找的內(nèi)容，多度的圖標(biāo)樣式，實(shí)際上會(huì)折損用戶的檢索效率。
一般功能頁(yè)面或放置許多功能，常常會(huì)超過(guò)十幾項(xiàng)，這種情境下，檢索效率低下是一個(gè)痛點(diǎn)。
如何提高檢索效率？—— 分組
分組給用戶提供了認(rèn)知線索，根據(jù)格式塔原則，用戶總是傾向于把距離近的、樣式統(tǒng)一的元素歸位同類。
毫無(wú)分組顯然對(duì)于檢索是不利的，用戶需要逐一瀏覽，該情況適用于列表項(xiàng)無(wú)法分組時(shí)，如果有分組條件，務(wù)必分組，幫用戶節(jié)約篩選成本。
UI界面中，列表的分割方式常見的有以下3種：
線條分割
塊面分割
間距分割
在我們的固有觀念里，大圓角，不通欄，有投影的形象就是卡片。
這種樣式也越來(lái)越盛行，許多產(chǎn)品嘗試將列表也用“卡片化”進(jìn)行包裝。
雖然是相當(dāng)細(xì)節(jié)的點(diǎn)，但是精細(xì)化處理之后的結(jié)果就立刻會(huì)與批量化處理的結(jié)果拉開差距。
產(chǎn)品級(jí)的風(fēng)格統(tǒng)一來(lái)源于點(diǎn)滴細(xì)節(jié)。
卡片的類型繁多：?jiǎn)瘟写罂ㄆ?、泳道、?nèi)容流（兩列網(wǎng)格、瀑布流）、宮格
從內(nèi)容展示效率上來(lái)講，單張大卡片就占據(jù)占據(jù)屏幕（劉海屏）超出一半的高度，用戶需要不斷滑動(dòng)屏幕瀏覽下方內(nèi)容，操作成本較高。大卡片形式對(duì)內(nèi)容本身，如圖片的質(zhì)量要求很高。這種模式常見于圖片社區(qū)或垂類電商產(chǎn)品，圖片社區(qū)（如躺平）本身較為小眾、即便是UGC（用戶產(chǎn)生內(nèi)容）單元，用戶上傳的圖片素材平均水平也較高，垂類電商（如Nike）圖片品質(zhì)由編輯控制，質(zhì)量高且穩(wěn)定。以上類型產(chǎn)品不以量吸引用戶，用戶往往更加在意內(nèi)容本身是否優(yōu)質(zhì)。用戶沒有帶著明確的目標(biāo)，心智更加類似于瀏覽雜志。產(chǎn)品提供什么內(nèi)容，就進(jìn)行瀏覽。從上方案例可見，除了微信讀書之外的3款產(chǎn)品首頁(yè)都沒有突出搜索功能，而是以信息流呈現(xiàn)為主。
與列表分割一致，卡片也有對(duì)應(yīng)分割方式。
大卡片占據(jù)屏幕面積大，理論上大卡片的內(nèi)容質(zhì)量是經(jīng)審查的。部分產(chǎn)品不存在大卡片容器的交互，點(diǎn)擊卡片直接進(jìn)入詳情頁(yè)。部分產(chǎn)品通過(guò)比較低調(diào)的方式向用戶收集對(duì)于內(nèi)容的意見。如微信讀書長(zhǎng)按卡片，可以選擇不再顯示該卡片內(nèi)容，產(chǎn)品收集反饋，對(duì)于用戶喜好的描述可以進(jìn)一步具象準(zhǔn)確。長(zhǎng)按不是一個(gè)高頻手勢(shì)，用戶觸發(fā)該手勢(shì)往往是試探性的，代表用戶確實(shí)對(duì)于內(nèi)容有意見要傳達(dá)。躺平使用了簡(jiǎn)約三小點(diǎn)樣式的“更多”圖標(biāo)來(lái)收納不常用的收藏和舉報(bào)操作。
何為泳道？顧名思義，常見的滑動(dòng)手勢(shì)是上下方向滑動(dòng)，但有時(shí)也會(huì)出現(xiàn)橫向滑動(dòng)的情況。一系列對(duì)象在一條橫向軌道內(nèi)左右滑動(dòng)，該類型的形式組合在一起，就好比泳道賽道一般。
可以橫向滑動(dòng)以查看內(nèi)容的呈現(xiàn)形式，稱為“泳道”。泳道可以有多種形式。
停止位置隨機(jī)：
內(nèi)容與手勢(shì)相關(guān)度高，比較自由，但停止位置隨機(jī)，不能保證停下后用戶能完美看到當(dāng)前卡片的所有信息，需要用戶微調(diào)卡片位置。
停止位置固定：
根據(jù)用戶滑動(dòng)速率，模擬物理慣性和摩擦，判斷最終展示哪張卡片，并將卡片呈現(xiàn)在屏幕中部，確?？ㄆ系男畔⒍伎梢宰x取。這種交互更加合理，給滑動(dòng)設(shè)置卡點(diǎn)，類似banner效果。
雙列卡片可以看成是大卡片（單列）的另一種表現(xiàn)形式。這種形式更加提高了空間利用率，對(duì)于單一信息展示更加克制。平衡了效率和效果，是電商、圖片社區(qū)、視頻等產(chǎn)品類型的首選表現(xiàn)手法。
雙列卡片可以細(xì)分為兩大類：
卡片流（對(duì)齊）、瀑布流
卡片對(duì)齊：
優(yōu)點(diǎn)：規(guī)整統(tǒng)一，視覺動(dòng)線清晰，瀏覽舒適。
缺點(diǎn)：對(duì)主圖尺寸要求高，確定的比例會(huì)對(duì)商品展示有一定局限。
瀑布流：
優(yōu)點(diǎn)：圖片尺寸寬容度高，滿足一定比值區(qū)間即可。保證商品的展示完整度。錯(cuò)落的布局容易形成節(jié)奏。
缺點(diǎn)：不容易進(jìn)行比較，若要進(jìn)行圖片間的對(duì)比，比較困難，視覺動(dòng)線混亂。
兩列式的卡片布局需要注意內(nèi)容層與背景層的區(qū)分。
大多數(shù)產(chǎn)品的背景層是淺灰色，內(nèi)容層是白色，色差可以建立區(qū)分。部分產(chǎn)品背景層是白色，或者說(shuō)取消了背景層的概念，那么要建立卡片之間的區(qū)分，就需要通過(guò)間距或者卡片加底色的方式。
個(gè)性化推薦模塊對(duì)電商產(chǎn)品尤其重要，準(zhǔn)確地將用戶可能感興趣的產(chǎn)品推薦出去，可以減少用戶的搜索、篩選步驟，提升購(gòu)買效率和愉悅感，從而提升用戶對(duì)產(chǎn)品的評(píng)價(jià)。因此，不斷收集用戶的喜好相當(dāng)重要，盡管各種算法已經(jīng)讓產(chǎn)品顯得越來(lái)越智能，但依舊要給用戶留下提建議的入口。
上文介紹了資訊類產(chǎn)品中，用戶如何給出對(duì)于具體信息的反饋，電商類產(chǎn)品原理也大同小異。
從功能上來(lái)說(shuō)，淘寶、閑魚、京東，都是通過(guò)用戶手勢(shì)（點(diǎn)擊圖標(biāo)或長(zhǎng)按卡片或兩者皆可）來(lái)呼出選項(xiàng)，用戶通過(guò)選擇來(lái)表達(dá)意見，從而使推送更精準(zhǔn)。
從視覺上來(lái)說(shuō)，淘寶和閑魚的反饋形式類似，都是在卡片上添加一個(gè)黑色半透明蒙版，將有限的選項(xiàng)豎直碼放在卡片上，類似小型模態(tài)的概念（但是這里不同于嚴(yán)格的模態(tài)視圖，沒有限定用戶必須要做出選擇，用戶可以直接劃走）。而京東的邏輯不同，使用了傳統(tǒng)阻斷性模態(tài)視圖的處理方式，將下方卡片用蒙版遮擋，希望用戶專注于選擇。
從阻斷感上說(shuō)，京東的阻斷干是最強(qiáng)的，將用戶從原本的瀏覽行為中提取出來(lái)，請(qǐng)用戶嚴(yán)肅地做出對(duì)于當(dāng)前商品的反饋。這樣收集信息的效率更高。由于選項(xiàng)是盛放在帶有指向性的小氣泡之上，針對(duì)性足夠，且延展性好，氣泡的高寬都可以調(diào)整，而淘寶和閑魚的處理方式，在極端情況下，如選項(xiàng)超過(guò)5項(xiàng)時(shí)，所有內(nèi)容放在卡片之上，空間就很緊湊。
這類操作比較隱晦，可點(diǎn)擊按鈕很不明顯，長(zhǎng)按手勢(shì)也不常用。同樣是當(dāng)用戶有明確反饋需求時(shí)，才會(huì)尋找反饋入口，一般情況下，用戶不會(huì)注意到。以用戶常態(tài)下的瀏覽行為為最優(yōu)先。
閑魚的交互做的很細(xì)致，蒙版出現(xiàn)采用了水波的形式，用戶抱著要吐槽的心態(tài)，這種精致有巧思的小動(dòng)效在一定程度上可以緩和用戶的煩躁的心理。
除了電商類產(chǎn)品，部分視頻類產(chǎn)品長(zhǎng)按卡片也會(huì)呼出對(duì)應(yīng)效果。
案例1和案例2，長(zhǎng)按卡片，都是出現(xiàn)視頻片段的預(yù)覽。效果類似iOS的3Dtouch，在相冊(cè)中按壓具體照片即可預(yù)覽。而案例3，點(diǎn)擊“更多”圖標(biāo)，呼出操作。然而選項(xiàng)只有1項(xiàng)，不符合邏輯，單一的選項(xiàng)無(wú)法構(gòu)成“選擇”，這會(huì)讓人有點(diǎn)摸不著頭腦。
如果把界面看作是一張大網(wǎng)格，不同的內(nèi)容占據(jù)著不同位置、不同面積的頁(yè)面區(qū)域。
除了我們已經(jīng)熟悉的“有序”布置，如從上到下依次排列內(nèi)容（大卡片），或者從左往右依次排列內(nèi)容（泳道），還有更加靈活多變的排布方式可供選擇。
布局的本質(zhì)是分配界面面積，用以盛放內(nèi)容，同時(shí)運(yùn)用面積對(duì)比進(jìn)行突出。除了面積對(duì)比的方式外，還有其他方式可以突出關(guān)鍵內(nèi)容。
無(wú)內(nèi)容的呈現(xiàn)形式比較簡(jiǎn)單：內(nèi)容直接置于背景層之上。減少視覺負(fù)擔(dān)，內(nèi)容為主，形式為輔。
復(fù)合容器是指超過(guò)一種的容器形式的組合，如卡片中包含列表、卡片中包含泳道等。
不同的信息容器組合在一起，搭建一個(gè)分工明確的界面。界面中不同的信息需要套用合適的形式去呈現(xiàn)。有層級(jí)就有對(duì)比，對(duì)比越大，層次拉得越開，重點(diǎn)就越突出。
建立對(duì)比的策略：
色彩對(duì)比、面積對(duì)比、樣式對(duì)比、Z軸高度對(duì)比、靜態(tài)動(dòng)態(tài)對(duì)比
文章來(lái)源：站酷 作者：doo_W
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
設(shè)計(jì)到了瓶頸時(shí)候需要打破瓶頸的好方法就是否定，否定自己之前做的一切東西開始去探索學(xué)習(xí)新的設(shè)計(jì)方向與用戶體驗(yàn)。
AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗(yàn)要素》的書，提出了從5個(gè)要素自下而上的建設(shè)用戶體驗(yàn)；從最早這本書針對(duì)web端的設(shè)計(jì)到現(xiàn)在移動(dòng)互聯(lián)的app設(shè)計(jì)，因?yàn)槠涑瑥?qiáng)的普適性和實(shí)戰(zhàn)指導(dǎo)性被廣為流傳為UX設(shè)計(jì)中經(jīng)典的項(xiàng)目創(chuàng)建與研究的方法論。
2008年，當(dāng)你宅在宿舍玩游戲，發(fā)現(xiàn)已經(jīng)很晚了，你打開餓了么APP，點(diǎn)了一個(gè)蛋炒飯，半個(gè)小時(shí)后就有人把飯給你送到宿舍。你禁不住說(shuō)道“Aha，原來(lái)在這個(gè)APP中可以足不出戶就能吃到身邊的美食！”
2015年，當(dāng)你在學(xué)校散步，發(fā)現(xiàn)有很多輛小黃車，然后下載一個(gè)APP就可以將車子騎走，你會(huì)禁不住說(shuō)道“Aha，原來(lái)共享單車可以這么便宜就隨便騎呀！”
好的產(chǎn)品一定是企業(yè)服務(wù)能力的體現(xiàn)，要保證每一個(gè)產(chǎn)品功能都能落地實(shí)施，否則產(chǎn)品只是鏡花水月。沒有能力去支撐的產(chǎn)品都是耍流氓。因此要基于企業(yè)的發(fā)展布點(diǎn)規(guī)劃，每一個(gè)我們做出的核心決定，都應(yīng)該建立在我們確切了解的基礎(chǔ)上。
但一個(gè)好的軟件之初應(yīng)該去怎么思考未來(lái)設(shè)計(jì)的方向呢？通過(guò)5w1h指導(dǎo)我們更加全面的考慮問(wèn)題并高效解決問(wèn)題。
弗洛伊德認(rèn)為，如果將人的整個(gè)意識(shí)比喻成一座冰山的話，那么浮出睡眠的部分屬于意識(shí)的范圍，淹沒在水下的那片深不可測(cè)的部分屬于意識(shí)的范圍，而鏈接意識(shí)和無(wú)意識(shí)的那層面屬于前意識(shí)的狀態(tài)，這就是著名的“冰山理論”。
無(wú)意識(shí)設(shè)計(jì)是深澤直人提出的理論，是指通過(guò)有意識(shí)的設(shè)計(jì)實(shí)現(xiàn)無(wú)意識(shí)的行為。無(wú)意識(shí)并不是真的沒有意識(shí)，而是人們知道自己需要某些東西，但還沒有意識(shí)到到底需要什么。
以商場(chǎng)購(gòu)物流程為例把握整體環(huán)節(jié)
用戶體驗(yàn)顧名思義就是“用戶使用產(chǎn)品時(shí)的心理感受”。用戶體驗(yàn)可能來(lái)自產(chǎn)品給用戶留下的第一印象，也可能來(lái)自用戶長(zhǎng)期以來(lái)感受到的正面或者負(fù)面影響。理想的用戶體驗(yàn)是用戶感到高興、滿足、驕傲甚至是愛上這款產(chǎn)品。
通過(guò)問(wèn)卷調(diào)查等方式對(duì)用戶進(jìn)行調(diào)研，收集用戶對(duì)產(chǎn)品的反饋，分析用戶認(rèn)為本產(chǎn)品中最有價(jià)值的功能點(diǎn)是什么？做了什么關(guān)鍵動(dòng)作才認(rèn)識(shí)到產(chǎn)品有這個(gè)功能點(diǎn)的？收集匯總產(chǎn)品的一些關(guān)鍵功能點(diǎn)之后進(jìn)行分析，思考產(chǎn)品想要解決用戶最大的痛點(diǎn)是什么？產(chǎn)品是如何解決這一痛點(diǎn)的？競(jìng)品是如何解決這一痛點(diǎn)的？我們與他們的解決方式有什么不同？如何讓用戶認(rèn)識(shí)到產(chǎn)品的價(jià)值等。
通過(guò)上面用戶超市購(gòu)物邏輯的分析/發(fā)現(xiàn)/了解/反思，可以精確的了解到當(dāng)前電商軟件設(shè)計(jì)中的分類/購(gòu)物車/購(gòu)物卷/配送等功能的設(shè)計(jì)應(yīng)用的必要性。
戰(zhàn)略層中明確了用戶需求和產(chǎn)品目標(biāo)后，范圍層就要確定做哪些功能、提供什么內(nèi)容來(lái)實(shí)現(xiàn)產(chǎn)品目標(biāo)。
上圖可看同樣的購(gòu)物app首頁(yè)功能卻有著極大的不同，拼多多與京東還是以傳統(tǒng)的電商頁(yè)面為主，而得物（毒）卻以一種展示形式呈現(xiàn)出來(lái)。為什么得物要以展示性功能進(jìn)行首頁(yè)的展示，而京東和拼多多要以商品為主去展示整體功能呢？
在我看來(lái)因?yàn)槊鎸?duì)用戶整體的不同，整體功能和展現(xiàn)內(nèi)容也有不同的展現(xiàn)，如計(jì)劃需求型的商品有固定的需求或者確定的購(gòu)物計(jì)劃才去進(jìn)行需求型購(gòu)買。而對(duì)于潮牌的用戶群體是因?yàn)樵谫?gòu)物現(xiàn)場(chǎng)見到某種產(chǎn)品或某些營(yíng)業(yè)推廣、廣告宣傳，提示或激起顧客尚未滿足的消 費(fèi)需求，從而引起消費(fèi)欲望決定購(gòu)買，其實(shí)這是購(gòu)物現(xiàn)場(chǎng)刺激的結(jié)果，是的一種刺激沖動(dòng)型消費(fèi)。
好的產(chǎn)品設(shè)計(jì)是順勢(shì)而為，而不是重新定義用戶體驗(yàn)，更全面地了解用戶畫像，可以幫助我們作出更有方向，更符合用戶需求。
在設(shè)計(jì)主要的頁(yè)面的時(shí)候需要問(wèn)自己幾個(gè)問(wèn)題，功能導(dǎo)向是否符合產(chǎn)品目標(biāo)？核心功能板塊是否缺失？頁(yè)面布局是否一致等問(wèn)題。
通過(guò)觀察以上的功能但是卻又有很大的不同，在拼多多首頁(yè)的設(shè)計(jì)以產(chǎn)品為主，而得物app卻以用戶分享頁(yè)面為主；拼多多設(shè)計(jì)風(fēng)格為一種較為“接地氣”的頁(yè)面，得物app卻以一種“高端時(shí)尚”的頁(yè)面。
為什么要以這兩種風(fēng)格去設(shè)計(jì)這兩款軟件呢，同樣是國(guó)內(nèi)大的電商平臺(tái)，為什么一個(gè)風(fēng)格高端時(shí)尚一個(gè)“低端混亂”？
模擬用戶的行為，當(dāng)一個(gè)產(chǎn)品可以模擬用戶的行為，將用戶代入真實(shí)的情境中，用戶就會(huì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感。在以用戶畫像進(jìn)行分析，當(dāng)一個(gè)60歲的叔叔，晚上5點(diǎn)準(zhǔn)備為一家人去做晚飯之前，去給家人買菜。他是更喜歡去高端的專賣店去買還是去一個(gè)臟亂的菜市場(chǎng)去買菜呢？結(jié)果顯而易見在會(huì)更加傾向于市場(chǎng)，因?yàn)槭袌?chǎng)給人最直觀的印象就是價(jià)格便宜，能以最便宜的價(jià)格去買到自己想要的物品。
再進(jìn)行一個(gè)用戶畫像進(jìn)行分析，一個(gè)00后的潮男，他要為自己買一款好看的球鞋，他的購(gòu)買路徑是什么呢？首先他需要去了解什么樣的什么品牌款式的鞋才是最時(shí)尚的，其次他會(huì)選著一個(gè)最專業(yè)的品牌專賣店或者大的電商平臺(tái)去進(jìn)行購(gòu)買，因?yàn)檫@樣能給他最大的品牌保障。
通過(guò)以上這兩點(diǎn)才能更加詮釋一個(gè)產(chǎn)品的設(shè)計(jì)方向和最佳的用戶體驗(yàn)。
根據(jù)尼爾森F模型，我們可以得出幾個(gè)心理暗示：
用戶快速掃視時(shí)，具體的文字并不重要
多用小標(biāo)題、短句引起閱讀者注意
將重要的內(nèi)容放在最上邊
其實(shí)，拇指操作熱圖最早是由設(shè)計(jì)師Steven Hoober于2011年的書《Designing Mobile Interface》中使用，其中的綠色部分被他稱為“單手握持時(shí)拇指觸摸最舒適的區(qū)域”。這些區(qū)域的測(cè)量是通過(guò)1333份觀測(cè)分析總結(jié)出來(lái)的，這些分析數(shù)據(jù)還表明，49%的用戶習(xí)慣于單手握持手機(jī)，用拇指操控屏幕，而用另外一只手做其他的事情。同樣是基于當(dāng)年的這些報(bào)告，還獲取了以下信息：
36%的用戶會(huì)雙手環(huán)抱手機(jī)，用其中一只手的拇指操控屏幕
15%的用戶會(huì)用雙手握持手機(jī)并用兩手的拇指操控屏幕，其中90%的用戶操作時(shí)習(xí)慣屏幕豎著，而10%的用戶偏向于橫屏操作。
結(jié)合觸屏拇指熱區(qū)和推導(dǎo)模型，將高頻操作放在最容易點(diǎn)擊位置，降低用戶使用成本，提升用戶體驗(yàn)。
合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。我們是否能夠在最求大小一致、圓角一致、線寬一致、視覺一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？
心理學(xué)認(rèn)為，情感是人對(duì)客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)，當(dāng)這種需求得到滿足時(shí)，人們會(huì)產(chǎn)生愉悅、喜愛、幸福的情感。延伸到APP設(shè)計(jì)中，在產(chǎn)品加入情感化設(shè)計(jì)可以成為用戶之間的感情的傳遞橋梁，增加用戶對(duì)產(chǎn)品的好感度。情感化設(shè)計(jì)不是轟轟烈烈，有的時(shí)候僅僅是一個(gè)icon，一個(gè)圖片一句話。情感化設(shè)計(jì)讓產(chǎn)品變得有溫度，讓用戶獲得愉悅的使用體驗(yàn)，這些簡(jiǎn)單的細(xì)節(jié)設(shè)計(jì)充滿了積極的情緒。它滿足產(chǎn)品的功能性和易用性的同事追求更高層次的目標(biāo)。
情感化設(shè)計(jì)在空白頁(yè)設(shè)計(jì)中發(fā)揮著巨大的作用，他通過(guò)設(shè)計(jì)手段來(lái)減輕用戶在看到一個(gè)毫無(wú)內(nèi)容的頁(yè)面時(shí)產(chǎn)生的挫敗感。
Tabs是APP設(shè)計(jì)中最常見的控件之一，它幫助界面進(jìn)行快速的信息分類導(dǎo)航。在視覺表現(xiàn)形式上，Tabs和標(biāo)簽欄同樣也分為選中狀態(tài)和未選中狀態(tài)，一個(gè)好的Tabs既要有設(shè)計(jì)感又符合產(chǎn)品特性。在一個(gè)APP中有許多的界面，每一個(gè)界面又有許多的元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。通常個(gè)人中心的人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延展使用。或者獨(dú)特的產(chǎn)品外觀、logo、ip形象，也可以作為視覺符號(hào)的一種，延續(xù)到其他的界面中。這樣這個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了，給用戶始終如一的一致感，增加了極強(qiáng)的品牌效應(yīng)。并將這種情感投射到產(chǎn)品，從而提升用戶對(duì)產(chǎn)品的認(rèn)同感和忠誠(chéng)度。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來(lái)源。從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺符號(hào)作為Tab選中狀態(tài)，既讓界面視覺獨(dú)一無(wú)二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。
作為中國(guó)最大線上購(gòu)物平臺(tái)之一的天貓，其品牌最顯著的特征就是那只大腦袋小身體的黑貓，而它的“貓頭”也成為天貓每一次品牌推廣的必要元素。其中最受矚目的就是“貓頭”
聯(lián)合營(yíng)銷海報(bào)的設(shè)計(jì)，已成為天貓與大品牌一起聯(lián)合營(yíng)銷的傳統(tǒng)項(xiàng)目，通過(guò)設(shè)計(jì)創(chuàng)意淋淋盡職地表達(dá)出廠商的品牌精神和各自倡導(dǎo)的生活方式。
從品牌圖形中提取具有鮮明特征的形狀作為設(shè)計(jì)語(yǔ)言，也是一種設(shè)計(jì)風(fēng)格的最好表現(xiàn)。
文章來(lái)源：站酷 文章作者：大峰_Design
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。
按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認(rèn)識(shí)這個(gè)組件，今天我把關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。
一 按鈕的作用
在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時(shí)候該用按鈕。
1）什么是按鈕
按鈕用于觸發(fā)一個(gè)及時(shí)操作。
2）有什么作用
2.1 功能操作
比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當(dāng)弱化，重點(diǎn)強(qiáng)調(diào)功能，突出主體信息。
2.2 指引用戶下一步操作
這個(gè)是最常見的使用場(chǎng)景，每個(gè)可交互頁(yè)面上都有這類按鈕的出現(xiàn)，用來(lái)指引用戶下一步該怎么做。比如：創(chuàng)建、保存...
2.3 培養(yǎng)用戶習(xí)慣
當(dāng)用戶知悉某個(gè)按鈕能指向某個(gè)操作，或者獲取某類信息后，長(zhǎng)此以往用戶就會(huì)形成使用習(xí)慣。如果某操作能夠?yàn)橛脩舫掷m(xù)帶來(lái)價(jià)值，那就可以在按鈕的位置讓它更醒目，持續(xù)培養(yǎng)用戶點(diǎn)擊習(xí)慣。
二 按鈕有哪些類型
· 主按鈕：用于主動(dòng)行動(dòng)點(diǎn)，一個(gè)操作區(qū)域內(nèi)只有且只能有一個(gè)主按鈕；
· 默認(rèn)按鈕：用戶內(nèi)有主次之分的一組行動(dòng)點(diǎn)；
· 虛線按鈕：常用于【添加】操作；
· 文本按鈕：用于次級(jí)的行動(dòng)點(diǎn)；
· 鏈接按鈕：用于作為外鏈的行動(dòng)點(diǎn)。
三 按鈕的狀態(tài)
1）交互狀態(tài)
1.1 Normal 正常狀態(tài)
此狀態(tài)為按鈕的正常顯示狀態(tài)，就是按鈕在也頁(yè)面中的常規(guī)狀態(tài)。
1.2 Hover 懸浮狀態(tài)
此狀態(tài)為按鈕的懸浮狀態(tài)，當(dāng)鼠標(biāo)滑過(guò)時(shí)候的狀態(tài)會(huì)給用戶一個(gè)交互反饋，因?yàn)樗皇且粋€(gè)視覺上的反饋并無(wú)實(shí)際作用，所以在移動(dòng)端就把此狀態(tài)去掉了。
此狀態(tài)的效果并沒有具體的規(guī)則，具體按產(chǎn)品風(fēng)格來(lái)定。這里我給一個(gè)參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.3 Click 點(diǎn)擊狀態(tài)
此狀態(tài)為按鈕的鼠標(biāo) / 手指按鈕狀態(tài)，操作完此狀態(tài)后，就會(huì)引發(fā)此按鈕的真實(shí)作用。
同時(shí)，此狀態(tài)的效果也沒有具體的規(guī)則，具體按產(chǎn)品風(fēng)格來(lái)定。這里我給一個(gè)參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.4 Disable 禁用狀態(tài)
此狀態(tài)為按鈕的不可操作狀態(tài)。
當(dāng)頁(yè)面中有未完成的任務(wù)或頁(yè)面中有錯(cuò)誤導(dǎo)致不可提交頁(yè)面時(shí)，按鈕會(huì)處于 Disable 狀態(tài)。這個(gè)狀態(tài)在產(chǎn)品中也是很常用的，而且這種情況下應(yīng)該引導(dǎo)用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個(gè)通用的展示方案。
一般方案有兩種：
· 無(wú)論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
· Disable 狀態(tài)為 Normal 狀態(tài)的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。
2）狀態(tài)屬性
· 常規(guī)：常規(guī)樣式的按鈕，主操作按鈕；
· 危險(xiǎn)按鈕：刪除/移動(dòng)/修改權(quán)限等危險(xiǎn)操作，一般需要二次確認(rèn)；
· 幽靈按鈕：用于背景色比較復(fù)雜的地方，常用在首頁(yè)/產(chǎn)品頁(yè)等展示場(chǎng)景；
· 加載：用于異步操作等待反饋的時(shí)候，可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1）一個(gè)操作區(qū)有且只有一個(gè)主按鈕
一個(gè)操作區(qū)有且只有一個(gè)主按鈕去引導(dǎo)用戶操作，如有有多個(gè)或沒有則會(huì)影響用戶的判斷。盡可能少的讓用戶去做選擇，產(chǎn)品的終極目標(biāo)應(yīng)該是“傻瓜式”產(chǎn)品，不要讓用戶有學(xué)習(xí)成本。
2）圓角值
根據(jù)產(chǎn)品風(fēng)格，三種圓角值的設(shè)定：
2.1 圓角值為 0
這種適合用在比較嚴(yán)謹(jǐn) / 企業(yè)級(jí)產(chǎn)品中，比如：阿里云；
2.2 小圓角值
這種是最常用的形式，在不失嚴(yán)謹(jǐn)?shù)耐瑫r(shí)還有一些細(xì)節(jié)，如果可以的話，盡量選這種的；
2.3 超大圓角值
這種一般需要有獨(dú)特的產(chǎn)品風(fēng)格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。
較大圓角值，此類千萬(wàn)不要用，不要問(wèn)，問(wèn)就是太丑。
3）精簡(jiǎn)文字
按鈕里面的文字一定是精簡(jiǎn)的，不要展示過(guò)多文字，更不要折行。
4）文字與按鈕比例要適中
文字與按鈕的比例要適中，文字不要太大或太小，都會(huì)影響視覺展示。
5）彌散陰影
如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會(huì)讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級(jí)別的不要用，不然識(shí)別度會(huì)變差，并且會(huì)讓按鈕的體驗(yàn)變得很差。
6）主次操作按鈕樣式統(tǒng)一
主次操作按鈕樣式要統(tǒng)一，不要濫用樣式。
7）按鈕樣式與其他組件要有區(qū)別
實(shí)際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產(chǎn)生誤解，做一些不必要的操作和思考。
8）不同場(chǎng)景適配
現(xiàn)在暗黑模式也是常用的場(chǎng)景了，所以黑/白場(chǎng)景下都要考慮到識(shí)別度的問(wèn)題。
9）主次按鈕的位置
主次按鈕左右的問(wèn)題，也常常出現(xiàn)在設(shè)計(jì)討論會(huì)中，這次我直接放個(gè)結(jié)論吧，以后不要再為這件事吵架了。
在提交頁(yè)面、彈窗中，主按鈕在右；在其他常規(guī)頁(yè)面上，酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的，這里我總結(jié)了一個(gè)規(guī)范（僅代表個(gè)人意見）。
· 高 = 文字行高 + Xn，X=自然數(shù)，n=4
· 寬 = 文字寬度 + Xn，X=自然數(shù)，n=4
在其他地方也可以用類似的公式去做規(guī)范，比如卡片的間距，你可以設(shè)置 n 為基礎(chǔ)值，在此基礎(chǔ)上用 Xn 去選取合適的值。
注意：常用的字號(hào)為 12px、14px，盡量不要用太大的字號(hào)在按鈕上。
小結(jié)
按鈕只是眾多組件中的其中一個(gè)，也是最常用的組件之一。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，無(wú)論大小組件，我們都要精益求精的去思考，只有把每一個(gè)細(xì)節(jié)做好了，才能做好產(chǎn)品。日積月累的把每一個(gè)知識(shí)點(diǎn)掌握了，我們也就成長(zhǎng)了。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：友設(shè)青年
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
交互設(shè)計(jì)之父的阿蘭·庫(kù)珀，最為人熟知的就是這句話：“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”。
a. 費(fèi)茨定律，它是在1954 年 ，由保羅.菲茨心理學(xué)家 Paul Fitts 首先提出，當(dāng)時(shí)用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型，在人機(jī)交互和設(shè)計(jì)領(lǐng)域的影響力最為廣泛和深遠(yuǎn)。
b. 定義：從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離和目標(biāo)的大小
（上圖中的 D與W），用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。
c. 費(fèi)茨定律，在產(chǎn)品設(shè)計(jì)中的價(jià)值是提高產(chǎn)品的可用性和易用性。例如：界面設(shè)計(jì)中，按鈕等可點(diǎn)擊對(duì)象要合理的設(shè)置大小尺寸才能容易操作，所以在移動(dòng)應(yīng)用中，圖標(biāo)按鈕會(huì)增加點(diǎn)擊熱區(qū)范圍，以便用戶輕松點(diǎn)擊按鈕，做到
產(chǎn)品設(shè)計(jì)上的可用性和易用性。
費(fèi)茨定律的思考分析，如下圖所示 。
1. 可點(diǎn)擊對(duì)象的設(shè)計(jì)，需要設(shè)計(jì)合理的大小和尺寸。功能設(shè)計(jì)的越大，用戶越容易點(diǎn)擊操作，交互效率越好。
2. 界面設(shè)計(jì)的屏幕邊緣或角，適合放置像菜單欄或按鈕這樣的設(shè)計(jì)元素，如果邊角是目標(biāo)，它們可無(wú)限高或無(wú)限寬，更容易觸達(dá)到操作目標(biāo)。不管你移動(dòng)了多遠(yuǎn)，點(diǎn)擊操作最終都會(huì)停在屏幕的邊緣，并定位在按鈕的上面。
3. 界面設(shè)計(jì)中，出現(xiàn)在用戶正在操作的對(duì)象旁邊的刪除列表（右滑刪除）比下方彈出選擇對(duì)象容易操作，右滑刪除交互可以被用戶打開得更快，更有效率，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置，就可以刪除多余的列表。
4. Apple的iOS人機(jī)交互設(shè)計(jì)指南中指出，按鈕的點(diǎn)擊熱區(qū)大于44x44pt，這樣操作按鈕才會(huì)讓用戶覺得容易使用。
5. 費(fèi)茨定律案例：用戶在使用產(chǎn)品時(shí)，比較重要的操作，我們會(huì)放在移動(dòng)端應(yīng)用的屏幕邊緣處，方便我們的
用戶點(diǎn)擊操作產(chǎn)品的功能圖標(biāo)。如下圖所示。
2. Hick’s Law / 席克定律（希克法則）
我們看一下，席克定律的數(shù)學(xué)公式表達(dá)是 : RT= a+blog2 ( n )。RT 表示反應(yīng)時(shí)間，a 表示跟做決定無(wú)關(guān)的總時(shí)間，b 表示根據(jù)對(duì)選項(xiàng)認(rèn)知的處理時(shí)間實(shí)證衍生出的常數(shù)，n 表示同樣可能的選項(xiàng)數(shù)。
在人機(jī)交互的界面設(shè)計(jì)中，選項(xiàng)越多，意味著用戶做出決定的時(shí)間就越長(zhǎng)。
分布操作，專注當(dāng)前行為，就可以節(jié)約用戶作出決定的時(shí)間。如下圖所示。
其他符合席克定律的案例，如下圖所示：
a. 對(duì)于用戶，低頻率功能或不太重要的功能，可以收納起來(lái)。比如：個(gè)人中心的設(shè)置功能模塊。如下圖所示：
b. 分布操作，專注于當(dāng)前的行為設(shè)計(jì)，如下圖所示：
c. 在人機(jī)交互設(shè)計(jì)中，我們對(duì)核心功能選項(xiàng)做好設(shè)計(jì)上的歸類，可以提升用戶做選擇的效率。
比如：我們幫助用戶選擇 5 種核心的功能需求，它首先劃分了旅游場(chǎng)景下的功能分類，讓用戶對(duì)分類進(jìn)行選擇。
然后進(jìn)入選擇機(jī)票入口，這樣我們極大的化解了用戶面對(duì)很多旅游功能選項(xiàng)的難度和糾結(jié)，節(jié)約了用戶做決定的
時(shí)間。
d. 做好分類選擇，可以提高交互體驗(yàn)設(shè)計(jì)的效率，選擇你想要的商品并購(gòu)買。如下圖所示。
3. 神奇數(shù)字 7 ± 2 法則
1. 因?yàn)槊绹?guó)認(rèn)知心理學(xué) George A Miller 的研究，人們短時(shí)記憶廣度大約為7個(gè)單位（字母、數(shù)字、中文等），也就是說(shuō)每次只能處理 5 到 9 件事情。
2. 人的大腦認(rèn)知信息的能力有限，所以我們通過(guò)把信息分組和模塊分類，以此來(lái)認(rèn)識(shí)和思考一些復(fù)雜性的問(wèn)題。
3. 神奇數(shù)字 7 ± 2 法則，應(yīng)用范圍很廣。例如我們記憶的電話號(hào)碼，可以分成三組數(shù)字：159 5555 6666 ，
這樣分組記憶起來(lái)就會(huì)容易很多。
4. UI 界面的導(dǎo)航設(shè)計(jì)，為了給用戶提供明確的設(shè)計(jì)向?qū)?，兩種導(dǎo)航（底部導(dǎo)航欄和頂部導(dǎo)航欄）的欄目設(shè)計(jì)通常都控制在 5 個(gè)之內(nèi)，欄目功能過(guò)多用戶不容易記憶，5 個(gè)之內(nèi)的導(dǎo)航設(shè)計(jì)方便用戶記憶和快速操作。
5. 移動(dòng)應(yīng)用的交互設(shè)計(jì)規(guī)律。神奇數(shù)字 7 加減 2 法則同樣適用，螞蟻金服的品類區(qū)的核心功能模塊的設(shè)計(jì)，懸浮卡片上只顯示 8 個(gè) 功能圖標(biāo)，如下圖所示。
6. 同一類功能和同一層級(jí)的元素出現(xiàn)時(shí)，數(shù)目一般控制在 5-9 個(gè)，如下圖所示。
7. 如果超過(guò) 5 個(gè)，可以右滑選擇你想要的產(chǎn)品功能，如下邊的右圖所示。
8. 神奇數(shù)字 7±2 法則，運(yùn)營(yíng)廣告圖設(shè)計(jì)要抓住重點(diǎn)去設(shè)計(jì)，更好的引導(dǎo)用戶去瀏覽內(nèi)容和產(chǎn)品的交互體驗(yàn)。
如下圖所示，數(shù)字符號(hào)標(biāo)注-突出重點(diǎn)，主圖、主題、操作按鈕、主色氛圍等，我們會(huì)作出優(yōu)秀的運(yùn)營(yíng)設(shè)計(jì)。
根據(jù)格式塔的心理學(xué)思考 ：當(dāng)對(duì)象離得太近的時(shí)候，人的意識(shí)會(huì)認(rèn)為界面元素之間是相關(guān)的。
在交互設(shè)計(jì)中，界面設(shè)計(jì)中的接近原則是對(duì)相似信息及功能類別進(jìn)行內(nèi)容分組和布局設(shè)計(jì)的優(yōu)化設(shè)計(jì)。
接近法則在界面設(shè)計(jì)中的作用，能夠直接影響到用戶與產(chǎn)品界面之間的視覺互動(dòng)，來(lái)引導(dǎo)用戶的瀏覽及點(diǎn)擊交互行為。因此，相似的內(nèi)容和功能模塊應(yīng)該彼此靠近，而關(guān)聯(lián)性較弱的內(nèi)容應(yīng)該保持大一點(diǎn)的間距。
接近法則運(yùn)用的目的：在視覺上通過(guò)組與組的區(qū)分，來(lái)劃分功能模塊之間的關(guān)聯(lián)性，讓界面變得更加清晰，同時(shí)幫助用戶在瀏覽頁(yè)面時(shí)，能夠清楚的看到到各個(gè)內(nèi)容模塊之間的關(guān)聯(lián)性，就是視覺信息的劃分和分組展示。
如下圖所示。同一類的功能可分為一組，組內(nèi)使用淺灰色的分割線來(lái)表達(dá)。而關(guān)聯(lián)性弱的功能模塊，組內(nèi)的可以用淺灰色的分割面表達(dá)，拉開組與組之間的距離，做好視覺信息的劃分效果。
a. “復(fù)制粘貼之父” Larry Tesler (1945-2020) 說(shuō)過(guò)，“任何事物都具有其固有的復(fù)雜性，無(wú)法簡(jiǎn)化”。
引入第三方登錄，減少注冊(cè)賬號(hào)的復(fù)雜步驟，節(jié)約用戶登錄或注冊(cè)這一流程上所耗費(fèi)的步驟和時(shí)間。
復(fù)雜性守恒定律，認(rèn)為每一個(gè)產(chǎn)品設(shè)計(jì)的過(guò)程中，都有其固有的復(fù)雜性，存在著一個(gè)臨界點(diǎn)，超過(guò)了這個(gè)點(diǎn)產(chǎn)品設(shè)計(jì)的過(guò)程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方轉(zhuǎn)移到另外一個(gè)地方。
b. 以用戶為中心的產(chǎn)品設(shè)計(jì)，交互設(shè)計(jì)應(yīng)盡量簡(jiǎn)化用戶層面上的交互設(shè)計(jì)的過(guò)程。比如：頂部導(dǎo)航欄的更多圖標(biāo)，就是將常用的功能整合并隱藏在首頁(yè)設(shè)計(jì)的更多功能模塊中。如下圖所示。
a. 防錯(cuò)原則，認(rèn)為大部分的意外都是由產(chǎn)品設(shè)計(jì)上的疏忽，而不是人為的操作疏忽。所以我們可以通過(guò)改變產(chǎn)品
體驗(yàn)設(shè)計(jì)把過(guò)失率降到。
我們?cè)谠O(shè)計(jì)過(guò)程中，要從用戶維度出發(fā)，做設(shè)計(jì)前思考用戶的使用場(chǎng)景，預(yù)測(cè)到他們有可能發(fā)生的誤操作狀態(tài)，
做到操作前給用戶的溫馨提示、操作中的實(shí)時(shí)告知、操作后給用戶的及時(shí)反饋。
b. 防錯(cuò)原則是著名的品質(zhì)管理專家新鄉(xiāng)重夫提出來(lái)的。原則最初是用于工業(yè)管理，在交互設(shè)計(jì)中也可以使用。
比如圖 1，今日幸運(yùn)星主題，分享給好友幫忙砍價(jià)。在沒有滿足條件時(shí)，通過(guò)彈窗來(lái)提示用戶去邀請(qǐng)好友，以此
來(lái)完成產(chǎn)品設(shè)計(jì)的任務(wù)。
比如圖 2，請(qǐng)輸入驗(yàn)證碼的彈窗，驗(yàn)證碼錯(cuò)誤，您還可以重復(fù) 3 次，只有信息都輸入正確時(shí)，用戶才能完成的這個(gè)界面任務(wù)，如下圖所示。
簡(jiǎn)單有效原理，被稱為“如無(wú)必要，勿增實(shí)體”（Entities should not be multiplied unnecessarily），即如有兩個(gè)
功能相等的設(shè)計(jì)，那么選擇最簡(jiǎn)單的、視覺干擾比較少的設(shè)計(jì)。在其他條件相同的情況下，要求得越少的那個(gè)就
越好，越有價(jià)值。
a. 合并多余流程，點(diǎn)擊極速支付，支付成功彈窗提示。
b. 高頻率使用的產(chǎn)品界面，保持清爽的設(shè)計(jì)感。
c. 優(yōu)先展示核心功能，減少點(diǎn)擊次數(shù)。如下圖所示。
圖 1，界面中清晰的品牌色的底部操作按鈕，可以明確的引導(dǎo)用戶去選擇優(yōu)質(zhì)的理財(cái)產(chǎn)品。
圖 2 ，摩拜單車首頁(yè)，用戶最關(guān)注的功能是掃碼開鎖的核心功能，方便用戶直接操作，提高交互效率。
d. 蘋果官方網(wǎng)站的簡(jiǎn)約設(shè)計(jì)做的很棒。蘋果公司用一種很和品質(zhì)感的設(shè)計(jì)提供了足夠多的內(nèi)容，網(wǎng)站的文案，交互和圖片都比較集中展示，網(wǎng)頁(yè)設(shè)計(jì)沒有放一些使用戶分心的廣告和不重要的內(nèi)容。如下圖所示。
總結(jié)：
1. 在產(chǎn)品設(shè)計(jì)領(lǐng)域，有很多經(jīng)過(guò)時(shí)間檢驗(yàn)過(guò)的定律，可以作為產(chǎn)品設(shè)計(jì)的指導(dǎo)原理。作為交互設(shè)計(jì)之父的
阿蘭·庫(kù)珀，他最為人熟知的就是這句話 ：“ 除非有更好的選擇，否則就遵從標(biāo)準(zhǔn) ”。
2. 交互設(shè)計(jì)的定律，能夠幫助產(chǎn)品設(shè)計(jì)師對(duì)界面上的各種視覺元素進(jìn)行合理思考，從而發(fā)現(xiàn)一些用戶使用場(chǎng)景中的可用性問(wèn)題。從產(chǎn)品設(shè)計(jì)的維度思考看，我們來(lái)改善產(chǎn)品設(shè)計(jì)的操作效率和用戶的滿意度。設(shè)計(jì)服務(wù)于產(chǎn)品、設(shè)計(jì)服務(wù)于商業(yè)。
a. 什么是用戶體驗(yàn)地圖 ？
定義：用戶體驗(yàn)地圖，是一種梳理產(chǎn)品體驗(yàn)問(wèn)題的設(shè)計(jì)工具。展示的就是用戶在使用一款產(chǎn)品和設(shè)計(jì)服務(wù)的過(guò)程中，每一個(gè)階段的體驗(yàn)、用戶對(duì)產(chǎn)品直觀的心理感受。將用戶的所做、所思都展現(xiàn)出來(lái)，便于團(tuán)隊(duì)設(shè)計(jì)師全面思考產(chǎn)品帶給用戶的體驗(yàn)，挖掘設(shè)計(jì)的優(yōu)化點(diǎn)。例如，你去三亞去度假旅游，用戶體驗(yàn)地圖就是用圖形的形式，可視化的表達(dá)，將你在三亞的一天活動(dòng)情況記錄下來(lái)，其中包含你這段時(shí)間去過(guò)的旅游景點(diǎn)，以及在每個(gè)旅游景點(diǎn)的用戶
體驗(yàn)感受。
思考用戶體驗(yàn)地圖，適合在產(chǎn)品設(shè)計(jì)的那幾個(gè)階段繪制？
1. 原型制作前，設(shè)計(jì)師從直觀感覺的角度看，我們要了解自己的產(chǎn)品為用戶提供了什么功能、交互體驗(yàn)，同時(shí)協(xié)助我們的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)，做好產(chǎn)品功能的體驗(yàn)設(shè)計(jì)。
2. 產(chǎn)品上線時(shí)，我們可以結(jié)合用戶調(diào)研、可用性測(cè)試等方法論。以此獲取用戶的美好體驗(yàn)和真實(shí)的心理感受，來(lái)幫助我們公司的產(chǎn)品設(shè)計(jì)發(fā)現(xiàn)問(wèn)題，以此作為產(chǎn)品設(shè)計(jì)的迭代優(yōu)化的方向或者尋找新的創(chuàng)意設(shè)計(jì)機(jī)會(huì)點(diǎn)來(lái)解決問(wèn)題。
a. 我們做好用戶體驗(yàn)地圖的兩個(gè)優(yōu)點(diǎn)：
1. 產(chǎn)品設(shè)計(jì)的體驗(yàn)?zāi)繕?biāo)是讓用戶用起來(lái)，感覺到產(chǎn)品具有可用性、好用性、易用性，那么產(chǎn)品設(shè)計(jì)也應(yīng)該從用戶
視角出發(fā)，用戶從產(chǎn)品那個(gè)觸點(diǎn)點(diǎn)擊進(jìn)來(lái)，怎樣點(diǎn)擊交互下一步，怎樣保持對(duì)產(chǎn)品的活躍度，如何傳播分享；定位用戶使用產(chǎn)品過(guò)程中的體驗(yàn)痛點(diǎn)。
2. 真正思考用戶需要什么功能，讓更多用戶參與進(jìn)來(lái)，換位思考我們產(chǎn)品帶給用戶具體什么感受，全局性的思維去思考產(chǎn)品的體驗(yàn)，與團(tuán)隊(duì)成員、產(chǎn)品交互設(shè)計(jì)、開發(fā)部門和項(xiàng)目負(fù)責(zé)人等達(dá)成一致性的共識(shí)、有效溝通和協(xié)作，一起制作出解決方案。
b. 思考用戶體驗(yàn)地圖的價(jià)值點(diǎn)
1. 基于用戶使用場(chǎng)景的設(shè)計(jì)是基于用戶達(dá)到某個(gè)體驗(yàn)設(shè)計(jì)目標(biāo)的一系列場(chǎng)景的分析與產(chǎn)品思考，理解用戶在每一個(gè)使用場(chǎng)景下的痛點(diǎn)及需求分析，同時(shí)結(jié)合用戶的上一場(chǎng)景，思考用戶下一步的體驗(yàn)?zāi)繕?biāo)，我們可以通過(guò)做好體驗(yàn)設(shè)計(jì)，來(lái)引起用戶情感上的共鳴。
2. 使用用戶體驗(yàn)地圖，團(tuán)隊(duì)成員可以從用戶的痛點(diǎn)出發(fā)，讓產(chǎn)品設(shè)計(jì)師、團(tuán)隊(duì)成員全面的思考產(chǎn)品體驗(yàn)，從用戶
體驗(yàn)地圖中來(lái)挖掘產(chǎn)品設(shè)計(jì)的機(jī)會(huì)點(diǎn)。
以途牛用戶體驗(yàn)地圖為例，如下圖所示。
我們運(yùn)用用戶體驗(yàn)地圖時(shí)，作為設(shè)計(jì)師或參與者需要切換成用戶視角、第一次使用者的角度去思考，去發(fā)現(xiàn)產(chǎn)品體驗(yàn)上的問(wèn)題，同時(shí)解決產(chǎn)品體驗(yàn)中遇到的問(wèn)題，提升用戶體驗(yàn)的滿意度。
制作用戶體驗(yàn)地圖時(shí)，四個(gè)關(guān)鍵點(diǎn)的思考：
1. 明確我們的核心用戶人群等; 2. 研究用戶的使用場(chǎng)景。3. 做好用戶的訪談和調(diào)研。4. 制作好用戶體驗(yàn)地圖。
制作用戶體驗(yàn)地圖的具體步驟如下：
1. 前期準(zhǔn)備工作：
我們可以先做用戶的深度訪談、用戶對(duì)產(chǎn)品反饋、產(chǎn)品設(shè)計(jì)的走查和交互的走查、產(chǎn)品的數(shù)據(jù)分析、同行業(yè)的競(jìng)品分析、訪談?dòng)脩舻确椒?，獲取大量真實(shí)可靠的資料。
我們就會(huì)認(rèn)識(shí)到：思考用戶在使用產(chǎn)品設(shè)計(jì)的過(guò)程中產(chǎn)生的行為數(shù)據(jù)、用戶體驗(yàn)和用戶內(nèi)心的真實(shí)感受。我們也可以思考產(chǎn)品的設(shè)計(jì)思路、產(chǎn)品的核心用戶人群等，以此作為我們制作用戶體驗(yàn)地圖過(guò)程中的重要參考和依據(jù)，知道用戶到底需要什么功能和流程，來(lái)幫助用戶解決問(wèn)題。
2. 用戶調(diào)研的方法如下：
我們可以先采訪用戶或者做好調(diào)研和記錄，將我們的采訪或調(diào)研記錄的內(nèi)容做好整理歸檔，團(tuán)隊(duì)成員一起來(lái)拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實(shí)的想法。
3. 我們要梳理好關(guān)鍵產(chǎn)品設(shè)計(jì)任務(wù)的流程，就是用戶在使用產(chǎn)品功能的過(guò)程中，會(huì)面臨很多不同的場(chǎng)景或復(fù)雜的設(shè)計(jì)流程和體驗(yàn)設(shè)計(jì)的目標(biāo)。然后我們?cè)僮珜懹脩敉瓿擅總€(gè)關(guān)鍵任務(wù)的時(shí)間：比如，對(duì)于我們?nèi)粘Ｋ姷牟檎夜δ芏?，用戶希望更快的查找到自己想要的產(chǎn)品功能和體驗(yàn)?zāi)繕?biāo)。
我們?cè)賹懗鲫P(guān)鍵產(chǎn)品任務(wù)的用戶操作產(chǎn)品時(shí)的行為：
指的是用戶當(dāng)下在做什么，通常是用 “我+動(dòng)詞” 來(lái)表示，例如：我購(gòu)買基金產(chǎn)品。
4. 我們?cè)俅_定好關(guān)鍵節(jié)點(diǎn)，寫出用戶調(diào)研過(guò)程中的痛點(diǎn)思考、用戶的滿意度思考，放在對(duì)應(yīng)的行為點(diǎn)的下方。
我們思考和分析用戶的痛點(diǎn)、用戶滿意度的調(diào)查，判斷用戶的情緒變化。分析結(jié)束后，需要將以上三類信息都寫下來(lái)，方便后續(xù)整理分組。把行為按照達(dá)成用戶目標(biāo)的邏輯順序整理出來(lái)，并做好歸類。例如：美團(tuán) App 的例子中分為 4 個(gè)階段，如下圖所示。
5. 我們來(lái)判斷：用戶在每個(gè)階段，體驗(yàn)產(chǎn)品設(shè)計(jì)任務(wù)中所產(chǎn)生的情緒高低的不同值，并把它們連成一條線，這樣就形成用戶的情緒曲線。
6. 也就是說(shuō)，制作用戶體驗(yàn)地圖過(guò)程中，我們要思考用戶每個(gè)行為背后的痛點(diǎn)和產(chǎn)品設(shè)計(jì)上的機(jī)會(huì)點(diǎn)。
最后，制作好一張實(shí)用性很強(qiáng)的用戶體驗(yàn)地圖，以此來(lái)挖掘用戶的痛點(diǎn)問(wèn)題，我們可以更好的去挖掘產(chǎn)品體驗(yàn)設(shè)計(jì)中的設(shè)計(jì)機(jī)會(huì)點(diǎn)，如下圖所示。
網(wǎng)上的案例欣賞，出境購(gòu)物的用戶體驗(yàn)地圖，如下圖所示。
總結(jié)：
1. 我們制作用戶體驗(yàn)地圖，注重的是團(tuán)隊(duì)成員的洞察分析能力和對(duì)產(chǎn)品的思考能力，我們要用心思考產(chǎn)品設(shè)計(jì)中的核心用戶的痛點(diǎn)和產(chǎn)品設(shè)計(jì)中的機(jī)會(huì)點(diǎn)，我們要輸出一套符合用戶價(jià)值、商業(yè)價(jià)值和和產(chǎn)品功能價(jià)值的體驗(yàn)設(shè)計(jì)方案，以此解決用戶的體驗(yàn)問(wèn)題，把產(chǎn)品做的更好，讓用戶使用產(chǎn)品過(guò)程中，產(chǎn)生愉悅感。
2. 制作用戶體驗(yàn)地圖的價(jià)值是，不僅能使我們以“用戶視角”的維度去思考，引導(dǎo)團(tuán)隊(duì)和設(shè)計(jì)師去思考問(wèn)題并做好
產(chǎn)品的體驗(yàn)設(shè)計(jì)。同時(shí)我們也可運(yùn)用“全局性的設(shè)計(jì)思維” 去思考產(chǎn)品體驗(yàn)設(shè)計(jì)，去發(fā)現(xiàn)產(chǎn)品問(wèn)題并解決產(chǎn)品設(shè)計(jì)中遇到的體驗(yàn)問(wèn)題，讓我們產(chǎn)品帶給用戶的是：產(chǎn)品設(shè)計(jì)的可用性、好用性和易用性的價(jià)值。
文章來(lái)源：tob.design 作者：峻溪POINTV
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn