明年的設計方向是如何，本文分析2020年UI界面設計7大設計趨勢，旨在能夠幫助大家提前了解明年設計方向，提前做好設計儲備。
2019年接近尾聲，最近一直在研究數(shù)字設計領域的未來趨勢。從各大設計網(wǎng)站上觀察到一些最受喜愛的作品，從中研究發(fā)現(xiàn)未來的界面設計趨勢，包括今年一些受歡迎的設計系統(tǒng)，從中提取一些未來可能的設計風格走向。之前看過我文章的伙伴知道，我之前寫過一篇圖標趨勢的文章，里面就是探索明年趨勢走向。那么對于界面，同樣的我們需要提前掌握大致設計風格走向，為自家產(chǎn)品改版做一些設計儲備。
黑夜模式無疑是今年比較熱的一個設計方向，為什么這么說？首先是Google材料設計語言更新了，增加暗夜模式。同時今年Q3季度蘋果發(fā)布IOS13設計語言系統(tǒng)，里面增加暗夜模式。不用說后續(xù)很多APP應用都會跟隨兩大廠商更新這個黑夜模式設計方向。無疑2020年這個將會持續(xù)。黑夜模式出現(xiàn)為減少用戶眼睛疲勞，提升產(chǎn)品使用體驗。
Materials Design
IOS 13 Dark
IOS 13 Dark (宣傳視頻，由于視頻上傳麻煩，因此截圖)
MEDIUM
INSTAGRAM
今年下半年觀察到Facebook旗下的Messenger應用和前段時間雅虎更新他們家品牌語言的同時，也重新設計他們家所有產(chǎn)品。我們可以看到如下應用截圖，基本去分割線，通過留白區(qū)分層級。這樣的好處可以減少分割線對內(nèi)容的干擾，界面呼吸感增強，達到簡約設計的目的。
Messenger 和 Yahoo
McDonald`s
PINTEREST 和 VSCO
蘋果風一直盛行至今天，包括大圓角卡片設計、大標題、粗字體。蘋果今年剛剛更新的IOS13設計語言同樣的是增強了卡片設計。這種風格將會在2020年繼續(xù)盛行，因此作為設計師我們更應該提前去對這種趨勢熟練掌握。卡片設計作為承載內(nèi)容的容器，其實更適用今天移動互聯(lián)網(wǎng)的大方向，因為卡片可以作為一個容器封裝復雜的內(nèi)容，使得模塊層級區(qū)分明顯，適配性也是更強，更聚焦，來看下具體案例。
PINTEREST 和 APPSTORE
Pinterest是今年9月份左右剛更新的設計，圓角卡片大范圍的運用。
BEHANCE 和 MEDIUM
Medium對重點欄目在今年更新設計時候啟用了卡片。
為什么要說品牌穿透？Google 在系統(tǒng)設計語言里面增加圖形特征模塊，是什么？就是通過連接品牌元素到產(chǎn)品設計中。到今天很多應用已經(jīng)開始熟練掌握這種設計思路了，比如運用到圖標里面或者界面設計中。蘋果雖然沒有很明確公開說明，但是我們可以從蘋果家族設計語言可以看出，包括線下體驗店、手機硬件、包裝盒以及各種各種物料設計，都是一種白色語言設計風格。通過顏色與圖形特征做品牌區(qū)分，蘋果算是目前做的最好的，史無前例。那么這種趨勢在2020將會一直保持。
APPle體系產(chǎn)品與LOGO相粘性強，具有超強的記憶點
Google家族品牌穿透（由于視頻原因，此部分截圖）
IBM設計跟隨LOGO有一致基因
網(wǎng)格化是一切設計系統(tǒng)的基礎，Materials Design,Apple Design,IBM Design,Naver Design,等等這幾家在設計語言基礎上對網(wǎng)格研究與應用算是比較成熟的，Naver方形網(wǎng)格，Google的8px網(wǎng)格，IBM 2PX網(wǎng)格，蘋果其實沒有很強調(diào)他們家網(wǎng)格系數(shù)，其實我們可以細看他們已經(jīng)提到8px Grid 。因此網(wǎng)格化在2020將是非常重要的。
5G時代已經(jīng)到來，加上目前硬件升級，動效的普及已經(jīng)不再是難題。我們可以慢慢發(fā)現(xiàn)目前很多產(chǎn)品設計里面都開始加入動效，來提升產(chǎn)品體驗，同時動效也有很強的指導性質(zhì)。在某些場景下，使用動效能夠很好與用戶進行互動交流，因此在2020年動效的使用將會越來越多。
Google Tab Motion
E Google01
G 圖標動畫
washing-app-ui
細節(jié)動畫
隨著硬件升級，5G時代開始大面積推廣與普及，在應用程序里面使用3D動畫來展示產(chǎn)品是一個很不錯的選擇，3D更加貼近真實環(huán)境，貼近我們真實物理世界。
3D展示商品
3D登錄頁
3D Product Swipe
今天分析了2020年流行的7大設計趨勢，這些設計趨勢也是伴隨著外在關系一起存在的。比如5G來了，那么自然視頻領域肯定是未來值得期待，這就是為什么微信公眾號都開始流行小視頻也是一個原因。硬件升級自然能支持更多的設計元素融入產(chǎn)品里面。因此作為設計師我們要多觀察這個行業(yè)、多看、多思考，來掌握未來產(chǎn)品設計方向。希望本篇文章能帶給你一些新的觀點與啟發(fā)。
轉(zhuǎn)自：站酷-設計TNT
詳細解讀—函數(shù)和變量的聲明提升
一 - 聲明提升常見面試題
?我們先以幾道面試題開頭來引入，
?大家可以先給自己做出一個答案，然后再看文章的思路捋一捋喲。
來一道基礎的吧~
var a="Hello";
function test(){
alert(a);
var a="World";
alert(a);
}
test();
難度+1
var a = 1;
function outer(){
a = 2;
function inner(){
alert(a);
a = 4;
}
inner();
}
outer();
alert(a);
繼續(xù)加油
(function(){
f1();
f2();
var f1 = function(){};
function f2(){
alert(1);
}
})();
最后一道
(function () {
console.log(a);
var a=1;
function a() {
console.log("biu~");
}
})()
二 - 究竟什么是聲明提升？
引擎在解釋JS代碼之前，首先要對JS代碼進行編譯，其中編譯的一部分工作就是找到所有的聲明，包括變量和函數(shù)的所有聲明都會在任何代碼被執(zhí)行前首先被處理。
var a = 1這句話會被瀏覽器讀成 var a和a = 1兩句話執(zhí)行，其中var a會在編譯階段就先執(zhí)行了，而a = 1這段賦值代碼會在原地等待執(zhí)行階段。
console.log(a);
var a = 2;
上邊這段代碼，如果代碼按照順序由上自下執(zhí)行，那么執(zhí)行到console.log(a);時，a還沒有聲明,所以會包一個找不到變量a的錯，但是事實上，這句話打印了一個undefined，說明a被聲明了，但是沒有被賦值，那么結合上一段的文字，我們可以得出代碼實際運行的是這樣的：
var a;
console.log(a);
a = 2;
三 - 函數(shù)的提升
大家可能在書寫代碼的時候發(fā)現(xiàn)，無論函數(shù)封裝寫在前或者后，我們的函數(shù)調(diào)用都可以順利執(zhí)行。
fn1();//可以執(zhí)行
function fn1() {
console.log("hello");
}
為什么呢？其實函數(shù)聲明,包括函數(shù)的代碼塊都i會被提升，所以調(diào)用函數(shù)的時候，函數(shù)聲明已經(jīng)被執(zhí)行過了。
但是有個案例大家了解一下：
fn2();//報錯，fn2不是一個函數(shù)
var fn2 = function () {
console.log("world");
}
我們可以看到 以給匿名函數(shù)賦值的形式定義函數(shù)，只會提升函數(shù)聲明，但是函數(shù)表達式卻不會被提升。因為變量fn2被提升,但是并沒有賦值，我們書寫的fn2()無法運行，而拋出了異常。
以下就是實際執(zhí)行的順序：
var fn2;
fn2();
fn2 = function () {
console.log("world")
}
函數(shù)優(yōu)先提升
我們都知道了，函數(shù)聲明和變量聲明都會被提升，那么遇到這樣的情況會怎么辦？
fn3();
var fn3=function () {
console.log("fn3-1");
}
fn3();
function fn3() {
console.log("fn3-2");
}
哎呦，嘛情況，突然迷了?。?！
? 這個時候你就要考慮，同樣的一個變量名稱，到底是把var fn3給先提聲上去，再提升 fn3函數(shù)體？還是先提升 fn3函數(shù)體，再提升var fn3？？？其實都不對?。?！
? 答案是：函數(shù)會被優(yōu)先提升，但后才是變量提升，但是當函數(shù)提升后，然后發(fā)現(xiàn)還有一個變量聲明和函數(shù)聲明一樣的名稱，這個就是重復聲明，那么這個var fn3 是不生效直接忽略的。
所以實際代碼運行順序是：
function fn3() {
console.log("fn3-2");
}
fn3();//fn3-2
fn3=function () {//var fn3因為重復聲明被忽略
console.log("fn3-1");
}
fn3();//fn3-1
當然，我們還是建議再同一個作用域重復聲明是很爛的選擇
說在最后
再代碼作用域中的聲明，都會在代碼執(zhí)行前被首先處理，所有的聲明都會被移動到各自作用域的最頂端，這個過程就叫做聲明提升。
四 - 答案：
問題1：
var a="Hello";
function test(){
alert(a);
var a="World";
alert(a);
}
test();
實際執(zhí)行：
var a="Hello";
function test(){
//作用域有聲明a，聲明提升到這里
var a;
alert(a);//本作用域聲明a，所以不去使用父作用域的a，但是本作用域的a沒有賦值，所以彈出undefined
a="World";
alert(a);//賦值后 ，彈出world
}
test();
問題2：
var a = 1;
function outer(){
a = 2;
function inner(){
alert(a);
a = 4;
}
inner();
}
outer();
alert(a);
執(zhí)行結果：
var a = 1;
function outer(){
a = 2;
function inner(){
//本作用域沒有聲明a，所以沒有任何提升，直接執(zhí)行
alert(a); // 所以彈出 a為 2
a = 4;
}
inner();
}
outer();
alert(a);//只有全局聲明了a，所以所有作用域使用的都是全局的a，所以a最后被賦值為4 彈出4
問題3
(function(){
f1();
f2();
var f1 = function(){};
function f2(){
alert(1);
}
})();
實際執(zhí)行結果：
(function(){
function f2(){
alert(1);
}
var fn1;
f1();//提升后先執(zhí)行fn1(),但是fn1被提升的是變量不是函數(shù)，所以這里報錯，不是一個函數(shù)
f2();//上一句話報錯，這句話不再運行
f1 = function(){};
})();
問題4：
(function () {
console.log(a);
var a=1;
function a() {
console.log("biu~");
}
})()
實際執(zhí)行結果：
(function () {
function a() {
console.log("biu~");
}
console.log(a);//打印了a這個函數(shù)的函數(shù)體
a=1;//因為函數(shù)有限聲明提升，所以這里的var a被提升時，發(fā)現(xiàn)重復聲明，故被忽略了var a；
})()
這個是視覺通路的說明圖，是認知心理學的一個知識。外界信息從眼睛到LGN之后，會往兩個方向走，一個形成腹側通路另一個形成背側通路。也就是一個形成“你看到是什么”，另一個形成“這個東西離你有多遠”。
這是的研究，就是主視覺皮層那塊區(qū)域并不像我們想象的一樣，是一個簡單的、從下往上的一個回饋。它真正來自LGN的信息輸入只占到10%，LGN從眼睛獲得信息也不超過10%。你可以想一下眼睛到LGN，到大腦皮層形成視覺的過程。大腦皮層中的視覺信息90%是它自己產(chǎn)生的，只有10%是來自LGN。LGN當中視覺信息的90%由大腦皮層自己產(chǎn)生的，只有10%來自眼睛。
做一下乘法，你就會發(fā)現(xiàn)，即使是眼睛看到的數(shù)據(jù)信息完全進入大腦皮層，它至多只能占到10%，如果他不是至多10%的話，有可能眼睛實際進入大腦皮層的數(shù)據(jù)信息只有1%。也就是說大腦主要是在生產(chǎn)信息，而不是在接受信息。所以你應該把你的精力用于研究那90%左右的信息是怎么產(chǎn)生的、它是什么樣的規(guī)律。
本書的結構第一從設計實現(xiàn)角度來講比例構圖、構建頁面的具體結構、柵格系統(tǒng)、組織原則等等。
第二部分是主要的部分，從第八章一直到十六章是從認知智能的角度，就是你怎么處理信息的角度去做這個交互設計。第十章這里頭有一個叫模因論，模因論就是把模因類比成基因。
第十三章和第十六章寫的就更抽象一些，第十三章主要是講人工智能的基礎，第十四章是講應用，第十五章就是和今天話題有相關的地方，就是VR、5G這些，第十六章是我研究生畢業(yè)論文，我個人認為沒寫完，又寫了一遍，是從心理學角度去闡述，為什么我們設計和國外的設計是不一樣的。
我們先有一個感性認識，認知與UI設計有什么關系？這其中有兩點。
第一個就是古騰堡定律與內(nèi)隱記憶。古騰堡定律，大家都聽過吧，（注：該法則描述了一個理論：人的眼球移動規(guī)律趨向于從上到下，從左到右，在視覺區(qū)域中，左上角通常為視覺起始點，右下角為視覺終點，而右上和左下是視覺落盲點。）也就是F形閱讀。這是尼爾森·諾曼在2006年產(chǎn)出的一個結論，即人瀏覽頁面的方式會形成一個F型的路徑。
但是有個公司叫EyeQuant，他們是做一些眼動儀及其研究的。他們統(tǒng)計了大概是15萬張前六秒人的注意力的熱區(qū)圖，它形成了大概這個結果。
EyeQuant就說尼爾森·諾曼的結論可能不太對，它不是F型的，他給出了很多結果。
你會發(fā)現(xiàn)這個圖很多時候是居中或者是中間等等。于是EyeQuant公司的研究結論就是：有太多因素影響眼球運動，不用把F型法則當做金科玉律。他們在官網(wǎng)上發(fā)了一個帖子，這是他們這結論，底下是論文的網(wǎng)址，大家也可以自己看一下文章，判斷一下EyeQuant說的對不對。
我們來了解一下古騰堡定律，如果大家不了解，我先來解釋一下。古騰堡是一個德國人，他發(fā)明了獨立印刷術，他認為人的閱覽瀏覽頁面的規(guī)律是從左上到右下的。左上是第一注意區(qū)，然后是右下，另外兩個區(qū)域是最容易被人忽略掉的。
上方是熱力圖，大家可以看一下，這兩個圖其實是有關聯(lián)的，熱力圖和古城堡定律大家注意看，最關鍵的點都是左邊。比如當你做web導航的時候，你一般會把導航放到左上角，很少有人放在右上角。跟我們閱讀習慣是相關的。讀書寫字都是從左開始的，所以熱力圖表現(xiàn)出來并不是徹底的居中或者是在右下，左邊還是一個很重要的位置。第二點是2006年的互聯(lián)網(wǎng)產(chǎn)品形態(tài)和現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品形態(tài)是不同的，過了十幾年了，拿現(xiàn)在的數(shù)據(jù)說以前的事情，有效性是有限的。
另外，有幾個反例它是沒法解釋的。大家有沒有關注過阿拉伯語的網(wǎng)站，你會發(fā)現(xiàn)它的導航是倒過來的。我看了之后我以為是有個鏡子，它其實是正確的，因為阿拉伯文是從右向左書寫的。通過以上，我們可以認識到古騰堡定律其實還是起作用的，它是根據(jù)你的書寫的方向形成的。
有關網(wǎng)頁布局的規(guī)律，應該是：同時受到古騰堡定律以及產(chǎn)品自身因素的影響。那么EyeQuant公司做的那個研究有沒有價值呢？是有價值的，它確實是往中間偏了，但是這是和產(chǎn)品的特性有關，因為06年之后越來越多電商的頁面，包括純展示的東西越來越多了，居中構圖的情況也越來越多，很多吸引注意的圖片放到中心位置了，所以它會影響整個觀感。
古騰堡定律在認知心理學里實際就是內(nèi)隱記憶。內(nèi)隱記憶就是：無法通過有意識的過程而接觸的知識。舉個例子，騎自行車大家都會吧。如果我跟你說有本書教騎自行車，你看完了就能學會，這不可能對吧，你需要自己練習騎。你學會了之后，當你要教別人，你也沒辦法通過語言告訴他，你只能說你必須得練，這個就是內(nèi)隱記憶。
生活當中有一個體驗，我相信所有人都會有，就是不管是用是安卓還是iOS都會有一個問題，就是比如你把A左邊的應用刪了，iOS系統(tǒng)會讓后面的應用自動補位，它會把A應用推到第一個位置，結果就是你每一次想要打開A應用時候很容易點錯。這也是內(nèi)隱記憶在起作用。
這是內(nèi)隱記憶的分類，有四種。騎自行車與古騰堡定律和第一種程序性記憶比較相關。第二種是知覺表征系統(tǒng)，大家聽說過無意識設計吧，這就和知覺啟動是相關的。條件反射就不用說了，巴甫洛夫的狗玩搖鈴它就流口水。非聯(lián)想學習中的習慣化和敏感化是什么意思呢？就是比如說你家里有一個空氣凈化器，打開的時候你會感覺它發(fā)出的噪音很明顯，但是過一段時間你又不太注意它的噪音了，就是習慣化。
敏感化是什么呢？煙塵和污染的空氣非常刺激呼吸道，所以一旦霧霾 ，呼吸道不好的人就會非常敏感，非常難受。比如說北京的霧霾，一開始可能不太注意到它，但是在北京待十年的結果是只要看天，我就能估算出這個pm2.5是多少值，正負不超過50，非常精準。比如一看今天這個天氣情況，我猜污染指數(shù)有150，一查手機大概130左右。這就是敏感化，你對這個刺激的信息處理會變得更快。
畫表情的秘訣，這個是其中一個例子，它涉及到一塊腦區(qū)叫梭狀回面孔區(qū)。大家可以看一下，這些表情有一個什么樣的共同點。
大多數(shù)的表情是沒鼻子的，或者鼻子特別小。再看一下這兩張圖片，有什么明顯差異么？
這兩個照片差異非常明顯，這個叫撒切爾效應。這時候你感覺還行，兩個人可能眼睛不太一樣，但是當把照片導過來的時候，反差就特別大，你就感覺右邊那不是個人，對吧？
這叫面孔倒立效應，只有正立的時候，才能有效識別面孔。就是必須得形成倒三角你才能有效識別一張面孔。鼻子并不參與三角區(qū)的方向判定。
你會發(fā)現(xiàn)插座也會被當成表情，面孔倒立效應的基礎是部分神經(jīng)的特異化，部分神經(jīng)元是專門用來處理面部信息的，識別人的情緒對人的認知是很有作用的?？焖俚嘏袛嘁粋€人的情緒，對社會化動物來說非常關鍵。有一塊腦區(qū)專門處理人臉識別，識別情緒。
以上大家可以形成一個大概印象，就是認知心理學可能會和你的設計相關聯(lián)，也說明了認知科學對UI的指導性，這是我的一個觀點。右邊是它的邏輯事實，書中盡量去證明這個觀點。
第一，廣義的設計概念。想證明認知科學對UI設計的指導性，得先說清廣義設計概念。我對它的定義是解決問題的目的與恰當方式的綜合。
你想解決這個問題是吧？方式的綜合前面還有一個恰當，我強調(diào)這個恰當。
第一個先說他目的性，比如說你設計一個汽車、設計一個界面、設計一個流程，是有目的的，不是無目的的。第二是設計是解決問題的恰當手段，設計是你要找一個恰當?shù)慕鉀Q方法。比如你累了怎么辦，你可以造個沙發(fā)、設計個躺椅。還有各種各樣的方式，哪一種方式是最恰當?shù)姆绞?，是設計出來的。這都是各種各樣能解決你累了的一個手段，但是你一定要找到那個最合適的。
這個之后我們還要定義一下UI的概念，這也是我個人的觀點和定義。就是解決虛擬界面信息傳輸問題的目的與恰當方式的綜合。
我是交互設計師，我沒有用比如說交互或者視覺這個概念，因為我認為這個概念有些窄，并不是說我區(qū)分不了視覺設計師和交互設計師。別人問你如何區(qū)分交互設計師和UI設計的時候，你就用一句話就能區(qū)分：你和界面之間有沒有一次以上的信息互動？如果有，那就是交互要介入，如果沒有一次就夠了，基本就是視覺的活。
傳統(tǒng)設計的目的、主題和體驗公式。首先傳統(tǒng)設計處在兩個過程的中間，第一個是“人-自然“中間，也就是人造物，就是你要通過你設計的工具去改造自然。種個地、開個礦等，你設計這個東西是在告訴別人怎么用。比如說不能把門把手放到轉(zhuǎn)軸的內(nèi)側，他一定放到轉(zhuǎn)軸的外側，這個門把手就是在提示我們怎么去操作這門，怎么推這個門。這是基于材料及其加工工藝的造型理論。
另一個就是設計處在“人-人造物-他人“的認知過程中間。它所具有的特性是示能性與自我定位。比如說我穿衣服，你會發(fā)現(xiàn)我沒有一個紅色和綠色的衣服，我喜歡穿藍色，黑色等，這實際是對自己身份認識的一種構建，向別人傳達出一種信息的設計物。傳統(tǒng)設計都會包含這些信息，你住什么地方，穿什么衣服，看什么書，都會有這兩個作用。
這是史上特別著名的穿絲襪的潮男叫路易十四。你會發(fā)現(xiàn)這個東西就是在兩方面表達出傳統(tǒng)設計的作用，第一個就是示能性。高跟鞋的形狀一定是后邊開口前面是收口的，因為你要把腳放進去。高跟提高你的身高。這個執(zhí)杖寬頭的地方是用來放手的，窄頭的地方是用來杵地的。傳統(tǒng)設計的主題是基于材料及其加工工藝的造型理論與設計實踐，這是我的觀點。我本科是學工業(yè)設計的，讀研究生的時候也是學工業(yè)設計的，我發(fā)現(xiàn)我做的所有的事情都是圍繞造型和工藝的造型理論。
舉幾個例子，輪胎演化過程、手機演化過程，你會發(fā)現(xiàn)材料的變化，造型的變化。
再來看一個深刻的例子。
這是一個著名的女設計師設計的，她為什么能做成這個東西？是因為她做這個東西的時候，出現(xiàn)了新的數(shù)學工具來幫助建筑造型，很多原有的建筑學派不愿意用這套東西，但是她非常激進，要用的數(shù)學工具來處理這個造型，才能做成這個建筑。
包括大家現(xiàn)在坐的車，你會發(fā)現(xiàn)曲面的車越來越多，車越來越漂亮，是因為數(shù)字化之后，加工的工藝更好了，能做出特別漂亮的曲面。原來為什么紅旗特別貴？因為那是老師傅用錘子敲出來的，不是像現(xiàn)在數(shù)控技術就把它弄出來的。勞斯萊斯也都是敲出來的，所以很貴，想做很好看的曲面成本極高，但現(xiàn)在就成了很容易的一個事情。
傳統(tǒng)設計的體驗公式就是E=e*n，e是衰減的。e就是每一次使用的體驗，比如說手機，你拿到手機的時候是一個體驗，是一個e，用了多少次，n就是幾。比如說我做一個椅子，用一次是e，用了多少回，它的乘積是整個體驗。n是不會變的， e是唯一的關鍵，而且他每一次都一樣。所以傳統(tǒng)設計里對它的造型會非?？粗兀降妆憩F(xiàn)出什么東西，好不好用，會特別關鍵。
我再說一下UI設計的目的、主題和體驗公式，UI設計的目的和傳統(tǒng)設計不一樣的地方是，它示能性更主要，自我定位更次要。我舉一個例子，馬云想用支付寶，不好意思，他也得跟我們用的一樣。不管多有錢的人都好，還是只能用Facebook不太可能為這個人單獨設計出一款來。也就是說UI設計是絕對平等的，只能說買個皮膚，你可以花錢，但大多數(shù)情況下，它的主體功能是不區(qū)分消費能力的，所有人用的支付寶都是一樣。不管這個人多窮、多有錢。
所以UI設計更主要的是通過界面來告訴你這個東西怎么用，是比自我定位更重要的。所以我們主要考慮的是界面能不能告訴用戶是干嘛用的，怎么用，這是最關鍵的。這和傳統(tǒng)設計不一樣，傳統(tǒng)設計因為有材料成本的問題，一定會涉及到選擇和自我定位的關系的問題。
UI的設計體驗公式就是E=a*b*c*…*n。這里為什么用乘法而沒用加法呢？大家知道有一個叫迷失度的一個概念，它是形容網(wǎng)頁體驗中，如果a是零的話，后面做再好也沒有用。比如說用戶找不到入口，到界面這卡在這了，這界面如果是0.1，那后邊所有的轉(zhuǎn)化率就全是0.1乘以這個系數(shù)。所以它并不要求每一個頁面達到百分之百，但是它強調(diào)整體乘積一定是一個高值，比如說這個頁面的轉(zhuǎn)化率提高了，提高3%，下一頁面降低5%，它是一個乘積的關系，每個頁面都很重要，它是一個拉長的一個體驗公式。最后乘以一個使用次數(shù)。
我們再回到認知心理學，我家有三本到四本心理學的書，來看看他們每個人是怎么定義認知心理學的。
斯騰伯格所著的是一本賣得比較好的書，大家可以看一下，認知心理學規(guī)定了研究范疇是什么，這是斯滕伯格寫的，他認為認知心理學就是研究人如何覺知，學習、記憶和思考問題的。
下面這本書是三個人合著的，他們壓根沒有給認知心理學一個明確的定義，只是提到這是有關于思考者的心智的科學。但是他說的不是很具體，而是寫了一堆研究對象，你把它抽象一下，會發(fā)現(xiàn)關鍵詞實際和斯坦伯格的是一樣，覺知、學習、思考、語言。
再來看第三個，艾森克和基恩干脆就沒定義認知心理學是什么東西，他說現(xiàn)在這個東西是一個特別廣泛的研究領域。
這三本書里頭有兩本書的第二章叫認知神經(jīng)學，有一本是在第一章的第三部分叫認知神經(jīng)學。我原本為我的書取名叫《認知與UI設計》，就是這個原因。很難把認知心理學和認知神經(jīng)學切得特別開，它們的聯(lián)系實際是很廣泛的。
UI設計圍繞覺知、注意、記憶與識別會有一些簡單的例子。
視覺組織原則，這個是格式塔閉合原則，這是從神經(jīng)學層面解釋格式塔的閉合原則。就是有一個未封閉的圖形，大家可以看到左邊，你知道他是未封閉的，包括有那種特別的那種三角，有兩個半圓，三個半圓，我們會把它腦補成一個閉合的圖形，這個是有神經(jīng)學基礎的。
有個叫赫布定律，這個是什么意思呢？兩個神經(jīng)元如果彼此之間互相刺激，他的神經(jīng)的突觸就會變多，它表現(xiàn)在除了突觸增多還有髓鞘增厚，都會使神經(jīng)之間的聯(lián)系變得更緊。
細胞集合的定義就是，人對信息整個識別過程是這樣的，過去你接受過原始刺激，你會記住它，比如說右邊這個完整的圓，你第一次看到這個圓，會形成刺激，再看這個圓又形成刺激，它會形成一個完整的赫布集合。等你再看到左邊這個不完整的圓的時候，就是一個不完整的刺激，它會激活原來形成的赫布集合，讓你產(chǎn)生錯覺認為它是原來的完整的狀態(tài)。識別和記憶是一體的。記得越少，識別越快。
意識和注意的模型與用戶體驗是相關聯(lián)的。真正進入到意識的信息是少之又少的。因為人的視覺能看到的只是可見光。在一個很長的光譜中，視覺信息只占這么一點。人對視頻信息的感知還有個體偏向，人對紅黃藍的敏感程度是不一樣的，它只對部分色彩更敏感一些，更窄。
信息有一部分是無意識的，比如說心跳的聲音，在環(huán)境特別安靜的時候，你能聽見心跳的聲音，但是當你注意力在別的地方時，你會過濾掉它，心跳聲就不進入你的意識了，但它實際是一直在發(fā)生的。
你要建立一個概念，就是用戶能注意到的事情，是整個界面里頭很小的一部分，大部分他什么都記不住，因為他沒空。短時記憶的容量是非常少的，比如說讓你記電話號碼，一般大家都是以443或者344地記，會把它切割成幾個塊，這樣會更容易記一些。
下面這是《藝術與視知覺》這本書里的一個實驗。左上角的圖案是他們用來做實驗的圖。你會發(fā)現(xiàn)這個圖是一個特別擰巴的形狀，首先它是不閉合的，不是完整對稱的，設計師看到會非常不舒服。這個圖是怎么做實驗的呢？就是把這個圖給你閃一下，就給你0.2秒或者0.3秒?？赐曛笞屇慊貞?，回憶這個圖是怎么構成的？右邊這七種是大家回憶的，它有一個共同的特征，就是把它規(guī)律化。這個不是有意進行的，是你與生俱來的能力。把一個不規(guī)則的東西記成一個規(guī)則東西，是你本來的能力。
我們再看一下，我們把這個時間拉長，你會發(fā)現(xiàn)很有趣，第一個是字母A的演化。這原來是頭牛，公元前1800年恐怖谷銘文里的文字，長得像左上角第一個。后邊的人畫牛很費勁，識別它、記憶它很費勁。就把它簡化，簡化，最后就變成拉丁字母。每一次他都在丟失視覺信息，每次都在不停的丟失識別，使它更規(guī)整。26個字母基本都是按照這種原理出現(xiàn)的，只不過它是一個特別長時間，跨度上千年，變成這種結果。
第二個是中國的魚紋，這是李澤厚的書《美的歷程》里的截圖。你可以發(fā)現(xiàn)魚紋的演化過程也這樣，開始魚紋真的是條魚，后來這個魚變成對稱性了，上下對稱的。到最后它已經(jīng)不是魚了，花了幾百年時間變成這個樣子。
谷歌的logo也是一樣的規(guī)律。不停地進行簡化，不停地進行識別。識別和記憶是一體的。每次記憶時一定會丟失信息，不管記什么東西一定會丟信息。記憶的東西比看的東西更少，當再識別的時候是拿剩下的東西來識別。這也是和人的認知相關的。
要想研究一個東西，得有一個合理的思維的過程，才能產(chǎn)生正確的思維的結果。思維能力和思維形式會決定思維產(chǎn)出。
我們看一下概念和命題，這是柏拉圖的三段論。我舉個例子，大前提是希臘人是勇敢的人。小前提是雅典人是希臘人，結論是雅典人是勇敢的人！這是一個特別標準的三段論推理，大前提小前提，不停地縮小集合的范圍，得到這個結論。
但是問題是什么？這個語境里頭我沒有解釋這幾個概念：雅典人的概念是什么？如果你注意土耳其的地圖，你會發(fā)現(xiàn)愛琴海那一塊靠近土耳其大陸的很多島是希臘的，特洛伊現(xiàn)在應該是更靠近土耳其一些。雅典人的概念就是伯羅奔尼撒半島上一個地區(qū)的人叫雅典人，但整個希臘實際是一個特別寬泛的概念，它并不是原來的半島，而是把周邊很多島嶼，甚至靠近羅馬的島都擴到希臘地域里，所以這是一個問題。希臘人的概念又是什么？我也沒說。我盡管做了推理，我沒說勇敢的人的概念是啥。有個壞人在行兇，你用聲音制止了還是用行動，能不能作為判斷這個人是否勇敢的標準？在你說出一個推理命題的概念的一剎那，實際上已經(jīng)把這個東西表達出來，但是在這個命題里是沒有說的。
我說得有點繞，其實我想表達的意思是：做推理的時候，推理里的概念，你是不可能在這個推理里頭說出來的。你想把這個概念進行規(guī)定的時候，還得通過其他語言和其他概念來說這個概念。比如說我們學的數(shù)學幾何，是基于歐幾里得的五大公理，五大公設。有了這個東西，才有推理和判斷的基礎，它是先于命題存在的。如果不對UI進行定義，如果不對設計進行定義的話，我寫這本書就是一個很扯的一個事情，因為并沒有形成自己的觀點和基礎。只有形成觀點和基礎了，才能圍繞這個東西進行推理，哪些是合理的哪些是不合理的。先有概念和命題，才有后邊理論和假說。
要判斷一個理論靠不靠譜，需要符合邏輯三恰。
第一個要邏輯自洽，就是你不能自己打自己的臉，你需要自圓其說。事實與邏輯相符，就是一個觀點在你的學說里是兼容的，不能出現(xiàn)邏輯矛盾。
邏輯它恰是什么呢？你提出這個理論和其他理論不能產(chǎn)生矛盾，除非你能證明理論錯了，或者在某些條件不適用，這個理論才是靠譜的，你不能和原來既有的公理產(chǎn)生沖突。
邏輯續(xù)洽是什么？就是新的場景、新的案例用這個理論還能解釋的通滿足這三條才是好理論，缺一條都不行。
這一章是從邏輯的視角去看一看，這套理論對不對。從認知的角度考慮設計對不對。認知角度本身對不對。
第一個叫邏輯自洽，在認知理論內(nèi)部沒有矛盾。
我舉一個案例。這里有兩個圖，大家第一眼看上去它是怎么構成的？我用等式表示出來。會有人第一眼看上去認為它是最上方的方式或者是最下方的方式構成的嗎？沒有人會說這個圖形是用這兩個更復雜的方式構成的。但是你想沒想過，為什么你第一眼看上去就是按中間這兩個等式的方式構成的。因為這樣理解認知成本，如果把一個你沒見過的東西或者一個復雜的東西展示給你看，一定是按照你的記憶，還原成你接觸過的最簡單的一個構成。它會降低你認知的成本，如果記成奇怪的形狀，一定會使你記憶成本更高。
第二，認知一定是要符合演化論。
人們對演化論的誤解之一，就是認為越快越強越好，其實不是，而是適應。可能你更強、更聰明、更快，但是適應不了環(huán)境。
比如說為什么色盲基因還存在？
男性里頭大概有7%-10%，女的還少一點。按理來說我們應該認識更多色彩，為什么色盲還存在？外界信息變成視覺信息主要是靠視錐細胞，它比較密，是在中凹附近。眼動追蹤的時候，也主要靠中凹移動來看東西。視感細胞對色彩并不敏感，但是對明暗敏感。色盲在夜間視力很好，比如說晚上要偷襲獵物，或者是偷襲敵人，有色盲的部落會派出這些人，這些人夜間視力更好，會給種群帶來生存優(yōu)勢。所以色盲基因沒有消失是有意義的。非洲有一種鐮刀形紅細胞貧血病也是一個案例，擁有這個基因的人不容易得瘧疾。但是如果沒有瘧疾情況下，他容易貧血、容易患各種各樣的病。
現(xiàn)實視角的邏輯續(xù)洽，第一個就是能預測新的設計趨勢，第二是解釋新的實驗現(xiàn)象。
第一個是扁平化是趨勢而不是潮流。這個用左上角的一個圖一下就能解釋清楚。雞尾酒的杯子一定是透明的。我們做的界面很多時候就是那雞尾酒的杯子，大家能理解扁平化是什么原因了吧？因為網(wǎng)速越來越快了，各種各樣酷炫的東西越來越多，信息量越來越大，就相當于雞尾酒里有顏色的酒，顏色越來越多。如果用一個不透明的杯子，或者透明度不夠好的杯子，看不出里頭的顏色。所以扁平化是一個趨勢，不是潮流。
這是我前兩天看到的一個帖， 2019年發(fā)的一個論文，叫圖標樣式對可用性的影響。大家可以自己去翻這個論文，很有意思。
測試結果是：最不易識別的是最右邊這組。中間是識別度比較高的，這個解釋特別簡單：過度簡化導致識別困難。意思是簡化信息的時候，不是一減到底就是好。比如說前面的例子從牛到A的過程，你不能上來就給埃及人拿了一個A，他不認識。Instagram改版為什么受到熱議？因為它突然之間扁平了，沒有漸進過程，咣嘰就變成一個特別扁平的圖標，它的紋理和它的圖形都發(fā)生了變化，所以識別上會特別不舒服。我舉過一個例子，比如說你慈祥的老母親整成了張柏芝或者是高圓圓，你一定不會認為這是一件好事，你會感覺很難接受。
第二個測試結果是這次識別度高的是右邊的，中間的識別度是低的。測試結果是多數(shù)面型icon識別比線型icon更容易識別。這個是格式塔的描述方式，有陰影的圖形只在內(nèi)部成立，外部行成不了輪廓。線性圖形則正好相反，是兩向輪廓。
比如說我們看蘋果圖標，你不管它是從第一版還是到最后一版，他都是面性圖標。
因為蘋果是個球，它是個實體，這個輪廓在蘋果內(nèi)部成立，就類似于這種感覺。后邊是有陰影的，有外部的，因為你要聚焦，后邊東西會虛化掉。它只在內(nèi)部成立。
面形圖標普遍比線性圖標識別要快，只有三個反例，只有三個反例需要解釋。
第一個圖，咱先不看虛擬的，你會發(fā)現(xiàn)這兩個圖標線性識別度高，原因是因為它表面有條紋，這兩個圖中圾桶和鑰匙都有條紋，所以用線性來表達的時候，效果更好。其他圖標的實體都是曲面，不是條紋。沒有參差不齊的邊緣，而是曲面，是單向輪廓形成的。因此線型圖標更容易辨認。
感受野是人的視錐細胞和神經(jīng)節(jié)細胞的一個聯(lián)系，不管刺激中心區(qū)域、刺激整體、刺激邊緣都會有反應。和感受野關聯(lián)的是神經(jīng)節(jié)細胞，人類眼睛有很多神經(jīng)節(jié)細胞，但這些細胞不是完全均等的點，而是一組點圍繞一個中心形成一個組合一樣的結構，外邊一圈組合，中間有幾個組合。
下圖的這個就類似視網(wǎng)膜上的結構，神經(jīng)節(jié)也是類似這種結構。當環(huán)境同時變亮的時候，刺激比較弱。同時變黑的時候，刺激也比較弱。只有在交界點的時候，反應最強烈。想象一下，當我們看到一個物體的輪廓的時候，細胞對它的反應最大，就形成一條邊。這個實際上就是卷積核，人工智能卷積核就是模擬感受野形成的一個原理。
內(nèi)積就是矩陣內(nèi)的數(shù)字一個一個互相乘，乘完之后形成一個結果。卷積核模擬感受野的原理是：數(shù)字矩陣就相當于一個卷積核從最左邊一直掃到最后一排，會形成不同的數(shù)值。比如說這個是我們要看的圖像，比如說黑的會計算成1，白的會計算成0。用卷積核掃一遍就相當于在模擬人眼睛看到的東西，黑白區(qū)域之間就會形成一條邊，就是我們所看見的輪廓。
這就是我們眼睛看到東西的原理，比如說我們現(xiàn)在做視覺識別，也是用這種特別簡單的技術。卷積核實際是模擬人的感受野。
關鍵點是神經(jīng)學是怎么解釋面形圖標和線性圖標的不同的。當你看到全亮的東西和全暗東西的時候是有差異的。卷積核掃一圈之后，計算機會認為這個里頭的東西和外頭東西是一樣的。對它刺激是一樣的。所以只對邊緣有認識。但人的神經(jīng)比較特殊，它自帶一個數(shù)值，它能識別出暗和亮。所以當你看一個面形圖標的時候，你對輪廓里面黑色部分的認知和對輪廓外白色認知是不一樣的，這叫單側型的輪廓，而不是雙側型的。當你看到線性圖標的時候，類似于計算機的感覺，但是你看到面形圖標的時候，是人的感覺。
文章來源：UXren
流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產(chǎn)品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產(chǎn)品游戲題型的設計過程。
流利說®少兒英語，目標是幫助該年齡段的用戶建立發(fā)音自信，并且能對英語學習產(chǎn)生持續(xù)的興趣?；趦和澩娴奶煨?，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。
△ 收集糖果
△ 警察抓小偷
△ 切水果
△ 消滅細菌
游戲為輔，教育為主。
對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：
接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經(jīng)驗。
在開始設計前，我們對 3-8 歲兒童進行了調(diào)研，發(fā)現(xiàn)處于該年齡段的用戶，大多有以下特性：
基于以上幾點，我們便總結出以下幾點設計方法。
視覺形式即題型玩法
以拼圖題為例，此題的目標是檢測孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會覺得這道題既不會玩，也不好玩。但如果在視覺表現(xiàn)上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進而引導孩子的操作。
場景故事要有視覺連貫性
「游戲」（此處的「游戲」代指游戲題型）結束后有一個和故事設定相關的結束畫面，承接前面的操作，讓整個「游戲」過程能呈現(xiàn)出相對比較完整的體驗，以增強小朋友在「游戲」過程中的沉浸感。
△ 游戲操作：切水果
△ 游戲結尾：切水果榨果汁
由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會習慣性地去點擊界面上所有吸引他們的東西。因此我們需要為不同層級的元素設置強烈的視覺區(qū)分，明確告訴他們哪些元素是可以點擊的，需要被關注的，哪些元素是不可互動的。
提高教學內(nèi)容易識別性
游戲題型的設計方法通常是使用游戲的形式去包裝常規(guī)的教學題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設計恰到好處的游戲容器去承載教學內(nèi)容，使其兼具教學內(nèi)容的識別性又不會影響「游戲」體驗。此處我們嘗試去拉開游戲元素和教學內(nèi)容的視覺差距──在畫面中的視覺焦點處擺放教學內(nèi)容，而游戲元素僅作為背景或者容器，用于襯托教學內(nèi)容，并且盡量選取不易和教學內(nèi)容發(fā)生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設計需要有一定的適配性。
△ 適配文字
△ 適配圖片
△ 適配文字和圖片
對于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標。在該場景下，游戲容器的視覺設計重點在于外形的刻畫，簡化內(nèi)部細節(jié)，以此將孩子的視覺重點聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對文字的大小也進行了適配。
△ 1-12 個字符──文字大小 88
△ 13-25 個字符──文字大小 76
△ 26-45 個字符──文字大小 62
背景畫面的層級感
在游戲題型中，有不少故事性強，空間延續(xù)性高的設定。為加強畫面的運動感和空間感，視覺輸出時，我們額外增加了前景層，利用前景圖片打造視差效果，以增強整個背景的層次感。
前景圖片的設置，同時也能解決適配不同屏幕尺寸時，背景區(qū)域顯示差異所帶來的視覺問題。
縱向運動的情況下，兩側的圖形如果設置在背景里，當適配到短屏幕的時候就無法呈現(xiàn)出來。
而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。
克制地使用過于明亮的色彩
用研時，我們發(fā)現(xiàn)孩子們?nèi)菀妆活伾涯康臇|西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。
合理的反饋包括符合交互邏輯的及時反饋和適當?shù)恼摲答?。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。
及時反饋制造小驚喜
我們在產(chǎn)品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。
例如：當用戶點擊拼圖題選項時，會出現(xiàn) IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。
適當?shù)恼摲答?/strong>
大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數(shù)字時代兒童設計》
對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續(xù)玩下去的欲望。
△ 正向反饋1：IP 形象高興地跳出
△ 正向反饋2：IP 形象高興地跳出 + 打分星星
△ 正向反饋3：IP 形象鼓掌
考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態(tài)，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產(chǎn)生挫敗感，鼓勵性的反饋為宜。
△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢
反饋動畫的設置也需要考慮用戶的可接受程度，慎用具有攻擊性動效。如下圖，錯誤反饋時 IP 形象會受到攻擊而感冒，上線后發(fā)現(xiàn)孩子們對這種反饋表現(xiàn)出了害怕的心理。
以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。
不會寫代碼的設計也是好開發(fā)。
視覺稿如果不能被很好的實現(xiàn)落地，那再好的設計稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實現(xiàn)程度這一問題上，我們也走過不少彎路，和開發(fā)經(jīng)過幾輪的探索，最終形成了一份適合我們團隊的輸出模式。
在整個開發(fā)環(huán)節(jié)，設計師主要承擔一部分的動畫開發(fā)工作。在和開發(fā)對接的過程中，我們主要使用的軟件是：
△ CocosCreator
△ SourceTree
開發(fā)搭建完框架后，設計在 CocosCreator上，完成部分元素的動畫，再用 SourceTree 向開發(fā)提交動畫代碼。開發(fā)最后通過代碼將每個動畫串聯(lián)起來形成一個完整的動畫。
△ CocosCreator 動畫編輯器界面截圖
題型動畫連貫且細節(jié)多，單靠視頻 demo 是無法協(xié)助開發(fā)精準實現(xiàn)設計效果的。為了解決這個問題，我們建立了對設計落地具有指導性意義的文檔──適配標注文檔和動畫標注文檔。
1. 適配標注文檔
用戶機型調(diào)查結果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據(jù)上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設計稿，并規(guī)定以 780×360 為設計基準，對另外兩個尺寸進行適配。
標注內(nèi)容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節(jié)調(diào)整標注，方便開發(fā)在做適配的時候能準確還原設計稿的布局。
2. 動畫標注文檔
該文檔主要是對動畫和音效的詳細說明。每個題型的動畫會被拆分，以最小可拆分動畫為一個標注對象，對其標注時長、具體的動畫效果以及運動曲線數(shù)值等，方便開發(fā)地還原 demo 的設計效果。詳細的標注文檔不僅方便了開發(fā)，更為后續(xù)測試和視覺走查降低了不少溝通成本。
游戲化題型的設計，需要更多的從用戶的角度出發(fā)去思考和權衡游戲與教學的平衡性。對于兒童產(chǎn)品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。
文章來源：優(yōu)設
頁面轉(zhuǎn)場有哪些類型？該注意什么細節(jié)呢？
不知各位產(chǎn)品經(jīng)理、UE/UI設計師在設計產(chǎn)品時，除了考慮交互說明、功能狀態(tài)、頁面邏輯等之外，是否會關注 頁面跳轉(zhuǎn)間的“轉(zhuǎn)場效果”？？？
可能有人會覺得：“不就普通的界面左移和右移，需要講這個嗎？” 但是如果我問：“為什么要有頁面轉(zhuǎn)場？有哪些轉(zhuǎn)場類型？要注意哪些細節(jié)？” 你能一五一十地回答出來么？
畢竟頁面間的轉(zhuǎn)場過渡，是用戶體驗我們產(chǎn)品最直接的感知形式，也是人機交互中最重要的傳達要素。另外市面上還沒有系統(tǒng)性介紹'頁面轉(zhuǎn)場'的文章，所以今天就寫下這方面的干貨，希望能給你帶來一些收獲。
Part1：頁面轉(zhuǎn)場的作用
頁面轉(zhuǎn)場最基礎的作用，無疑是拉通頁面與頁面間的使用流程，使產(chǎn)品的信息內(nèi)容、功能交互等有一個承接點。但除了這個打底作用外，頁面轉(zhuǎn)場還可以體現(xiàn)出多個方面的作用：
1.加深用戶印象
一些新奇獨特、區(qū)別于競品的轉(zhuǎn)場效果，完全可以加深用戶對自己產(chǎn)品的印象，留下特定的產(chǎn)品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新，進一步提升了產(chǎn)品的競爭力。
2.更有儀式感、增加代入感
就如《每日故宮》在查看文物時，會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍，很符合該產(chǎn)品獨有的特色。另外一些日志產(chǎn)品，會利用“翻書”的轉(zhuǎn)場效果來加強用戶的代入感、趣味性。
3.突出重點用戶
產(chǎn)品里的重點用戶（如vip用戶、平臺作家）都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外，特殊的頁面轉(zhuǎn)場也能給帶來一種‘專門定制’的感知。
像《人人都是產(chǎn)品經(jīng)理》APP，在打開普通頁面和專欄作家的文章時，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識寶庫’的進場感受。
Part2：頁面轉(zhuǎn)場類型
說完頁面轉(zhuǎn)場的作用后，下面就是你可能感興趣的內(nèi)容：頁面轉(zhuǎn)場到底有哪些類型？（以移動端頁面轉(zhuǎn)場為例，PC端亦可復用該類型）
1.翻書/頁、折疊
翻書/頁：指模仿現(xiàn)實生活中書本和紙張的切換效果，是一種擬物化的轉(zhuǎn)場方式。常用于雜志、小說、日記等產(chǎn)品中。
折疊：根據(jù)水平或者垂直線為中心點，將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉(zhuǎn)場。
2.3D翻轉(zhuǎn)、立體旋轉(zhuǎn)
3D翻轉(zhuǎn)：將二維的頁面以3D形式（類似魔方）進行切換。適合體現(xiàn)產(chǎn)品功能的“空間感”。
立體旋轉(zhuǎn)：根據(jù)水平或者垂直線為中心點，將整個頁面進行立體旋轉(zhuǎn)。適合體現(xiàn)另一個“頁面空間”的效果，用于容納更多的信息內(nèi)容。
3.拉伸、上下合并
拉伸：根據(jù)水平或者垂直線為中心點，將頁面進行拉長消失處理，可分為’內(nèi)拉‘與’外拉‘兩種方式。
上下合并：將即將進場的頁面分為上下兩部分進場，使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。
4.扭曲、頁面融合
扭曲：根據(jù)水平或者垂直線為中心點，將整個頁面進行旋轉(zhuǎn)、壓縮等處理，適合給用戶傳達一種’異次元、空間傳送‘的效果。
頁面融合：根據(jù)頁面的某個視覺元素，通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉(zhuǎn)場是最能體現(xiàn)兩個頁面之間的‘關聯(lián)性’，也是過渡效果最和諧的方式之一。
5.彈出、縮放
彈出：根據(jù)頁面的某個視覺元素，將其彈入到下一個頁面中去。適合突出某視覺元素，將其重點彈出展示。
縮放：將整個頁面自大而小或者自小而大進行縮放過渡，很適合大封面的轉(zhuǎn)場。
6.移入、淡化
這是我們最常見、最普通的轉(zhuǎn)場方式了，大部分的產(chǎn)品使用這兩種轉(zhuǎn)場方式。移入有’上下左右‘4個進入方向，而一直使用’左移進入、右移退出‘的轉(zhuǎn)場，最能體現(xiàn)產(chǎn)品功能的使用流程。
Part3：轉(zhuǎn)場時應該考慮的細節(jié)
各種效果只是提供一種選擇而已，根據(jù)自己的產(chǎn)品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉(zhuǎn)場過程中的細節(jié)點，是交互設計師不能忽略的事項。
1.頁面間的關聯(lián)性
頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯(lián)的，為了增加用戶轉(zhuǎn)場后的代入感、避免產(chǎn)生認知錯誤（覺得進錯頁面），可以考慮用相同的背景色、視覺元素等加強頁面間的關聯(lián)。
比如之前QQ游戲中心，將前頁的背景圖沿用到后頁中，讓后頁的游戲描述更有代入感，用戶第一時間就覺得'來對地方了～'
2.進退方向
頁面的進入和退出盡量是成反方向的，即頁面從右加載邊移入，退出時則從左邊移出。否則混亂無序地進退方向，會使用戶的操作流和視覺流感到不適。
3.返回邏輯的不同
用戶習以為常的頁面返回習慣，一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實現(xiàn)該方式）。因“返回/關閉”圖標在視覺上帶有明確的指向性，用戶知道點擊后到底是“返回”還是“關閉”。
但不同頁面類型的屏幕摳邊，對應的含義和邏輯卻是各不相同的：
原生頁面：屏幕摳邊是返回上一級頁面
就如朋友朋友圈一樣，原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態(tài)，亦可以重新加載頁面。
H5頁面：屏幕摳邊是關閉整個鏈接
無論在H5里操作了多少內(nèi)容/頁面，屏幕摳邊都會關閉整個H5鏈接，再次進入時只能重新加載頁面，操作記錄都會被清空。
4.更的返回方式
除了點擊“返回/關閉”圖標、屏幕摳邊外，可以根據(jù)自己產(chǎn)品的頁面形態(tài)，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里，采取“下滑“的形式返回上級頁面。
原因在于：該詳情頁是以大圖+文字的結構描述食物，而大圖的展示區(qū)域很接近于手指的“黃金操作區(qū)”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內(nèi)、最快速地讓用戶返回首頁瀏覽其他內(nèi)容。
5.是否保存/清除用戶操作
頁面間的跳轉(zhuǎn)和退出，勢必會對當前頁面內(nèi)容和狀態(tài)產(chǎn)生影響。當用戶想要離開時，不同的產(chǎn)品都會選擇不同的退出策略。舉個特別典型的例子：微信朋友圈。
當退出朋友圈再重新進入時，是會停留在退出前的頁面位置，方便繼續(xù)瀏覽好友內(nèi)容。
而退出朋友圈后，入口處提示有好友新動態(tài)時，再次進入朋友圈則回到頂部初始位置，以保證可以第一時間獲取好友動態(tài)，滿足用戶日常的社交需求。
每日故宮在這一方面的處理也很用心：無論用戶在詳情頁里進行了什么操作（屏幕伸縮或滑動位置），退出頁面時都會清除用戶的操作痕跡，還原到文物的初始狀態(tài)，給人帶來一種“保護文物、細心嚴謹”的心理感受。
轉(zhuǎn)自：站酷-和出此嚴
導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執(zhí)行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規(guī)則是你不能打破的。以下是創(chuàng)建出色的移動導航的四個重要原則：
簡單
首先，最重要的是，導航系統(tǒng)必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據(jù)移動用戶最有可能執(zhí)行的任務來確定移動應用程序的內(nèi)容和導航的優(yōu)先級。
可見
正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用，而不僅僅是在我們預期用戶需要導航的時候。
明確
導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉(zhuǎn)到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買；此元素將指導他們執(zhí)行適當?shù)牟僮鳌?
一致性
所有視圖的導航系統(tǒng)應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內(nèi)容互動。
大拇指設計法則
史蒂文·霍伯在對移動設備使用情況的研究中發(fā)現(xiàn)，49%的人依靠一個拇指在手機上完成任務。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區(qū)域，并與拇指交互。綠色表示用戶可以輕松到達的區(qū)域；黃色表示需要伸展的區(qū)域；紅色表示需要用戶改變握住設備的方式的區(qū)域。
在設計時，要考慮到你的應用程序?qū)⒃诙喾N環(huán)境中使用；即使是喜歡使用雙手握手機的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達到目標。
另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。
最后，也是很重要的一點，要注意點擊目標區(qū)域的大小。Microsoft 建議 你將觸摸目標區(qū)域大小設置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標區(qū)域。
觸摸目標區(qū)域不應小于44像素到48像素（或11毫米到13毫米），包括填充。
標簽欄
許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。
底部導航設計的三個關鍵因素
導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。
1.僅顯示最重要的目的地
避免在底部導航中使用五個以上的訪問標簽，因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且，隨著每個額外的選項卡顯示，就會增加了應用程序的復雜性。
避免使用五個以上的目的地。
避免滾動內(nèi)容
對于小屏幕來說，部分隱藏的導航似乎是一個非常好的解決方案，因為你不必擔心有限的屏幕空間，只需將導航選項放入一個可滾動的選項卡即可。但是，可滾動的內(nèi)容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。
該避免在選項卡欄中放置太多項目，以防止用戶滾動，然后才能單擊所需的選項。
2.明確當前位置
應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置?！拔以谀睦铮俊笆怯脩粲龅降幕締栴}之一。用戶應該第一眼就知道如何從A點轉(zhuǎn)到B點，而不需要任何外部引導。你應該適當?shù)氖褂靡曈X提示（圖標、標簽和顏色），這樣導航就不需要任何解釋。
圖標
底部導航應該與圖標的內(nèi)容進行適當?shù)慕Y合。盡管有一些用戶熟悉的通用圖標，但大多數(shù)圖標代表的功能包括搜索，電子郵件，打印等。
在適用于Android的先前版本的Bloom.fm應用程序中，很難理解用戶的當前位置。
顏色
避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反，遵循這個簡單的規(guī)則，用應用程序的主顏色為當前的底部導航（包括圖標和任何顯示的文本標簽）著色。
左：不同顏色的圖標使你的應用看起來像一棵圣誕樹。右：只使用一種原色。
這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態(tài)。
如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。
左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。
文本標簽
文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。
避免換行，截斷和縮小文本標簽。
菜單元素應易于理解。用戶應該能夠理解點擊元素時會發(fā)生什么。
目標尺寸
使目標區(qū)域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數(shù)量?；蛘撸瑢⑺械撞繉Ш絼幼髟O置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。
顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）
標簽上的微標
你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。
考慮對標簽欄圖標加微標以保持通俗易懂。
3.使導航不言而喻
良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內(nèi)容也沒有用。
行為
每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。
每個底部導航圖標必須通向目標目的地。
上面的控件是工具欄而不是底部導航。
保持一致性
盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩(wěn)定性的感覺。
當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內(nèi)容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。
Dropbox應用的空狀態(tài)頁面
滾動時隱藏標簽欄
如果屏幕是滾動的，則當人們滾動查找新內(nèi)容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。
標簽導航可以在滾動時動態(tài)消失。
視覺愉悅
避免使用橫向運動在視圖之間轉(zhuǎn)換?；顒右晥D和非活動視圖之間的過渡應使用淡入淡出動畫。
圖形圖標：創(chuàng)意導航
屏幕尺寸是將你的觀點傳達給用戶的主要挑戰(zhàn)。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節(jié)省屏幕空間。
Google Material Design，浮動操作按鈕
Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區(qū)別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。
像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。
Tumblr具有漂亮的圖形圖標以及適當?shù)臉撕?。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。
然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內(nèi)容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作
而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。
導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現(xiàn)這些目標。為用戶設計。一個產(chǎn)品對他們來說越容易使用，他們使用它的可能性就越大。
轉(zhuǎn)自：UI中國-Coldrain1
有讀者說，面試的時候面試官提到了一個問題，但不知道怎么回答。
這個問題是：實心圖標和空心圖標的區(qū)別是什么？
這個問題網(wǎng)上的討論挺多的，國內(nèi)外很多設計師都有針對這個問題給出一些自己的看法。
01.
最早是 2013 年，設計師 Aubrey Johnson 在 Medium 上吐槽了一段關于 iOS 7 標簽欄圖標的問題。說是 iOS 大范圍使用線性/空心圖標來讓用戶辨別產(chǎn)品功能，會讓用戶在認知理解上更為費力。
他給出了這樣一張圖，來說明人腦對于圖形的認知負荷主要來自于圖形的線性結構。我查了一下這位設計師的背景，看到他除了是設計師，同時還是一名開發(fā)者，而且有認知心理學的學習經(jīng)歷。所以能承認這個論點是有一定道理的。
于是另一位設計師 Curt Arledge, 在 2014 年，專門為這個「假說」做了一次實驗。實驗的內(nèi)容是將一組相同圖標，分為實心和空心，給用戶做測試。結論是相同一組圖標，用戶識別實心圖標的速度比識別空心圖標的速度要快上 0.1 秒，其中有個別空心圖標的識別速度甚至比實心圖標還快。
我仔細翻閱了這個實驗的所有資料和參考文獻，并對這名設計師提出的很多參考做了閱讀，過程中，我發(fā)現(xiàn)這個實驗有一個細節(jié)問題。
就是，在給用戶做這組圖標測試之前，他會給這些用戶先熟悉一下這些圖標，以及圖標所代表的意思，然后隨機呈現(xiàn)讓他們做判斷。
這里的問題是，如果這樣來分析，它的實驗條件就不僅僅是具備識別要求，還要具備記憶要求。
有些圖標比較具象，傳遞的意思很清晰，不需要記憶，一看就知道，哦，這是「鑰匙」；而有些圖標就沒那么容易理解，在看到的那一瞬間是判定不出來是什么的，所以要想一下，剛才記的圖標里有什么，然后才想起來，哦，它是「標簽」。
所以情況可能是，用戶在判斷過程中，因為忘了這個圖標所表達的意思，于是想了一下，那識別速度肯定就慢了，無論是實心還是空心。
所以這個實驗算不上很嚴謹。我有看到一些設計團隊跟自媒體設計師拿這個實驗結論來斷定說，實心圖標與空心圖標的識別是不存在差異的。這個說法也是不太可取的。
在這個問題上，可以說 Aubrey Johnson 通過設計原則以及認知心理得出的圖形識別理論，是更站得住腳的。也就是，空心圖標，在用戶的認知理解上需要調(diào)動更多神經(jīng)元來進行識別。用人話說，就是識別起來比實心圖標費力。
畢竟連人家蘋果公司也認同了他的說法，現(xiàn)在的 iOS 系統(tǒng)自帶產(chǎn)品，也都把空心圖標改成了實心圖標了。
02.
我在梳理完這些資料后，在想，圖標除了讓用戶知道它是什么之外，還有什么作用呢？
于是延伸出了一個新的理解，就是，實心圖標比空心圖標更具定位與引導的作用。
上面提到，用戶對于圖標的認識在于識別，不是記憶?？吹剿袷裁矗团卸ㄊ鞘裁?；而不是看到它想起來應該叫什么。
所以識別圖標除了知道它所表達的是什么意思之外，還要知道它在引導著什么。
比如，標簽欄圖標就那么 2-5 個，用戶在使用 App 的過程中，不需要強行記憶或特地去識別，只是點擊的時候眼睛一掃而過，來判斷自己要進入哪個功能頁。這時候，它是給用戶做定位引導用的。
我相信現(xiàn)在在看文章的你，一下子也想不起來微信底部四個圖標的樣子吧？或者對于微信的「發(fā)現(xiàn)」頁，也不能理解為什么要用那樣一個圖標來表示。
但是當你看到它，并知道它在底部第三個位置，點擊之后，還看到了里面有朋友圈，就知道它代表的是什么意思了。
所以用戶在這層理解上，不會真正去思考它為什么是「發(fā)現(xiàn)」，而是直接通過以往對于它的理解，通過識別位置來理解它里面有哪些功能，比如里面有「朋友圈」。
再通過變化來提示用戶，比如從空心圖標變到實心圖標。所以在一些規(guī)范里，它也只是告訴說，空心和實心圖標在標簽欄中的區(qū)別就是，空心是未選中狀態(tài)，而實心是選中狀態(tài)。因為實心圖標所示的色塊，更符合選中且定位于某個功能頁的一種說明提示。
再用顏色把選中的圖標凸顯出來，讓人在視覺上更聚焦，讓用戶知道自己目前選擇的是它。
在視覺領域里有個說法是，色塊比形狀更容易抓人眼球。再是具有紋理的色塊，比純色快更吸引眼球。
空心圖標就是形狀，實心圖標就是色塊。
所以用戶在看到圖標的時候，不僅僅可以知道它所表達的意思，還能知道自己目前所處的位置。那么相比起來，色塊當然會比形狀更有優(yōu)勢。
就好像在商場里，突然尿急，看到這樣的廁所指示牌，你怎么想？
我相信不管是男生還是女生，第一反應都是往右走吧？
所以第二個結論是，實心圖標比空心圖標更有引導性。
03.
或許有人會問，那空心圖標就沒用了么？不是的。
其實上面有提到，空心圖標相比實心圖標更難識別，那么人就需要調(diào)動更多神經(jīng)來對空心圖標進行確認。所以它能豐富頁面的視覺效果，也就是裝飾感。
舉個例子：
上面兩組圖，能看出來第一組整體看起來會比較抓眼，因為圖標比較重；但是第二組看起來會清晰得多，因為用戶的視線會聚焦在內(nèi)容上。
在這個例子中，圖標作為裝飾類信息，不應該搶了內(nèi)容的風頭，它在這里只是增加了排版基調(diào)與內(nèi)容分層的作用。而設計師應該在這里引導用戶去看內(nèi)容本身，而不是去看圖標。
裝飾是給內(nèi)容做裝飾，而不是給自己做裝飾，如果是給自己做裝飾，那就沒必要用線條來表現(xiàn)了。各位設計師應該懂我意思。
當然也有用實心圖標來填充列表信息的，這也跟頁面風格有關，比如你產(chǎn)品風格全是扁平塊狀內(nèi)容的，突然有了一部分空心圖標，也會顯得很不搭。
我只是在這里用這個例子來說明，空心圖標的引導性沒有實心圖標強，所以更多會被用來當做裝飾品。
而當空心圖標與實心圖標同時出現(xiàn)，并表達同一類信息時，它們就是一種信息的兩種狀態(tài)，比如選中與未選中。
所以我們現(xiàn)在能看到很多產(chǎn)品依然在標簽欄保留著空心圖標。
除了風格因素的影響外，它還能體現(xiàn)出被選中狀態(tài)的功能圖標，并讓其它圖標起到裝飾性的作用。
04.
從后面延伸的兩個點來說，圖標的作用還是很明顯的。我這里只探討了兩類圖標的部分區(qū)別，并著重講解了實心圖標的作用。它們之間還是有很多其它內(nèi)容可以深究的。
我想說的是，即使用戶對熟悉的圖標，無論是實心還是空心，在實驗環(huán)境下的識別速度上無差異，但是兩類圖標對信息所承載的意思確實是不同的。
于是，本篇文章的結論：
轉(zhuǎn)自
導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執(zhí)行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規(guī)則是你不能打破的。以下是創(chuàng)建出色的移動導航的四個重要原則：
簡單
首先，最重要的是，導航系統(tǒng)必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據(jù)移動用戶最有可能執(zhí)行的任務來確定移動應用程序的內(nèi)容和導航的優(yōu)先級。
可見
正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用，而不僅僅是在我們預期用戶需要導航的時候。
明確
導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉(zhuǎn)到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買；此元素將指導他們執(zhí)行適當?shù)牟僮鳌?
一致性
所有視圖的導航系統(tǒng)應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內(nèi)容互動。
大拇指設計法則
史蒂文·霍伯在對移動設備使用情況的研究中發(fā)現(xiàn)，49%的人依靠一個拇指在手機上完成任務。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區(qū)域，并與拇指交互。綠色表示用戶可以輕松到達的區(qū)域；黃色表示需要伸展的區(qū)域；紅色表示需要用戶改變握住設備的方式的區(qū)域。
在設計時，要考慮到你的應用程序?qū)⒃诙喾N環(huán)境中使用；即使是喜歡使用雙手握手機的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達到目標。
另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。
最后，也是很重要的一點，要注意點擊目標區(qū)域的大小。Microsoft 建議 你將觸摸目標區(qū)域大小設置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標區(qū)域。
觸摸目標區(qū)域不應小于44像素到48像素（或11毫米到13毫米），包括填充。
標簽欄
許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。
底部導航設計的三個關鍵因素
導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。
1.僅顯示最重要的目的地
避免在底部導航中使用五個以上的訪問標簽，因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且，隨著每個額外的選項卡顯示，就會增加了應用程序的復雜性。
避免使用五個以上的目的地。
避免滾動內(nèi)容
對于小屏幕來說，部分隱藏的導航似乎是一個非常好的解決方案，因為你不必擔心有限的屏幕空間，只需將導航選項放入一個可滾動的選項卡即可。但是，可滾動的內(nèi)容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。
該避免在選項卡欄中放置太多項目，以防止用戶滾動，然后才能單擊所需的選項。
2.明確當前位置
應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置?！拔以谀睦?？“是用戶遇到的基本問題之一。用戶應該第一眼就知道如何從A點轉(zhuǎn)到B點，而不需要任何外部引導。你應該適當?shù)氖褂靡曈X提示（圖標、標簽和顏色），這樣導航就不需要任何解釋。
圖標
底部導航應該與圖標的內(nèi)容進行適當?shù)慕Y合。盡管有一些用戶熟悉的通用圖標，但大多數(shù)圖標代表的功能包括搜索，電子郵件，打印等。
在適用于Android的先前版本的Bloom.fm應用程序中，很難理解用戶的當前位置。
顏色
避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反，遵循這個簡單的規(guī)則，用應用程序的主顏色為當前的底部導航（包括圖標和任何顯示的文本標簽）著色。
左：不同顏色的圖標使你的應用看起來像一棵圣誕樹。右：只使用一種原色。
這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態(tài)。
如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。
左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。
文本標簽
文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。
避免換行，截斷和縮小文本標簽。
菜單元素應易于理解。用戶應該能夠理解點擊元素時會發(fā)生什么。
目標尺寸
使目標區(qū)域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數(shù)量。或者，將所有底部導航動作設置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。
顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）
標簽上的微標
你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。
考慮對標簽欄圖標加微標以保持通俗易懂。
3.使導航不言而喻
良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內(nèi)容也沒有用。
行為
每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。
每個底部導航圖標必須通向目標目的地。
上面的控件是工具欄而不是底部導航。
保持一致性
盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩(wěn)定性的感覺。
當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內(nèi)容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。
Dropbox應用的空狀態(tài)頁面
滾動時隱藏標簽欄
如果屏幕是滾動的，則當人們滾動查找新內(nèi)容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。
標簽導航可以在滾動時動態(tài)消失。
視覺愉悅
避免使用橫向運動在視圖之間轉(zhuǎn)換?；顒右晥D和非活動視圖之間的過渡應使用淡入淡出動畫。
圖形圖標：創(chuàng)意導航
屏幕尺寸是將你的觀點傳達給用戶的主要挑戰(zhàn)。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節(jié)省屏幕空間。
Google Material Design，浮動操作按鈕
Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區(qū)別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。
像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。
Tumblr具有漂亮的圖形圖標以及適當?shù)臉撕?。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。
然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內(nèi)容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作
而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。
導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現(xiàn)這些目標。為用戶設計。一個產(chǎn)品對他們來說越容易使用，他們使用它的可能性就越大。
wen'z
不知各位產(chǎn)品經(jīng)理、UE/UI設計師在設計產(chǎn)品時，除了考慮交互說明、功能狀態(tài)、頁面邏輯等之外，是否會關注 頁面跳轉(zhuǎn)間的“轉(zhuǎn)場效果”？？？
可能有人會覺得：“不就普通的界面左移和右移，需要講這個嗎？” 但是如果我問：“為什么要有頁面轉(zhuǎn)場？有哪些轉(zhuǎn)場類型？要注意哪些細節(jié)？” 你能一五一十地回答出來么？
畢竟頁面間的轉(zhuǎn)場過渡，是用戶體驗我們產(chǎn)品最直接的感知形式，也是人機交互中最重要的傳達要素。另外市面上還沒有系統(tǒng)性介紹'頁面轉(zhuǎn)場'的文章，所以今天就寫下這方面的干貨，希望能給你帶來一些收獲。
Part1：頁面轉(zhuǎn)場的作用
頁面轉(zhuǎn)場最基礎的作用，無疑是拉通頁面與頁面間的使用流程，使產(chǎn)品的信息內(nèi)容、功能交互等有一個承接點。但除了這個打底作用外，頁面轉(zhuǎn)場還可以體現(xiàn)出多個方面的作用：
加深用戶印象
一些新奇獨特、區(qū)別于競品的轉(zhuǎn)場效果，完全可以加深用戶對自己產(chǎn)品的印象，留下特定的產(chǎn)品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新，進一步提升了產(chǎn)品的競爭力。
更有儀式感、增加代入感
就如《每日故宮》在查看文物時，會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍，很符合該產(chǎn)品獨有的特色。另外一些日志產(chǎn)品，會利用“翻書”的轉(zhuǎn)場效果來加強用戶的代入感、趣味性。
突出重點用戶
產(chǎn)品里的重點用戶（如vip用戶、平臺作家）都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外，特殊的頁面轉(zhuǎn)場也能給帶來一種‘專門定制’的感知。
像《人人都是產(chǎn)品經(jīng)理》APP，在打開普通頁面和專欄作家的文章時，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識寶庫’的進場感受。
Part2：頁面轉(zhuǎn)場類型
說完頁面轉(zhuǎn)場的作用后，下面就是你可能感興趣的內(nèi)容：頁面轉(zhuǎn)場到底有哪些類型？（以移動端頁面轉(zhuǎn)場為例，PC端亦可復用該類型）
翻書/頁、折疊
翻書/頁：指模仿現(xiàn)實生活中書本和紙張的切換效果，是一種擬物化的轉(zhuǎn)場方式。常用于雜志、小說、日記等產(chǎn)品中。
折疊：根據(jù)水平或者垂直線為中心點，將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉(zhuǎn)場。
3D翻轉(zhuǎn)、立體旋轉(zhuǎn)
3D翻轉(zhuǎn)：將二維的頁面以3D形式（類似魔方）進行切換。適合體現(xiàn)產(chǎn)品功能的“空間感”。
立體旋轉(zhuǎn)：根據(jù)水平或者垂直線為中心點，將整個頁面進行立體旋轉(zhuǎn)。適合體現(xiàn)另一個“頁面空間”的效果，用于容納更多的信息內(nèi)容。
拉伸、上下合并
拉伸：根據(jù)水平或者垂直線為中心點，將頁面進行拉長消失處理，可分為’內(nèi)拉‘與’外拉‘兩種方式。
上下合并：將即將進場的頁面分為上下兩部分進場，使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。
扭曲、頁面融合
扭曲：根據(jù)水平或者垂直線為中心點，將整個頁面進行旋轉(zhuǎn)、壓縮等處理，適合給用戶傳達一種’異次元、空間傳送‘的效果。
頁面融合：根據(jù)頁面的某個視覺元素，通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉(zhuǎn)場是最能體現(xiàn)兩個頁面之間的‘關聯(lián)性’，也是過渡效果最和諧的方式之一。
彈出、縮放
彈出：根據(jù)頁面的某個視覺元素，將其彈入到下一個頁面中去。適合突出某視覺元素，將其重點彈出展示。
縮放：將整個頁面自大而小或者自小而大進行縮放過渡，很適合大封面的轉(zhuǎn)場。
移入、淡化
這是我們最常見、最普通的轉(zhuǎn)場方式了，大部分的產(chǎn)品使用這兩種轉(zhuǎn)場方式。移入有’上下左右‘4個進入方向，而一直使用’左移進入、右移退出‘的轉(zhuǎn)場，最能體現(xiàn)產(chǎn)品功能的使用流程。
Part3：轉(zhuǎn)場時應該考慮的細節(jié)
各種效果只是提供一種選擇而已，根據(jù)自己的產(chǎn)品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉(zhuǎn)場過程中的細節(jié)點，是交互設計師不能忽略的事項。
頁面間的關聯(lián)性
頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯(lián)的，為了增加用戶轉(zhuǎn)場后的代入感、避免產(chǎn)生認知錯誤（覺得進錯頁面），可以考慮用相同的背景色、視覺元素等加強頁面間的關聯(lián)。
比如之前QQ游戲中心，將前頁的背景圖沿用到后頁中，讓后頁的游戲描述更有代入感，用戶第一時間就覺得'來對地方了～'
進退方向
頁面的進入和退出盡量是成反方向的，即頁面從右加載邊移入，退出時則從左邊移出。否則混亂無序地進退方向，會使用戶的操作流和視覺流感到不適。
返回邏輯的不同
用戶習以為常的頁面返回習慣，一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實現(xiàn)該方式）。因“返回/關閉”圖標在視覺上帶有明確的指向性，用戶知道點擊后到底是“返回”還是“關閉”。
但不同頁面類型的屏幕摳邊，對應的含義和邏輯卻是各不相同的：
原生頁面：屏幕摳邊是返回上一級頁面
就如朋友朋友圈一樣，原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態(tài)，亦可以重新加載頁面。
H5頁面：屏幕摳邊是關閉整個鏈接
無論在H5里操作了多少內(nèi)容/頁面，屏幕摳邊都會關閉整個H5鏈接，再次進入時只能重新加載頁面，操作記錄都會被清空。
更的返回方式
除了點擊“返回/關閉”圖標、屏幕摳邊外，可以根據(jù)自己產(chǎn)品的頁面形態(tài)，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里，采取“下滑“的形式返回上級頁面。
原因在于：該詳情頁是以大圖+文字的結構描述食物，而大圖的展示區(qū)域很接近于手指的“黃金操作區(qū)”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內(nèi)、最快速地讓用戶返回首頁瀏覽其他內(nèi)容。
是否保存/清除用戶操作
頁面間的跳轉(zhuǎn)和退出，勢必會對當前頁面內(nèi)容和狀態(tài)產(chǎn)生影響。當用戶想要離開時，不同的產(chǎn)品都會選擇不同的退出策略。舉個特別典型的例子：微信朋友圈。
當退出朋友圈再重新進入時，是會停留在退出前的頁面位置，方便繼續(xù)瀏覽好友內(nèi)容。
而退出朋友圈后，入口處提示有好友新動態(tài)時，再次進入朋友圈則回到頂部初始位置，以保證可以第一時間獲取好友動態(tài)，滿足用戶日常的社交需求。
每日故宮在這一方面的處理也很用心：無論用戶在詳情頁里進行了什么操作（屏幕伸縮或滑動位置），退出頁面時都會清除用戶的操作痕跡，還原到文物的初始狀態(tài)，給人帶來一種“保護文物、細心嚴謹”的心理感受。
- 結尾 -
好了，關于’頁面轉(zhuǎn)場‘的話題就先寫到這，各位根據(jù)自己的產(chǎn)品特性、想要傳達的交互理念等選擇合適的方式即可。下面是總結筆記：
文章來源：UI中國
在年復一年的電商促銷節(jié)的渲染下，如今618、雙11儼然成為全國最大的線上狂歡節(jié)。而在狂歡節(jié)中擔任著重要角色的主會場，承擔著為各分會場分發(fā)流量的重要使命。與此同時，大促的頁面設計也越來越趨向于同質(zhì)化，大多基于以往的經(jīng)驗沉淀，少有突破。在這樣的背景下，設計師不僅需要考慮如何滿足商業(yè)需求，更要兼顧用戶的體驗感受。本文將通過多次主會場設計實戰(zhàn)中沉淀下的經(jīng)驗與教訓，以京東微信手Q購物入口的年貨主會場為例，深入探討如何在成熟產(chǎn)品中做突破設計。
1. 頁面結構與動線逐漸趨于穩(wěn)定
主會場設計不斷進化和演變，從以往簡單的會場入口展示，到會場+品牌+單品+關鍵詞的綜合內(nèi)容展示。雖然視覺風格不同，但無論從結構上還是體驗上來看，本質(zhì)都相差不大。
2. 需要更豐富的詮釋品牌價值與用戶感知
在消費升級的大環(huán)境下，消費者的消費能力/品牌/品質(zhì)在全面升級，此時需要更加注重品牌價值與內(nèi)涵的塑造，精準化傳遞用戶感知。而主會場現(xiàn)有模式以大促營銷為主，重點突出促銷賣貨氛圍和類目分流，品牌價值與用戶感知的傳遞較為薄弱。
3. 既要效率分流，也要逛起來（成交）
分流坑位與效率的提升，在一定程度上會降低會場的成交轉(zhuǎn)化，如何平衡二者之間的關系，在設計上需要平衡把握。
在電商設計中，我們需要把握很重要的一點就是：平衡商業(yè)目標與用戶體驗之間的關系。設計目標的制定，需要我們對主會場的商業(yè)訴求與用戶訴求進行深入了解，才能制定有理有據(jù)的設計目標。
因電商環(huán)境的特點，主會場設計需要以商業(yè)訴求為思考起點，為商業(yè)價值賦能，輔助其商業(yè)目標的達成。因此，在策劃階段，設計師應該提前加入討論，和業(yè)務方一起梳理并明確業(yè)務訴求。因京東大促節(jié)奏時間長的特點，節(jié)奏規(guī)劃上會分為預熱、品類、高潮三個時間，而針對不同的時期，主會場的業(yè)務訴求也會略有變化，但整體差別不大。
會場分流
大促期間，主會場作為流量矩陣中心，若只通過主會場一個頁面來滿足用戶需求是不太可能的，因此的會場分流是核心的商業(yè)訴求目標。
提升成交轉(zhuǎn)化
雖然主會場的核心目標是分流，但隨著大促策劃的逐漸深化，提升流量成交轉(zhuǎn)化率，賦能主會場價值最大化也是需要考慮的重要因素。
會場預約
京東大促節(jié)奏具有時間長的特點，節(jié)奏規(guī)劃上會分為預熱、品類、高潮三個時期。如何保障品類日-品類會場的流量曝光，為會場預約也是主會場設計需要考慮的重要因素。
主會場最終面對的還是用戶，服務好用戶才能使其產(chǎn)生價值，并最終實現(xiàn)商業(yè)目標。根據(jù)對以往大促設計的用戶及數(shù)據(jù)反饋進行深入剖析，可大致分為新用戶及老用戶兩種類型，并進一步對用戶特征/訴求等方面進分析整理出用戶角色卡。
通過以上分析，總結出以下三大核心用戶訴求。
撿便宜薅羊毛
大促期間，用戶一般通過購物首頁、社交分享、外部投放等入口進入主會場，無目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來尋找折扣，撿便宜薅羊毛心理加重，但也相對理性。
快速篩選
面對越來越復雜的電商大促內(nèi)容與玩法，用戶需要一個更簡單、更的會場為他們傳達促銷氛圍與優(yōu)惠。
個性化推薦
個性化算法基礎上，用戶對自己強相關的內(nèi)容更加感興趣。
通過對商業(yè)訴求與用戶目標的充分解讀，在主會場設計中我們需要在兩者之間找到平衡點，來更好的兼顧商業(yè)與體驗。最終將今年京東微信手Q購物入口的年貨主會場的核心設計目標設定為：打造極簡用戶體驗，提升用戶專屬感知。
設計策略的制定能夠有效幫助我們始終貫徹核心設計目標來探尋解決方案，根據(jù)前面的設計分析，定義出本次年貨節(jié)主會場的五大設計策略：用戶專屬感知、化繁為簡，整合、多場景可復用、年味春節(jié)、多緯度多場景。
1. 頁面動線設計
主會場作為大促版圖中的流量矩陣中心，堪稱絕對 C 位。在向用戶傳遞大促氛圍及專屬感知的同時，又要滿足效率分流及成交等目標，同時還要引導用戶參與各種互動，這需要構建合理的頁面動線。本次主會場頁面動線設計劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節(jié)奏引導用戶瀏覽。
2. 首屏-頭部設計
主會場頭部作為門面擔當，承載著向用戶傳遞主題訴說與促銷氛圍的功能。隨著運營需求的不斷增加，以及頭部資源利用率等問題，頭部設計不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會場推薦、活動推薦、預約時間軸、互動入口、優(yōu)惠券等。在有限的空間里如何進行內(nèi)容展現(xiàn)和傳達，本次年貨節(jié)將通過內(nèi)容重組和層級劃分來進行實現(xiàn)。
1. 首屏-頭部設計
精準化營銷下的千人千面，用戶對自己強相關的內(nèi)容更加感興趣。大促環(huán)境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗？我們根據(jù)用戶屬性進行新老用戶切分，結合日?；顒訑?shù)據(jù)驗證整理出：猜你喜歡商品、購物車降價商品、BI 拼購商品、BI 會場等四類內(nèi)容，打造用戶專屬年貨節(jié)模塊。
2. 中間-樓層設計
類型繁雜、內(nèi)容眾多的中部樓層設計，承擔著 50+ 分會場曝光分流的重要使命。我們把 50+ 分會場劃分為 9 大品類，每個品類一個樓層進行內(nèi)容組合設計，包括：優(yōu)惠券、品類主會場、分會場入口、品牌曝光、單品曝光、熱搜詞等內(nèi)容。樓層順序根據(jù) BI 進行展示，讓用戶即使在內(nèi)容繁雜的情況下也能快速定位自己感興趣的內(nèi)容。
3. 尾部-猜你喜歡設計
長尾理論是網(wǎng)絡時代興起的一種新理論，當商品的銷售成本急劇降低時，幾乎任何以前看似需求極低的產(chǎn)品，只要有賣，都會有人買。這些需求和銷量不高的產(chǎn)品所占據(jù)的共同市場份額，可以和主流產(chǎn)品的市場份額相比，甚至更大。簡單了解長尾的含義后，可以清晰的知道主會場頁面中加入長尾設計的原因：利用互聯(lián)網(wǎng)移動端頁面無限延長的框架，進行更多貨品的曝光，來留住剩余未跳轉(zhuǎn)流量，進行商品售賣來實現(xiàn)價值最大化。在長尾內(nèi)容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費轉(zhuǎn)化。
1. 今日必買模塊設計
因京東大促品類日節(jié)奏性曝光的特點，主會場的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個體差異化需求的情況下，又能降低設計、開發(fā)成本？本次年貨節(jié)主會場對今日必買模塊進行了組件化設計。
除了今日必買模塊，品類樓層的設計也遵循了這一設計原則。
1. 輕互動設計
如何讓用戶深度參與會場并形成記憶點？會場的互動設計是很好的方法。通過輕量的互動方式，引導用戶參與并拿到獎勵的同時，滿足商業(yè)價值的需要。本次年貨節(jié)主會場從用戶角度出發(fā)，通過：做任務贏大獎、分享贏京豆、新年紅包、明星拜年等四個互動玩法，有節(jié)奏的投放在年貨節(jié)的不同時期，形成用戶記憶點。
有些地方雖略有遺憾，但整體反饋不錯。成交、UV 跳轉(zhuǎn)率、UV 價值等指標顯著提升，其中 UV 跳轉(zhuǎn)率、UV 價值均為近兩年大促主會場最高值。因涉及敏感數(shù)據(jù)，這里就不再一一詳述。
通過對 19 年年貨主會場設計的詳細解讀，相信堅持閱讀到這里的小伙伴們對「如何在成熟產(chǎn)品中做突破設計」已經(jīng)有了深入的了解，希望我的這些思考能夠給你在工作中帶來一些幫助。
藍藍設計的小編 http://sillybuy.com