這個是視覺通路的說明圖，是認知心理學的一個知識。外界信息從眼睛到LGN之后，會往兩個方向走，一個形成腹側通路另一個形成背側通路。也就是一個形成“你看到是什么”，另一個形成“這個東西離你有多遠”。
這是的研究，就是主視覺皮層那塊區域并不像我們想象的一樣，是一個簡單的、從下往上的一個回饋。它真正來自LGN的信息輸入只占到10%，LGN從眼睛獲得信息也不超過10%。你可以想一下眼睛到LGN，到大腦皮層形成視覺的過程。大腦皮層中的視覺信息90%是它自己產生的，只有10%是來自LGN。LGN當中視覺信息的90%由大腦皮層自己產生的，只有10%來自眼睛。
做一下乘法，你就會發現，即使是眼睛看到的數據信息完全進入大腦皮層，它至多只能占到10%，如果他不是至多10%的話，有可能眼睛實際進入大腦皮層的數據信息只有1%。也就是說大腦主要是在生產信息，而不是在接受信息。所以你應該把你的精力用于研究那90%左右的信息是怎么產生的、它是什么樣的規律。
本書的結構第一從設計實現角度來講比例構圖、構建頁面的具體結構、柵格系統、組織原則等等。
第二部分是主要的部分，從第八章一直到十六章是從認知智能的角度，就是你怎么處理信息的角度去做這個交互設計。第十章這里頭有一個叫模因論，模因論就是把模因類比成基因。
第十三章和第十六章寫的就更抽象一些，第十三章主要是講人工智能的基礎，第十四章是講應用，第十五章就是和今天話題有相關的地方，就是VR、5G這些，第十六章是我研究生畢業論文，我個人認為沒寫完，又寫了一遍，是從心理學角度去闡述，為什么我們設計和國外的設計是不一樣的。
我們先有一個感性認識，認知與UI設計有什么關系？這其中有兩點。
第一個就是古騰堡定律與內隱記憶。古騰堡定律，大家都聽過吧，（注：該法則描述了一個理論：人的眼球移動規律趨向于從上到下，從左到右，在視覺區域中，左上角通常為視覺起始點，右下角為視覺終點，而右上和左下是視覺落盲點。）也就是F形閱讀。這是尼爾森·諾曼在2006年產出的一個結論，即人瀏覽頁面的方式會形成一個F型的路徑。
但是有個公司叫EyeQuant，他們是做一些眼動儀及其研究的。他們統計了大概是15萬張前六秒人的注意力的熱區圖，它形成了大概這個結果。
EyeQuant就說尼爾森·諾曼的結論可能不太對，它不是F型的，他給出了很多結果。
你會發現這個圖很多時候是居中或者是中間等等。于是EyeQuant公司的研究結論就是：有太多因素影響眼球運動，不用把F型法則當做金科玉律。他們在官網上發了一個帖子，這是他們這結論，底下是論文的網址，大家也可以自己看一下文章，判斷一下EyeQuant說的對不對。
我們來了解一下古騰堡定律，如果大家不了解，我先來解釋一下。古騰堡是一個德國人，他發明了獨立印刷術，他認為人的閱覽瀏覽頁面的規律是從左上到右下的。左上是第一注意區，然后是右下，另外兩個區域是最容易被人忽略掉的。
上方是熱力圖，大家可以看一下，這兩個圖其實是有關聯的，熱力圖和古城堡定律大家注意看，最關鍵的點都是左邊。比如當你做web導航的時候，你一般會把導航放到左上角，很少有人放在右上角。跟我們閱讀習慣是相關的。讀書寫字都是從左開始的，所以熱力圖表現出來并不是徹底的居中或者是在右下，左邊還是一個很重要的位置。第二點是2006年的互聯網產品形態和現在互聯網產品形態是不同的，過了十幾年了，拿現在的數據說以前的事情，有效性是有限的。
另外，有幾個反例它是沒法解釋的。大家有沒有關注過阿拉伯語的網站，你會發現它的導航是倒過來的。我看了之后我以為是有個鏡子，它其實是正確的，因為阿拉伯文是從右向左書寫的。通過以上，我們可以認識到古騰堡定律其實還是起作用的，它是根據你的書寫的方向形成的。
有關網頁布局的規律，應該是：同時受到古騰堡定律以及產品自身因素的影響。那么EyeQuant公司做的那個研究有沒有價值呢？是有價值的，它確實是往中間偏了，但是這是和產品的特性有關，因為06年之后越來越多電商的頁面，包括純展示的東西越來越多了，居中構圖的情況也越來越多，很多吸引注意的圖片放到中心位置了，所以它會影響整個觀感。
古騰堡定律在認知心理學里實際就是內隱記憶。內隱記憶就是：無法通過有意識的過程而接觸的知識。舉個例子，騎自行車大家都會吧。如果我跟你說有本書教騎自行車，你看完了就能學會，這不可能對吧，你需要自己練習騎。你學會了之后，當你要教別人，你也沒辦法通過語言告訴他，你只能說你必須得練，這個就是內隱記憶。
生活當中有一個體驗，我相信所有人都會有，就是不管是用是安卓還是iOS都會有一個問題，就是比如你把A左邊的應用刪了，iOS系統會讓后面的應用自動補位，它會把A應用推到第一個位置，結果就是你每一次想要打開A應用時候很容易點錯。這也是內隱記憶在起作用。
這是內隱記憶的分類，有四種。騎自行車與古騰堡定律和第一種程序性記憶比較相關。第二種是知覺表征系統，大家聽說過無意識設計吧，這就和知覺啟動是相關的。條件反射就不用說了，巴甫洛夫的狗玩搖鈴它就流口水。非聯想學習中的習慣化和敏感化是什么意思呢？就是比如說你家里有一個空氣凈化器，打開的時候你會感覺它發出的噪音很明顯，但是過一段時間你又不太注意它的噪音了，就是習慣化。
敏感化是什么呢？煙塵和污染的空氣非常刺激呼吸道，所以一旦霧霾 ，呼吸道不好的人就會非常敏感，非常難受。比如說北京的霧霾，一開始可能不太注意到它，但是在北京待十年的結果是只要看天，我就能估算出這個pm2.5是多少值，正負不超過50，非常精準。比如一看今天這個天氣情況，我猜污染指數有150，一查手機大概130左右。這就是敏感化，你對這個刺激的信息處理會變得更快。
畫表情的秘訣，這個是其中一個例子，它涉及到一塊腦區叫梭狀回面孔區。大家可以看一下，這些表情有一個什么樣的共同點。
大多數的表情是沒鼻子的，或者鼻子特別小。再看一下這兩張圖片，有什么明顯差異么？
這兩個照片差異非常明顯，這個叫撒切爾效應。這時候你感覺還行，兩個人可能眼睛不太一樣，但是當把照片導過來的時候，反差就特別大，你就感覺右邊那不是個人，對吧？
這叫面孔倒立效應，只有正立的時候，才能有效識別面孔。就是必須得形成倒三角你才能有效識別一張面孔。鼻子并不參與三角區的方向判定。
你會發現插座也會被當成表情，面孔倒立效應的基礎是部分神經的特異化，部分神經元是專門用來處理面部信息的，識別人的情緒對人的認知是很有作用的?？焖俚嘏袛嘁粋€人的情緒，對社會化動物來說非常關鍵。有一塊腦區專門處理人臉識別，識別情緒。
以上大家可以形成一個大概印象，就是認知心理學可能會和你的設計相關聯，也說明了認知科學對UI的指導性，這是我的一個觀點。右邊是它的邏輯事實，書中盡量去證明這個觀點。
第一，廣義的設計概念。想證明認知科學對UI設計的指導性，得先說清廣義設計概念。我對它的定義是解決問題的目的與恰當方式的綜合。
你想解決這個問題是吧？方式的綜合前面還有一個恰當，我強調這個恰當。
第一個先說他目的性，比如說你設計一個汽車、設計一個界面、設計一個流程，是有目的的，不是無目的的。第二是設計是解決問題的恰當手段，設計是你要找一個恰當的解決方法。比如你累了怎么辦，你可以造個沙發、設計個躺椅。還有各種各樣的方式，哪一種方式是最恰當的方式，是設計出來的。這都是各種各樣能解決你累了的一個手段，但是你一定要找到那個最合適的。
這個之后我們還要定義一下UI的概念，這也是我個人的觀點和定義。就是解決虛擬界面信息傳輸問題的目的與恰當方式的綜合。
我是交互設計師，我沒有用比如說交互或者視覺這個概念，因為我認為這個概念有些窄，并不是說我區分不了視覺設計師和交互設計師。別人問你如何區分交互設計師和UI設計的時候，你就用一句話就能區分：你和界面之間有沒有一次以上的信息互動？如果有，那就是交互要介入，如果沒有一次就夠了，基本就是視覺的活。
傳統設計的目的、主題和體驗公式。首先傳統設計處在兩個過程的中間，第一個是“人-自然“中間，也就是人造物，就是你要通過你設計的工具去改造自然。種個地、開個礦等，你設計這個東西是在告訴別人怎么用。比如說不能把門把手放到轉軸的內側，他一定放到轉軸的外側，這個門把手就是在提示我們怎么去操作這門，怎么推這個門。這是基于材料及其加工工藝的造型理論。
另一個就是設計處在“人-人造物-他人“的認知過程中間。它所具有的特性是示能性與自我定位。比如說我穿衣服，你會發現我沒有一個紅色和綠色的衣服，我喜歡穿藍色，黑色等，這實際是對自己身份認識的一種構建，向別人傳達出一種信息的設計物。傳統設計都會包含這些信息，你住什么地方，穿什么衣服，看什么書，都會有這兩個作用。
這是史上特別著名的穿絲襪的潮男叫路易十四。你會發現這個東西就是在兩方面表達出傳統設計的作用，第一個就是示能性。高跟鞋的形狀一定是后邊開口前面是收口的，因為你要把腳放進去。高跟提高你的身高。這個執杖寬頭的地方是用來放手的，窄頭的地方是用來杵地的。傳統設計的主題是基于材料及其加工工藝的造型理論與設計實踐，這是我的觀點。我本科是學工業設計的，讀研究生的時候也是學工業設計的，我發現我做的所有的事情都是圍繞造型和工藝的造型理論。
舉幾個例子，輪胎演化過程、手機演化過程，你會發現材料的變化，造型的變化。
再來看一個深刻的例子。
這是一個著名的女設計師設計的，她為什么能做成這個東西？是因為她做這個東西的時候，出現了新的數學工具來幫助建筑造型，很多原有的建筑學派不愿意用這套東西，但是她非常激進，要用的數學工具來處理這個造型，才能做成這個建筑。
包括大家現在坐的車，你會發現曲面的車越來越多，車越來越漂亮，是因為數字化之后，加工的工藝更好了，能做出特別漂亮的曲面。原來為什么紅旗特別貴？因為那是老師傅用錘子敲出來的，不是像現在數控技術就把它弄出來的。勞斯萊斯也都是敲出來的，所以很貴，想做很好看的曲面成本極高，但現在就成了很容易的一個事情。
傳統設計的體驗公式就是E=e*n，e是衰減的。e就是每一次使用的體驗，比如說手機，你拿到手機的時候是一個體驗，是一個e，用了多少次，n就是幾。比如說我做一個椅子，用一次是e，用了多少回，它的乘積是整個體驗。n是不會變的， e是唯一的關鍵，而且他每一次都一樣。所以傳統設計里對它的造型會非?？粗?，到底表現出什么東西，好不好用，會特別關鍵。
我再說一下UI設計的目的、主題和體驗公式，UI設計的目的和傳統設計不一樣的地方是，它示能性更主要，自我定位更次要。我舉一個例子，馬云想用支付寶，不好意思，他也得跟我們用的一樣。不管多有錢的人都好，還是只能用Facebook不太可能為這個人單獨設計出一款來。也就是說UI設計是絕對平等的，只能說買個皮膚，你可以花錢，但大多數情況下，它的主體功能是不區分消費能力的，所有人用的支付寶都是一樣。不管這個人多窮、多有錢。
所以UI設計更主要的是通過界面來告訴你這個東西怎么用，是比自我定位更重要的。所以我們主要考慮的是界面能不能告訴用戶是干嘛用的，怎么用，這是最關鍵的。這和傳統設計不一樣，傳統設計因為有材料成本的問題，一定會涉及到選擇和自我定位的關系的問題。
UI的設計體驗公式就是E=a*b*c*…*n。這里為什么用乘法而沒用加法呢？大家知道有一個叫迷失度的一個概念，它是形容網頁體驗中，如果a是零的話，后面做再好也沒有用。比如說用戶找不到入口，到界面這卡在這了，這界面如果是0.1，那后邊所有的轉化率就全是0.1乘以這個系數。所以它并不要求每一個頁面達到百分之百，但是它強調整體乘積一定是一個高值，比如說這個頁面的轉化率提高了，提高3%，下一頁面降低5%，它是一個乘積的關系，每個頁面都很重要，它是一個拉長的一個體驗公式。最后乘以一個使用次數。
我們再回到認知心理學，我家有三本到四本心理學的書，來看看他們每個人是怎么定義認知心理學的。
斯騰伯格所著的是一本賣得比較好的書，大家可以看一下，認知心理學規定了研究范疇是什么，這是斯滕伯格寫的，他認為認知心理學就是研究人如何覺知，學習、記憶和思考問題的。
下面這本書是三個人合著的，他們壓根沒有給認知心理學一個明確的定義，只是提到這是有關于思考者的心智的科學。但是他說的不是很具體，而是寫了一堆研究對象，你把它抽象一下，會發現關鍵詞實際和斯坦伯格的是一樣，覺知、學習、思考、語言。
再來看第三個，艾森克和基恩干脆就沒定義認知心理學是什么東西，他說現在這個東西是一個特別廣泛的研究領域。
這三本書里頭有兩本書的第二章叫認知神經學，有一本是在第一章的第三部分叫認知神經學。我原本為我的書取名叫《認知與UI設計》，就是這個原因。很難把認知心理學和認知神經學切得特別開，它們的聯系實際是很廣泛的。
UI設計圍繞覺知、注意、記憶與識別會有一些簡單的例子。
視覺組織原則，這個是格式塔閉合原則，這是從神經學層面解釋格式塔的閉合原則。就是有一個未封閉的圖形，大家可以看到左邊，你知道他是未封閉的，包括有那種特別的那種三角，有兩個半圓，三個半圓，我們會把它腦補成一個閉合的圖形，這個是有神經學基礎的。
有個叫赫布定律，這個是什么意思呢？兩個神經元如果彼此之間互相刺激，他的神經的突觸就會變多，它表現在除了突觸增多還有髓鞘增厚，都會使神經之間的聯系變得更緊。
細胞集合的定義就是，人對信息整個識別過程是這樣的，過去你接受過原始刺激，你會記住它，比如說右邊這個完整的圓，你第一次看到這個圓，會形成刺激，再看這個圓又形成刺激，它會形成一個完整的赫布集合。等你再看到左邊這個不完整的圓的時候，就是一個不完整的刺激，它會激活原來形成的赫布集合，讓你產生錯覺認為它是原來的完整的狀態。識別和記憶是一體的。記得越少，識別越快。
意識和注意的模型與用戶體驗是相關聯的。真正進入到意識的信息是少之又少的。因為人的視覺能看到的只是可見光。在一個很長的光譜中，視覺信息只占這么一點。人對視頻信息的感知還有個體偏向，人對紅黃藍的敏感程度是不一樣的，它只對部分色彩更敏感一些，更窄。
信息有一部分是無意識的，比如說心跳的聲音，在環境特別安靜的時候，你能聽見心跳的聲音，但是當你注意力在別的地方時，你會過濾掉它，心跳聲就不進入你的意識了，但它實際是一直在發生的。
你要建立一個概念，就是用戶能注意到的事情，是整個界面里頭很小的一部分，大部分他什么都記不住，因為他沒空。短時記憶的容量是非常少的，比如說讓你記電話號碼，一般大家都是以443或者344地記，會把它切割成幾個塊，這樣會更容易記一些。
下面這是《藝術與視知覺》這本書里的一個實驗。左上角的圖案是他們用來做實驗的圖。你會發現這個圖是一個特別擰巴的形狀，首先它是不閉合的，不是完整對稱的，設計師看到會非常不舒服。這個圖是怎么做實驗的呢？就是把這個圖給你閃一下，就給你0.2秒或者0.3秒?？赐曛笞屇慊貞?，回憶這個圖是怎么構成的？右邊這七種是大家回憶的，它有一個共同的特征，就是把它規律化。這個不是有意進行的，是你與生俱來的能力。把一個不規則的東西記成一個規則東西，是你本來的能力。
我們再看一下，我們把這個時間拉長，你會發現很有趣，第一個是字母A的演化。這原來是頭牛，公元前1800年恐怖谷銘文里的文字，長得像左上角第一個。后邊的人畫牛很費勁，識別它、記憶它很費勁。就把它簡化，簡化，最后就變成拉丁字母。每一次他都在丟失視覺信息，每次都在不停的丟失識別，使它更規整。26個字母基本都是按照這種原理出現的，只不過它是一個特別長時間，跨度上千年，變成這種結果。
第二個是中國的魚紋，這是李澤厚的書《美的歷程》里的截圖。你可以發現魚紋的演化過程也這樣，開始魚紋真的是條魚，后來這個魚變成對稱性了，上下對稱的。到最后它已經不是魚了，花了幾百年時間變成這個樣子。
谷歌的logo也是一樣的規律。不停地進行簡化，不停地進行識別。識別和記憶是一體的。每次記憶時一定會丟失信息，不管記什么東西一定會丟信息。記憶的東西比看的東西更少，當再識別的時候是拿剩下的東西來識別。這也是和人的認知相關的。
要想研究一個東西，得有一個合理的思維的過程，才能產生正確的思維的結果。思維能力和思維形式會決定思維產出。
我們看一下概念和命題，這是柏拉圖的三段論。我舉個例子，大前提是希臘人是勇敢的人。小前提是雅典人是希臘人，結論是雅典人是勇敢的人！這是一個特別標準的三段論推理，大前提小前提，不停地縮小集合的范圍，得到這個結論。
但是問題是什么？這個語境里頭我沒有解釋這幾個概念：雅典人的概念是什么？如果你注意土耳其的地圖，你會發現愛琴海那一塊靠近土耳其大陸的很多島是希臘的，特洛伊現在應該是更靠近土耳其一些。雅典人的概念就是伯羅奔尼撒半島上一個地區的人叫雅典人，但整個希臘實際是一個特別寬泛的概念，它并不是原來的半島，而是把周邊很多島嶼，甚至靠近羅馬的島都擴到希臘地域里，所以這是一個問題。希臘人的概念又是什么？我也沒說。我盡管做了推理，我沒說勇敢的人的概念是啥。有個壞人在行兇，你用聲音制止了還是用行動，能不能作為判斷這個人是否勇敢的標準？在你說出一個推理命題的概念的一剎那，實際上已經把這個東西表達出來，但是在這個命題里是沒有說的。
我說得有點繞，其實我想表達的意思是：做推理的時候，推理里的概念，你是不可能在這個推理里頭說出來的。你想把這個概念進行規定的時候，還得通過其他語言和其他概念來說這個概念。比如說我們學的數學幾何，是基于歐幾里得的五大公理，五大公設。有了這個東西，才有推理和判斷的基礎，它是先于命題存在的。如果不對UI進行定義，如果不對設計進行定義的話，我寫這本書就是一個很扯的一個事情，因為并沒有形成自己的觀點和基礎。只有形成觀點和基礎了，才能圍繞這個東西進行推理，哪些是合理的哪些是不合理的。先有概念和命題，才有后邊理論和假說。
要判斷一個理論靠不靠譜，需要符合邏輯三恰。
第一個要邏輯自洽，就是你不能自己打自己的臉，你需要自圓其說。事實與邏輯相符，就是一個觀點在你的學說里是兼容的，不能出現邏輯矛盾。
邏輯它恰是什么呢？你提出這個理論和其他理論不能產生矛盾，除非你能證明理論錯了，或者在某些條件不適用，這個理論才是靠譜的，你不能和原來既有的公理產生沖突。
邏輯續洽是什么？就是新的場景、新的案例用這個理論還能解釋的通滿足這三條才是好理論，缺一條都不行。
這一章是從邏輯的視角去看一看，這套理論對不對。從認知的角度考慮設計對不對。認知角度本身對不對。
第一個叫邏輯自洽，在認知理論內部沒有矛盾。
我舉一個案例。這里有兩個圖，大家第一眼看上去它是怎么構成的？我用等式表示出來。會有人第一眼看上去認為它是最上方的方式或者是最下方的方式構成的嗎？沒有人會說這個圖形是用這兩個更復雜的方式構成的。但是你想沒想過，為什么你第一眼看上去就是按中間這兩個等式的方式構成的。因為這樣理解認知成本，如果把一個你沒見過的東西或者一個復雜的東西展示給你看，一定是按照你的記憶，還原成你接觸過的最簡單的一個構成。它會降低你認知的成本，如果記成奇怪的形狀，一定會使你記憶成本更高。
第二，認知一定是要符合演化論。
人們對演化論的誤解之一，就是認為越快越強越好，其實不是，而是適應?？赡苣愀鼜?、更聰明、更快，但是適應不了環境。
比如說為什么色盲基因還存在？
男性里頭大概有7%-10%，女的還少一點。按理來說我們應該認識更多色彩，為什么色盲還存在？外界信息變成視覺信息主要是靠視錐細胞，它比較密，是在中凹附近。眼動追蹤的時候，也主要靠中凹移動來看東西。視感細胞對色彩并不敏感，但是對明暗敏感。色盲在夜間視力很好，比如說晚上要偷襲獵物，或者是偷襲敵人，有色盲的部落會派出這些人，這些人夜間視力更好，會給種群帶來生存優勢。所以色盲基因沒有消失是有意義的。非洲有一種鐮刀形紅細胞貧血病也是一個案例，擁有這個基因的人不容易得瘧疾。但是如果沒有瘧疾情況下，他容易貧血、容易患各種各樣的病。
現實視角的邏輯續洽，第一個就是能預測新的設計趨勢，第二是解釋新的實驗現象。
第一個是扁平化是趨勢而不是潮流。這個用左上角的一個圖一下就能解釋清楚。雞尾酒的杯子一定是透明的。我們做的界面很多時候就是那雞尾酒的杯子，大家能理解扁平化是什么原因了吧？因為網速越來越快了，各種各樣酷炫的東西越來越多，信息量越來越大，就相當于雞尾酒里有顏色的酒，顏色越來越多。如果用一個不透明的杯子，或者透明度不夠好的杯子，看不出里頭的顏色。所以扁平化是一個趨勢，不是潮流。
這是我前兩天看到的一個帖， 2019年發的一個論文，叫圖標樣式對可用性的影響。大家可以自己去翻這個論文，很有意思。
測試結果是：最不易識別的是最右邊這組。中間是識別度比較高的，這個解釋特別簡單：過度簡化導致識別困難。意思是簡化信息的時候，不是一減到底就是好。比如說前面的例子從牛到A的過程，你不能上來就給埃及人拿了一個A，他不認識。Instagram改版為什么受到熱議？因為它突然之間扁平了，沒有漸進過程，咣嘰就變成一個特別扁平的圖標，它的紋理和它的圖形都發生了變化，所以識別上會特別不舒服。我舉過一個例子，比如說你慈祥的老母親整成了張柏芝或者是高圓圓，你一定不會認為這是一件好事，你會感覺很難接受。
第二個測試結果是這次識別度高的是右邊的，中間的識別度是低的。測試結果是多數面型icon識別比線型icon更容易識別。這個是格式塔的描述方式，有陰影的圖形只在內部成立，外部行成不了輪廓。線性圖形則正好相反，是兩向輪廓。
比如說我們看蘋果圖標，你不管它是從第一版還是到最后一版，他都是面性圖標。
因為蘋果是個球，它是個實體，這個輪廓在蘋果內部成立，就類似于這種感覺。后邊是有陰影的，有外部的，因為你要聚焦，后邊東西會虛化掉。它只在內部成立。
面形圖標普遍比線性圖標識別要快，只有三個反例，只有三個反例需要解釋。
第一個圖，咱先不看虛擬的，你會發現這兩個圖標線性識別度高，原因是因為它表面有條紋，這兩個圖中圾桶和鑰匙都有條紋，所以用線性來表達的時候，效果更好。其他圖標的實體都是曲面，不是條紋。沒有參差不齊的邊緣，而是曲面，是單向輪廓形成的。因此線型圖標更容易辨認。
感受野是人的視錐細胞和神經節細胞的一個聯系，不管刺激中心區域、刺激整體、刺激邊緣都會有反應。和感受野關聯的是神經節細胞，人類眼睛有很多神經節細胞，但這些細胞不是完全均等的點，而是一組點圍繞一個中心形成一個組合一樣的結構，外邊一圈組合，中間有幾個組合。
下圖的這個就類似視網膜上的結構，神經節也是類似這種結構。當環境同時變亮的時候，刺激比較弱。同時變黑的時候，刺激也比較弱。只有在交界點的時候，反應最強烈。想象一下，當我們看到一個物體的輪廓的時候，細胞對它的反應最大，就形成一條邊。這個實際上就是卷積核，人工智能卷積核就是模擬感受野形成的一個原理。
內積就是矩陣內的數字一個一個互相乘，乘完之后形成一個結果。卷積核模擬感受野的原理是：數字矩陣就相當于一個卷積核從最左邊一直掃到最后一排，會形成不同的數值。比如說這個是我們要看的圖像，比如說黑的會計算成1，白的會計算成0。用卷積核掃一遍就相當于在模擬人眼睛看到的東西，黑白區域之間就會形成一條邊，就是我們所看見的輪廓。
這就是我們眼睛看到東西的原理，比如說我們現在做視覺識別，也是用這種特別簡單的技術。卷積核實際是模擬人的感受野。
關鍵點是神經學是怎么解釋面形圖標和線性圖標的不同的。當你看到全亮的東西和全暗東西的時候是有差異的。卷積核掃一圈之后，計算機會認為這個里頭的東西和外頭東西是一樣的。對它刺激是一樣的。所以只對邊緣有認識。但人的神經比較特殊，它自帶一個數值，它能識別出暗和亮。所以當你看一個面形圖標的時候，你對輪廓里面黑色部分的認知和對輪廓外白色認知是不一樣的，這叫單側型的輪廓，而不是雙側型的。當你看到線性圖標的時候，類似于計算機的感覺，但是你看到面形圖標的時候，是人的感覺。
文章來源：UXren
流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產品游戲題型的設計過程。
流利說®少兒英語，目標是幫助該年齡段的用戶建立發音自信，并且能對英語學習產生持續的興趣?；趦和澩娴奶煨?，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。
△ 收集糖果
△ 警察抓小偷
△ 切水果
△ 消滅細菌
游戲為輔，教育為主。
對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：
接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經驗。
在開始設計前，我們對 3-8 歲兒童進行了調研，發現處于該年齡段的用戶，大多有以下特性：
基于以上幾點，我們便總結出以下幾點設計方法。
視覺形式即題型玩法
以拼圖題為例，此題的目標是檢測孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會覺得這道題既不會玩，也不好玩。但如果在視覺表現上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進而引導孩子的操作。
場景故事要有視覺連貫性
「游戲」（此處的「游戲」代指游戲題型）結束后有一個和故事設定相關的結束畫面，承接前面的操作，讓整個「游戲」過程能呈現出相對比較完整的體驗，以增強小朋友在「游戲」過程中的沉浸感。
△ 游戲操作：切水果
△ 游戲結尾：切水果榨果汁
由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會習慣性地去點擊界面上所有吸引他們的東西。因此我們需要為不同層級的元素設置強烈的視覺區分，明確告訴他們哪些元素是可以點擊的，需要被關注的，哪些元素是不可互動的。
提高教學內容易識別性
游戲題型的設計方法通常是使用游戲的形式去包裝常規的教學題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設計恰到好處的游戲容器去承載教學內容，使其兼具教學內容的識別性又不會影響「游戲」體驗。此處我們嘗試去拉開游戲元素和教學內容的視覺差距──在畫面中的視覺焦點處擺放教學內容，而游戲元素僅作為背景或者容器，用于襯托教學內容，并且盡量選取不易和教學內容發生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設計需要有一定的適配性。
△ 適配文字
△ 適配圖片
△ 適配文字和圖片
對于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標。在該場景下，游戲容器的視覺設計重點在于外形的刻畫，簡化內部細節，以此將孩子的視覺重點聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對文字的大小也進行了適配。
△ 1-12 個字符──文字大小 88
△ 13-25 個字符──文字大小 76
△ 26-45 個字符──文字大小 62
背景畫面的層級感
在游戲題型中，有不少故事性強，空間延續性高的設定。為加強畫面的運動感和空間感，視覺輸出時，我們額外增加了前景層，利用前景圖片打造視差效果，以增強整個背景的層次感。
前景圖片的設置，同時也能解決適配不同屏幕尺寸時，背景區域顯示差異所帶來的視覺問題。
縱向運動的情況下，兩側的圖形如果設置在背景里，當適配到短屏幕的時候就無法呈現出來。
而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。
克制地使用過于明亮的色彩
用研時，我們發現孩子們容易被顏色醒目的東西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。
合理的反饋包括符合交互邏輯的及時反饋和適當的正負反饋。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。
及時反饋制造小驚喜
我們在產品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。
例如：當用戶點擊拼圖題選項時，會出現 IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。
適當的正負反饋
大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數字時代兒童設計》
對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續玩下去的欲望。
△ 正向反饋1：IP 形象高興地跳出
△ 正向反饋2：IP 形象高興地跳出 + 打分星星
△ 正向反饋3：IP 形象鼓掌
考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產生挫敗感，鼓勵性的反饋為宜。
△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢
反饋動畫的設置也需要考慮用戶的可接受程度，慎用具有攻擊性動效。如下圖，錯誤反饋時 IP 形象會受到攻擊而感冒，上線后發現孩子們對這種反饋表現出了害怕的心理。
以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。
不會寫代碼的設計也是好開發。
視覺稿如果不能被很好的實現落地，那再好的設計稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實現程度這一問題上，我們也走過不少彎路，和開發經過幾輪的探索，最終形成了一份適合我們團隊的輸出模式。
在整個開發環節，設計師主要承擔一部分的動畫開發工作。在和開發對接的過程中，我們主要使用的軟件是：
△ CocosCreator
△ SourceTree
開發搭建完框架后，設計在 CocosCreator上，完成部分元素的動畫，再用 SourceTree 向開發提交動畫代碼。開發最后通過代碼將每個動畫串聯起來形成一個完整的動畫。
△ CocosCreator 動畫編輯器界面截圖
題型動畫連貫且細節多，單靠視頻 demo 是無法協助開發精準實現設計效果的。為了解決這個問題，我們建立了對設計落地具有指導性意義的文檔──適配標注文檔和動畫標注文檔。
1. 適配標注文檔
用戶機型調查結果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設計稿，并規定以 780×360 為設計基準，對另外兩個尺寸進行適配。
標注內容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節調整標注，方便開發在做適配的時候能準確還原設計稿的布局。
2. 動畫標注文檔
該文檔主要是對動畫和音效的詳細說明。每個題型的動畫會被拆分，以最小可拆分動畫為一個標注對象，對其標注時長、具體的動畫效果以及運動曲線數值等，方便開發地還原 demo 的設計效果。詳細的標注文檔不僅方便了開發，更為后續測試和視覺走查降低了不少溝通成本。
游戲化題型的設計，需要更多的從用戶的角度出發去思考和權衡游戲與教學的平衡性。對于兒童產品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。
文章來源：優設
導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則：
簡單
首先，最重要的是，導航系統必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。
可見
正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用，而不僅僅是在我們預期用戶需要導航的時候。
明確
導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買；此元素將指導他們執行適當的操作。
一致性
所有視圖的導航系統應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內容互動。
大拇指設計法則
史蒂文·霍伯在對移動設備使用情況的研究中發現，49%的人依靠一個拇指在手機上完成任務。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區域，并與拇指交互。綠色表示用戶可以輕松到達的區域；黃色表示需要伸展的區域；紅色表示需要用戶改變握住設備的方式的區域。
在設計時，要考慮到你的應用程序將在多種環境中使用；即使是喜歡使用雙手握手機的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達到目標。
另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。
最后，也是很重要的一點，要注意點擊目標區域的大小。Microsoft 建議 你將觸摸目標區域大小設置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標區域。
觸摸目標區域不應小于44像素到48像素（或11毫米到13毫米），包括填充。
標簽欄
許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。
底部導航設計的三個關鍵因素
導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。
1.僅顯示最重要的目的地
避免在底部導航中使用五個以上的訪問標簽，因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且，隨著每個額外的選項卡顯示，就會增加了應用程序的復雜性。
避免使用五個以上的目的地。
避免滾動內容
對于小屏幕來說，部分隱藏的導航似乎是一個非常好的解決方案，因為你不必擔心有限的屏幕空間，只需將導航選項放入一個可滾動的選項卡即可。但是，可滾動的內容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。
該避免在選項卡欄中放置太多項目，以防止用戶滾動，然后才能單擊所需的選項。
2.明確當前位置
應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置?！拔以谀睦?？“是用戶遇到的基本問題之一。用戶應該第一眼就知道如何從A點轉到B點，而不需要任何外部引導。你應該適當的使用視覺提示（圖標、標簽和顏色），這樣導航就不需要任何解釋。
圖標
底部導航應該與圖標的內容進行適當的結合。盡管有一些用戶熟悉的通用圖標，但大多數圖標代表的功能包括搜索，電子郵件，打印等。
在適用于Android的先前版本的Bloom.fm應用程序中，很難理解用戶的當前位置。
顏色
避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反，遵循這個簡單的規則，用應用程序的主顏色為當前的底部導航（包括圖標和任何顯示的文本標簽）著色。
左：不同顏色的圖標使你的應用看起來像一棵圣誕樹。右：只使用一種原色。
這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態。
如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。
左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。
文本標簽
文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。
避免換行，截斷和縮小文本標簽。
菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。
目標尺寸
使目標區域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數量?；蛘撸瑢⑺械撞繉Ш絼幼髟O置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。
顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）
標簽上的微標
你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。
考慮對標簽欄圖標加微標以保持通俗易懂。
3.使導航不言而喻
良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內容也沒有用。
行為
每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。
每個底部導航圖標必須通向目標目的地。
上面的控件是工具欄而不是底部導航。
保持一致性
盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。
當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。
Dropbox應用的空狀態頁面
滾動時隱藏標簽欄
如果屏幕是滾動的，則當人們滾動查找新內容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。
標簽導航可以在滾動時動態消失。
視覺愉悅
避免使用橫向運動在視圖之間轉換?；顒右晥D和非活動視圖之間的過渡應使用淡入淡出動畫。
圖形圖標：創意導航
屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節省屏幕空間。
Google Material Design，浮動操作按鈕
Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。
像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。
Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。
然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作
而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。
導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用，他們使用它的可能性就越大。
wen'z
不知各位產品經理、UE/UI設計師在設計產品時，除了考慮交互說明、功能狀態、頁面邏輯等之外，是否會關注 頁面跳轉間的“轉場效果”？？？
可能有人會覺得：“不就普通的界面左移和右移，需要講這個嗎？” 但是如果我問：“為什么要有頁面轉場？有哪些轉場類型？要注意哪些細節？” 你能一五一十地回答出來么？
畢竟頁面間的轉場過渡，是用戶體驗我們產品最直接的感知形式，也是人機交互中最重要的傳達要素。另外市面上還沒有系統性介紹'頁面轉場'的文章，所以今天就寫下這方面的干貨，希望能給你帶來一些收獲。
Part1：頁面轉場的作用
頁面轉場最基礎的作用，無疑是拉通頁面與頁面間的使用流程，使產品的信息內容、功能交互等有一個承接點。但除了這個打底作用外，頁面轉場還可以體現出多個方面的作用：
加深用戶印象
一些新奇獨特、區別于競品的轉場效果，完全可以加深用戶對自己產品的印象，留下特定的產品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新，進一步提升了產品的競爭力。
更有儀式感、增加代入感
就如《每日故宮》在查看文物時，會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍，很符合該產品獨有的特色。另外一些日志產品，會利用“翻書”的轉場效果來加強用戶的代入感、趣味性。
突出重點用戶
產品里的重點用戶（如vip用戶、平臺作家）都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外，特殊的頁面轉場也能給帶來一種‘專門定制’的感知。
像《人人都是產品經理》APP，在打開普通頁面和專欄作家的文章時，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識寶庫’的進場感受。
Part2：頁面轉場類型
說完頁面轉場的作用后，下面就是你可能感興趣的內容：頁面轉場到底有哪些類型？（以移動端頁面轉場為例，PC端亦可復用該類型）
翻書/頁、折疊
翻書/頁：指模仿現實生活中書本和紙張的切換效果，是一種擬物化的轉場方式。常用于雜志、小說、日記等產品中。
折疊：根據水平或者垂直線為中心點，將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉場。
3D翻轉、立體旋轉
3D翻轉：將二維的頁面以3D形式（類似魔方）進行切換。適合體現產品功能的“空間感”。
立體旋轉：根據水平或者垂直線為中心點，將整個頁面進行立體旋轉。適合體現另一個“頁面空間”的效果，用于容納更多的信息內容。
拉伸、上下合并
拉伸：根據水平或者垂直線為中心點，將頁面進行拉長消失處理，可分為’內拉‘與’外拉‘兩種方式。
上下合并：將即將進場的頁面分為上下兩部分進場，使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。
扭曲、頁面融合
扭曲：根據水平或者垂直線為中心點，將整個頁面進行旋轉、壓縮等處理，適合給用戶傳達一種’異次元、空間傳送‘的效果。
頁面融合：根據頁面的某個視覺元素，通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉場是最能體現兩個頁面之間的‘關聯性’，也是過渡效果最和諧的方式之一。
彈出、縮放
彈出：根據頁面的某個視覺元素，將其彈入到下一個頁面中去。適合突出某視覺元素，將其重點彈出展示。
縮放：將整個頁面自大而小或者自小而大進行縮放過渡，很適合大封面的轉場。
移入、淡化
這是我們最常見、最普通的轉場方式了，大部分的產品使用這兩種轉場方式。移入有’上下左右‘4個進入方向，而一直使用’左移進入、右移退出‘的轉場，最能體現產品功能的使用流程。
Part3：轉場時應該考慮的細節
各種效果只是提供一種選擇而已，根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉場過程中的細節點，是交互設計師不能忽略的事項。
頁面間的關聯性
頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯的，為了增加用戶轉場后的代入感、避免產生認知錯誤（覺得進錯頁面），可以考慮用相同的背景色、視覺元素等加強頁面間的關聯。
比如之前QQ游戲中心，將前頁的背景圖沿用到后頁中，讓后頁的游戲描述更有代入感，用戶第一時間就覺得'來對地方了～'
進退方向
頁面的進入和退出盡量是成反方向的，即頁面從右加載邊移入，退出時則從左邊移出。否則混亂無序地進退方向，會使用戶的操作流和視覺流感到不適。
返回邏輯的不同
用戶習以為常的頁面返回習慣，一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實現該方式）。因“返回/關閉”圖標在視覺上帶有明確的指向性，用戶知道點擊后到底是“返回”還是“關閉”。
但不同頁面類型的屏幕摳邊，對應的含義和邏輯卻是各不相同的：
原生頁面：屏幕摳邊是返回上一級頁面
就如朋友朋友圈一樣，原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態，亦可以重新加載頁面。
H5頁面：屏幕摳邊是關閉整個鏈接
無論在H5里操作了多少內容/頁面，屏幕摳邊都會關閉整個H5鏈接，再次進入時只能重新加載頁面，操作記錄都會被清空。
更的返回方式
除了點擊“返回/關閉”圖標、屏幕摳邊外，可以根據自己產品的頁面形態，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里，采取“下滑“的形式返回上級頁面。
原因在于：該詳情頁是以大圖+文字的結構描述食物，而大圖的展示區域很接近于手指的“黃金操作區”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內、最快速地讓用戶返回首頁瀏覽其他內容。
是否保存/清除用戶操作
頁面間的跳轉和退出，勢必會對當前頁面內容和狀態產生影響。當用戶想要離開時，不同的產品都會選擇不同的退出策略。舉個特別典型的例子：微信朋友圈。
當退出朋友圈再重新進入時，是會停留在退出前的頁面位置，方便繼續瀏覽好友內容。
而退出朋友圈后，入口處提示有好友新動態時，再次進入朋友圈則回到頂部初始位置，以保證可以第一時間獲取好友動態，滿足用戶日常的社交需求。
每日故宮在這一方面的處理也很用心：無論用戶在詳情頁里進行了什么操作（屏幕伸縮或滑動位置），退出頁面時都會清除用戶的操作痕跡，還原到文物的初始狀態，給人帶來一種“保護文物、細心嚴謹”的心理感受。
- 結尾 -
好了，關于’頁面轉場‘的話題就先寫到這，各位根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。下面是總結筆記：
文章來源：UI中國
在年復一年的電商促銷節的渲染下，如今618、雙11儼然成為全國最大的線上狂歡節。而在狂歡節中擔任著重要角色的主會場，承擔著為各分會場分發流量的重要使命。與此同時，大促的頁面設計也越來越趨向于同質化，大多基于以往的經驗沉淀，少有突破。在這樣的背景下，設計師不僅需要考慮如何滿足商業需求，更要兼顧用戶的體驗感受。本文將通過多次主會場設計實戰中沉淀下的經驗與教訓，以京東微信手Q購物入口的年貨主會場為例，深入探討如何在成熟產品中做突破設計。
1. 頁面結構與動線逐漸趨于穩定
主會場設計不斷進化和演變，從以往簡單的會場入口展示，到會場+品牌+單品+關鍵詞的綜合內容展示。雖然視覺風格不同，但無論從結構上還是體驗上來看，本質都相差不大。
2. 需要更豐富的詮釋品牌價值與用戶感知
在消費升級的大環境下，消費者的消費能力/品牌/品質在全面升級，此時需要更加注重品牌價值與內涵的塑造，精準化傳遞用戶感知。而主會場現有模式以大促營銷為主，重點突出促銷賣貨氛圍和類目分流，品牌價值與用戶感知的傳遞較為薄弱。
3. 既要效率分流，也要逛起來（成交）
分流坑位與效率的提升，在一定程度上會降低會場的成交轉化，如何平衡二者之間的關系，在設計上需要平衡把握。
在電商設計中，我們需要把握很重要的一點就是：平衡商業目標與用戶體驗之間的關系。設計目標的制定，需要我們對主會場的商業訴求與用戶訴求進行深入了解，才能制定有理有據的設計目標。
因電商環境的特點，主會場設計需要以商業訴求為思考起點，為商業價值賦能，輔助其商業目標的達成。因此，在策劃階段，設計師應該提前加入討論，和業務方一起梳理并明確業務訴求。因京東大促節奏時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時間，而針對不同的時期，主會場的業務訴求也會略有變化，但整體差別不大。
會場分流
大促期間，主會場作為流量矩陣中心，若只通過主會場一個頁面來滿足用戶需求是不太可能的，因此的會場分流是核心的商業訴求目標。
提升成交轉化
雖然主會場的核心目標是分流，但隨著大促策劃的逐漸深化，提升流量成交轉化率，賦能主會場價值最大化也是需要考慮的重要因素。
會場預約
京東大促節奏具有時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時期。如何保障品類日-品類會場的流量曝光，為會場預約也是主會場設計需要考慮的重要因素。
主會場最終面對的還是用戶，服務好用戶才能使其產生價值，并最終實現商業目標。根據對以往大促設計的用戶及數據反饋進行深入剖析，可大致分為新用戶及老用戶兩種類型，并進一步對用戶特征/訴求等方面進分析整理出用戶角色卡。
通過以上分析，總結出以下三大核心用戶訴求。
撿便宜薅羊毛
大促期間，用戶一般通過購物首頁、社交分享、外部投放等入口進入主會場，無目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來尋找折扣，撿便宜薅羊毛心理加重，但也相對理性。
快速篩選
面對越來越復雜的電商大促內容與玩法，用戶需要一個更簡單、更的會場為他們傳達促銷氛圍與優惠。
個性化推薦
個性化算法基礎上，用戶對自己強相關的內容更加感興趣。
通過對商業訴求與用戶目標的充分解讀，在主會場設計中我們需要在兩者之間找到平衡點，來更好的兼顧商業與體驗。最終將今年京東微信手Q購物入口的年貨主會場的核心設計目標設定為：打造極簡用戶體驗，提升用戶專屬感知。
設計策略的制定能夠有效幫助我們始終貫徹核心設計目標來探尋解決方案，根據前面的設計分析，定義出本次年貨節主會場的五大設計策略：用戶專屬感知、化繁為簡，整合、多場景可復用、年味春節、多緯度多場景。
1. 頁面動線設計
主會場作為大促版圖中的流量矩陣中心，堪稱絕對 C 位。在向用戶傳遞大促氛圍及專屬感知的同時，又要滿足效率分流及成交等目標，同時還要引導用戶參與各種互動，這需要構建合理的頁面動線。本次主會場頁面動線設計劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節奏引導用戶瀏覽。
2. 首屏-頭部設計
主會場頭部作為門面擔當，承載著向用戶傳遞主題訴說與促銷氛圍的功能。隨著運營需求的不斷增加，以及頭部資源利用率等問題，頭部設計不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會場推薦、活動推薦、預約時間軸、互動入口、優惠券等。在有限的空間里如何進行內容展現和傳達，本次年貨節將通過內容重組和層級劃分來進行實現。
1. 首屏-頭部設計
精準化營銷下的千人千面，用戶對自己強相關的內容更加感興趣。大促環境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗？我們根據用戶屬性進行新老用戶切分，結合日?；顒訑祿炞C整理出：猜你喜歡商品、購物車降價商品、BI 拼購商品、BI 會場等四類內容，打造用戶專屬年貨節模塊。
2. 中間-樓層設計
類型繁雜、內容眾多的中部樓層設計，承擔著 50+ 分會場曝光分流的重要使命。我們把 50+ 分會場劃分為 9 大品類，每個品類一個樓層進行內容組合設計，包括：優惠券、品類主會場、分會場入口、品牌曝光、單品曝光、熱搜詞等內容。樓層順序根據 BI 進行展示，讓用戶即使在內容繁雜的情況下也能快速定位自己感興趣的內容。
3. 尾部-猜你喜歡設計
長尾理論是網絡時代興起的一種新理論，當商品的銷售成本急劇降低時，幾乎任何以前看似需求極低的產品，只要有賣，都會有人買。這些需求和銷量不高的產品所占據的共同市場份額，可以和主流產品的市場份額相比，甚至更大。簡單了解長尾的含義后，可以清晰的知道主會場頁面中加入長尾設計的原因：利用互聯網移動端頁面無限延長的框架，進行更多貨品的曝光，來留住剩余未跳轉流量，進行商品售賣來實現價值最大化。在長尾內容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費轉化。
1. 今日必買模塊設計
因京東大促品類日節奏性曝光的特點，主會場的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個體差異化需求的情況下，又能降低設計、開發成本？本次年貨節主會場對今日必買模塊進行了組件化設計。
除了今日必買模塊，品類樓層的設計也遵循了這一設計原則。
1. 輕互動設計
如何讓用戶深度參與會場并形成記憶點？會場的互動設計是很好的方法。通過輕量的互動方式，引導用戶參與并拿到獎勵的同時，滿足商業價值的需要。本次年貨節主會場從用戶角度出發，通過：做任務贏大獎、分享贏京豆、新年紅包、明星拜年等四個互動玩法，有節奏的投放在年貨節的不同時期，形成用戶記憶點。
有些地方雖略有遺憾，但整體反饋不錯。成交、UV 跳轉率、UV 價值等指標顯著提升，其中 UV 跳轉率、UV 價值均為近兩年大促主會場最高值。因涉及敏感數據，這里就不再一一詳述。
通過對 19 年年貨主會場設計的詳細解讀，相信堅持閱讀到這里的小伙伴們對「如何在成熟產品中做突破設計」已經有了深入的了解，希望我的這些思考能夠給你在工作中帶來一些幫助。
本文列舉了交易型電商與內容型電商的對比，以及他們的消費者交易行為的四大區別。
消費者看到一個產品的時候，有兩種典型場景：?
在內容電商（比如看到新媒體文章推薦）時，用戶一般處于單獨評估狀態。
比如顧爺發過一個軟文賣“電表箱掛畫”——家里電表箱很丑、不美觀，用一副畫把它遮住，顯得家里美觀又有逼格。
當看到這個商品推薦廣告的時候，你就進入了“單獨評估”狀態，只比較眼前的畫以及你的現狀（沒有電表畫）。
這個時候你在意的是產品本身好不好，帶給你的感覺怎么樣，以及價格能不能接受。
很可能的結果是，你看到這幅畫200多塊錢，也不太貴，所以就買了。
而如果你不是在閱讀顧爺公眾號的時候看到商品，而是進入淘寶、京東這種交易型電商，心理就不一樣了。
在交易型電商中，用戶一般處于“聯合評估”狀態。
比如淘寶搜“電表箱掛畫”，你看到的頁面是這樣的：
這個時候，你進入了“聯合評估”狀態，你主要的比較點不再是“電表箱掛畫”和你的現狀（沒有電表畫），而是眾多的電表箱掛畫中哪個最好。
如果你仔細盯著上面的淘寶圖看，我想你此時的消費者心理已經發生了這些變化：想要看看不同價位的畫之間到底有什么區別。
材質？大??？印染工藝？誰畫的？急于尋找一些讓自己感覺到熟悉的信息。
比如掃一眼看看哪個品牌是你聽過的（即使是華為牌的畫，此時都更能抓你的眼球）。
趕緊比較哪個店銷量大、好評多（咦？剛剛看到顧爺的，怎么不這么關心銷量信息？）
開始在意價格，并且重新思考買這個畫到底值不值。
然后，你可能不會買電表箱掛畫了，甚至會覺得買一幅這樣的畫很多余，還不如買一箱牛奶補補身體。
表面上看，一樣的產品，你僅僅切換了評估方式（單獨評估VS聯合評估），你選擇產品的標準卻產生了巨大的變化。
而就像我們前面說的，為了“在競爭中存活”，你不得不了解，“決定用戶選擇”的因素，到底產生了什么改變：
聯合評估環境下，消費者更加注重容易對比的理性線索，比如材質、大小、印染工藝等，這是因為聯合評估的時候，我們看的是選擇項之間的不同，而不是選擇項和現狀之間的不同。
而在單獨評估的時候，消費者會更加容易受到感性線索的影響，大腦進入的不是“計算模式”而是“感覺模式”，會更容易感覺到增加一個畫帶來的生活改變、這幅畫整體的設計感、流露出的藝術氣息等。
所以，如果你是在參數上占優的產品，比如小米或樂視的手機，進入聯合評估會非常有利，因為用戶非常在意跑分。
如果你是在參數以外的體驗上占優的產品，比如設計精美和有情懷的手機，進入單獨評估會比較有利，因為你的優勢無法被直接計算，難以在聯合評估中占優。
有研究發現，假設有兩款同等價格的冰激凌，一款是滿滿地裝在小杯子里，總共50毫升；另一款是在200毫升的杯子里裝了半滿，相當于100毫升。
看到兩款冰激凌，消費者卻又會選擇半滿但是量多的冰激凌——廢話，大家又不傻，看數據明顯這個給的多。
再比如，找工作的時候，如果只看到一個職業選擇，大部分人會對那種工作內容激動人心、公司名讓人仰慕、發展前景好的工作更滿意（而不是單純的薪水）。
而在聯合評估的時候（同時拿到很多offer），大家比較來比較去，最終更容易選擇薪酬更高但自己實際上并不喜歡的工作。
因為聯合評估的時候，我們更容易忽略主觀感受，選擇那些“數據”和“參數”上更牛的選項。
所以在淘寶上，你可以直接根據材質、大小等性價比選擇一個畫，即使這個畫買回去后你并沒有像買顧爺的畫那樣驚喜。
這也意味著，在交易型電商環境下，拼參數、拼數據的產品容易獲勝，而在設計感、原創性上占優的產品，難以贏得顧客選擇。
而在內容型電商中，我們是單獨評估，這時候設計師原創設計帶來的沖擊感，可能直接讓我們選擇去購買。
這同樣意味著，在交易型電商中，我們更容易受到銷量領先、知名品牌等信息的影響，因為這也容易比較。
而在內容型電商中，我們則直接感覺對這個產品喜歡不喜歡。
之前我遇到一個自媒體賣產品的客戶，同樣的產品（高端有設計感的杯子）推送給同樣的粉絲，一個用淘寶平臺，一個直接用微信嵌入的電商平臺，結果后者轉化率高了十幾倍。
其實一個很重要的原因就是：淘寶本質上屬于交易型電商，會強迫所有消費者自動進入聯合評估的狀態。
在這種狀態下，用戶會更加在意成本信息，價格敏感性增強，從而導致更少人選擇高端產品、享樂產品。
所以高端品牌（比如LV）在線下一定是用專賣店，而不會進入賣場，因為后者是聯合評估。
總結
在內容電商環境下，更多人會在單獨評估狀態下購物，出現這些變化：
如果在淘寶、京東購物，此時你的心理狀態經常是：我要買東西。
你處于“購物”（shopping）心態中，大腦中經常裝著某個潛在的任務——比如要看看有沒有好看的衣服或者想買一箱牛奶存放到冰箱。
這個時候，我們就說你處于“主動搜尋”的心理，你會對將來可能會購買的產品信息更加敏感，而對無關信息不那么敏感。
而在內容電商環境中，你本身正在專心看網紅的直播或者某個自媒體的內容，這個時候突然看到有個產品信息（比如講健康的播主，推薦了新型智能牙刷），此時，我們說你處于“被動接受”的心理。
這有什么區別呢？
研究發現，在主動搜尋的心理中，我們會更加關心直接與任務相關的信息，而對與任務無關的信息減少關心。
比如你想挑一款面霜，會在大量的面霜相關的商品中進行比較，對面霜相關的信息非常敏感。
而如果此時偶爾看到有個叫做“面部噴劑”的新型產品，你可能壓根不會關心（因為你正在找面霜），即使它也可以幫助你改善和保養皮膚。
（ps：這個產品是我編的，用來制造未知感，實際上不存在這個產品）
所以在交易型電商中，各種新奇、未知的產品，其實并不好賣。
有個知名的“看不見的大猩猩”心理實驗證明了這一點。
心理學家召集一些志愿者，給他們布置任務：數一下在接下來的視頻中，球員一共傳了多少次球。
然后在視頻一半的時候，有個人穿著大猩猩的衣服進場并且做了歡呼的動作。
實驗結束，心理學家問志愿者：球員一共傳了多少次球？大部分人答案都對了。
但是接著問：你們有看到一個大猩猩嗎？結果超過半數的人聲稱沒有看到大猩猩。
這是因為看視頻的時候，大部分人聚焦于“數傳球”這個任務中，從而自動忽略了與任務無關的信息（大猩猩）。
這也導致了用戶在京東選購面霜的時候，可能更容易關注面霜本身，而不是主動好奇地去尋找除了面霜還有什么新型產品可以替代。
而如果是在內容型電商，用戶事先沒有覺得要買面霜，而是在看一檔教你如何保養面部的節目，就更容易接受一種新型的護理面部的方式（比如XX面部噴劑）。
內容型電商，比交易型電商更適合銷售新奇產品。
文章來源：人人都是產品經理
一次會議的演示文稿，通常是一個 .pptx 格式的文檔，而日常來往的郵件附件里的文檔則多是 .docx 和 .pdf 格式的文檔。當然，設計師更熟悉的可能是在 Adobe Photoshop 中可以打開的 .psd 格式的源文件。
我們熟悉了這種各司其職的格式體系。
而網絡正在改變這種格式體系。各種服務和功能大都「在線化」，大家都熟悉在線看視頻，已經不會去分它是 .mp4 還是 .flv，在線音樂是 .mp3 還是 .flac 已經無人在意。而更為重要的文檔和效率類的服務也是如此，且不說微軟的 Office 365 和相對更加輕量的 Google Doc，國內的 騰訊文檔和石墨文檔等在線文檔工具，讓我們越來越少地接觸帶有.docx 后綴的本地文檔。當然，這并不是意味著本地文檔就此消亡，但是這種去本地化的趨勢非常明顯。
如果文件的格式已經不再清晰可見了，那么概念的界限自然也會逐漸淡化。一個記錄文本的文檔和記錄表單的文檔為什么不干脆融合到一起，并且適應用來展示的需求？當然可以。
今年年中在 Microsoft Build 大會上微軟展示的 Fluid Framework 就做的更加徹底。
無論是源自 Word 里面的富文本還是 Excel 當中的表格，它們甚至不用以單一完整的文件而存在，它們在網絡上傳遞的時候，將會是一段簡短的鏈接。但是在 Fluid Framework 的支持之下，呈現出來的，則是一段可交互的、具備編輯功能的、帶有內容的模塊。
說起來，并不難理解。在有 Fluid Framework 支持之下，任何網絡環境都會是一個簡單純凈的畫布，一個可以承載不同類型文檔和功能的空間。整個 Office 龐雜功能體系，你都可以按需取用，提取出來拉到 Fluid Framework 中使用。
「我們確實需要在關鍵領域，針對核心技術進行創新，」 Microsoft 365 負責人Jared Spataro在接受The Verge采訪時說道：「 Fluid Framework 是我們既是協作創新的新方式，也是未來承載各色內容的文檔的新載體?！惯@種新的文檔框架讓用戶能夠拆解不同類型的內容，并在不同的應用場景和不同文檔中輕松地取用。
Spataro 還說道：「Fluid Framework 沿用了一部分以往文檔的概念，但是將這些格式和文件徹底拆碎、打散，然后用云端的網址鏈接將它們逐一代替代。不同的鏈接承載放置不同的內容和組件，因此從文字到表格，再到圖形化的可視化內容，所有這些都可以隨意地整合，輕松集結在一個地方。然后，Fluid Framework 讓你實時訪問所有這些內容，因此它是動態的，可交互的，是完全可協作的，并且可以便捷共享的」。
作為一個尚且處于早期階段的服務，目前Fluid Framework 還只是打通了 Office 自家的文檔體系。但是即便如此，這意味著你可以將任何一個文檔當中帶有相應功能的內容，無縫地與人在 諸如筆記工具 OneNote 隨時隨地嵌入 Excel 的模塊和豐富的表單、即時通訊工具 Teams 中加入演示文稿，并且和同事一起修改其中的樣式，替換圖片，增刪動畫而無需離開，你甚至可以直接在你網頁的 Outlook 郵箱里面，直接編輯當月網站數據所生成的表單和相應的柱狀圖。
當然，這還不止。人工智能功能的加入，讓 Fluid Framework 可以做到更多事情，比如發布會現場所演示的，實時發布信息，然后 AI 協助將信息實時翻譯成不同的語言，分發給不同國家的同事。
這種全新的功能，讓內容協作中間大量復雜的概念和環節都被移除了，這種程度的變化是驚人的，它意味著交互的模式，從最底層的概念到呈現的方式，都發生了改變，而這種改變還會隨著產品迭代和時間推移，而進化得更加智能、無縫、微妙。
Spataro 總結道：「不同格式的文檔，一直是人們思考如何制作內容的思維框架。但是 Fluid 往后退了一步，重新審視了一下這個既有的體系，然后展現了一個新的可能：我們不再需要這些主導一切的文檔格式和不同類型的文件。我們不用在處理表格的時候就必須聯想到 Excel，寫文本的時候也不必去限定工具必須為 Word，而可視化內容的展示也不再拘泥于 PowerPoint，你可以在任何地方用任何類型的內容，我要說的是，我們不再有文檔了，我們擁有一個無所不能的畫布?！?
而這個全新的東西，最近剛剛開始對外開放了申請入口：
Fluid Framework Developer Preview
當然，如今看起來頗為具有想象力的 Fluid Framework ，它的核心思路其實并不是什么新鮮東西。
在線協作的概念由來已久，《連線》雜志前主編凱文凱利在他1994年出版的《失控》當中早已提及相關的概念和想法，但是在如今實際上要打通新的領域，納入一個新的格式，加入一個新的功能，都需要足夠的基礎才行。
Google Wave 是這個領域的先行者。在一個畫布之下，進行多格式、多樣式、多人在線協作，幾乎完全無界的在線協作模式是令人炫目也讓人無所適從的，這一產品最終失敗了，但是它在技術和架構上的遺產足以反哺出 Google Doc、Google Drive 這種級別的產品。
Google Wave 的想法在當時確實略有一點天馬行空，實際應用場景和需求并沒有跟上，對于網絡帶寬的要求在當時也相當苛刻。而如今上線的 Fluid Framework ，應該也是從這些失敗的前輩身上汲取了不少經驗。
立足于微軟最扎實的 Office 365 這一云端服務來進行鋪設和測試功能，在服務群體上，則選擇了需求更加清晰具體的企業用戶（尤其是協作服務），來作為初始的切入點。這樣的限制，足以說明微軟的審慎和重視，他們甚至準備好了以年為單位來進行迭代。
微軟對 Fluid Framework 充滿了期待，他們相信這個東西能夠重塑行業，甚至重塑網絡本身，也許到明年5月的開發者大會上，能夠看到一個截然不同的 Fluid Framework。
競品分析是UX設計師的標準工具之一， 且用戶體驗設計師的主要交付品之一就是競品分析報告。在設計一個新的方案之前，我們往往會查看其他類似的產品，了解其他人做的相關工作，希望從中找到任何弱點或者優點，并期望在此基礎上進行改進，這將利于你的設計。事實上，競品分析已經不再局限于一種工具方法，更是一種思維模式，如何對比分析，如何批判性的進行比較以及從差異中獲取價值。
UX設計項目會遇到哪些類型的競爭對手？
這個問題可以理解為，我們要分析哪些競爭對手？一般來講，所有UX項目都面臨兩種競爭，一種是直接競爭對手，即業務有直接沖突，涉及到具體的利益沖突，商業沖突。例如滴滴和uber，淘寶和京東。另一種則是“間接競爭對手”，往往針對某些相似的產品模塊，這里的競爭并沒有準確的定義，只是為了比較而給與的一個名稱。 例如你在進行自家產品登錄注冊模塊的設計，此時你不僅僅可以研究一些直接競品，也可以研究其他擁有此功能模塊的產品。而該產品與你的產品并沒有構成競爭的關系，只是提供了一個參考方向。
為什么要進行比較？
關于這個問題有兩個答案，首先，調研競品發掘哪些功能或服務是他們不能做或者沒有實現的，這就是我們的產品可以利用的機會點，以提供新穎的或者說更強大的功能，從而提高產品競爭力。例如順豐快遞首先開創了機器填寫快遞信息的功能，從而大大提高用戶填寫訂單的效率、準確度和滿意度，進一步提高品牌競爭力和服務水平。
其次，檢查其他設計師對相同需求的解決方案必然會對你有所啟發，有利于你從中獲取靈感來優化自家產品。例如信息架構的優化、或者簡單地操作流程的優化。參考競品意味著你可以不斷從中學習，把競品的每個模塊、步驟拆解開來，分析其背后的設計原因及它們如何發揮作用，這將有利于你的產品設計。
參考競品首先意味著你能夠達到和競品同一水平的用戶體驗，因為有了參照標準相當于指路明燈，競品的優秀體驗也會督促你不斷優化自己的產品。但競品雖然為你創造了一個標準，同時也會限制你的思路和想法，使你可能錯過一些更優秀的解決方案，參考競品能讓你追趕別人，但無法讓你完全超越他人。因此僅僅復制是不夠的，必須融入自己的見解且時刻保持創新意識。
對直接競爭對手進行分析
通常，競品分析發生在項目的早期，你或許會尋找市面上是否會有競爭對手，然后嘗試著從競品中尋找優點和弱點，以推動自己的產品。如果沒有競爭對手時，往往可以從目標用戶入手，因為用戶實際上擁有自己的解決方案或者說策略，例如在滴滴流行起來之前，對應的用戶群往往使用出租車來代替出行方式。目標用戶在這之前是如何解決他們的需求的？你應該可以獲得一些間接可比的方案，收集用戶的相關想法有利于推動你的產品設計。
在產品上線后的運行階段，仍然需要做競品分析，此時或許存在一些新興的的競品，雖然是后來者，但往往會在交互、體驗或者運營策略等方面碰撞出一些新的創意。根據競品的功能策略，你需要進行一定的調整，不斷對產品迭代優化。除此之外，產品有時需要做一些追隨趨勢的更新，例如視覺風格、新的交互設計語言等。
如何從間接競爭對手那里獲得靈感
間接競爭對手也會給你一定的啟發，作為一個用戶體驗各種產品時，留心那些優秀的設計，可能是視覺方面也可能是交互方面，總之這些優雅的設計將會成為你的靈感之源。然而所有的設計都有其適用場景及背后的設計原理支撐，在海外設計經驗中一再強調的 context（上下文）就是這個意思。
優秀的設計都是最適合自己的產品和策略的設計，而不是最美觀或最的。因為設計不僅僅包涵體驗更是要兼顧業務。同一個設計在一個地方發揮作用并不意味著移植到其他地方仍然有效。
例如一個簡單的登錄模塊的設計，按照常規經驗，以目前微信的受眾數量做參考，可以無腦選擇微信快捷登錄，這無疑是最便捷的方案，但為什么很多產品仍然采用手機登錄？因為一個注冊的手機號碼能為公司的未來帶來極大的增值，每個號碼背后都是一個用戶，且通過手機號可以對這個用戶進行持續的推廣營銷，如拼多多的短信推廣，移動聯通的電話推廣。
所以，一切的設計都應以設計背景，業務訴求為基本原則來進行，盲目的追尋極限的視覺和效率，盲目的信奉設計潮流趨勢都是不可取的。好的設計和時尚的設計不同，好的設計有持久的價值，是美學和體驗的結合，并以基于心理學社會學的用戶研究為后盾。這樣的設計符合用戶的需求同時能為企業帶來收益。而時尚的設計則會隨著時間流逝而銷聲匿跡。
一味追尋潮流的應用程序設計，公然違背基本的可用性慣例，違背交互設計的基本原理，很有可能在市場中失敗。——Prototyper.io UX首席負責人Miklos Philips
競品分析時謹記五個原則
為了保證你所進行的競品分析的有效性，需要謹記以下五個原則。
1.理解背后的需求
分析任何設計之前都需要理解設計背后的核心需求，這并不是簡單的查看表面內容，除了交互體驗上的思考，更要深入產品本身，去更多的理解業務層商業策略等方面的內因。每個設計都有對應的場景、上下文甚至各種限制條件。只有理解這些你才清楚這個設計是否適合你的產品，或者是否有一定的參考意義。
比如觀察淘寶的搜索功能你會發現首頁的搜索和店鋪的搜索有很大差異，即首頁的搜索比重要遠遠大于店鋪的搜索。店鋪中的搜索按鈕僅僅展示一個雙指面積的btn，而首頁則是展示一個接近通欄的搜索條。那么分析下來，店鋪的搜索btn小巧精致，簡易美觀是否應該借鑒，答案是看情況。淘寶首頁入口提供的是一級搜索，涵蓋了淘寶百億級別的商品，因此搜索功能的優先級極高。而店鋪商品有限，用戶瀏覽商品往往按照分類，很少使用搜索功能，這種情況下搜索的優先級很低。
因此，理解設計背后的理念，解決的問題、如此設計的原因才是競品分析重點關注的方向。切記浮于表面。
2.確定真正的競爭者
認清自己的競爭者，他們往往并不僅僅是表面的直接對手。事實上應用程序只是一種幫助用戶達成目標的技術手段從用戶角度，有很多可選方向，而你的產品想要獲得成功，你就要做那個體驗最好，滿意度最高的選項?；叵胍幌拢憷N的功能應用程序是否能實現？答案是肯定的，但現在為止并沒有任何應用程序能夠撼動便利貼的霸主地位。因此，滴滴的競品真的只是其他網約車公司嗎，事實上滴滴最大的競品是出租車。通常，你最強大的對手并一定不是和你一樣的科技產品。
3.通過標準來判斷，而不是個人臆測
每次進行比較都意味著根據某個標準來進行判斷，如何決定兩者的功能孰優孰劣，最好的方法是引入標準或者用數據說話。例如競品某個模塊轉化率高，那必然有其內因。另外，我們可以根據業界的標準來評判產品的可用性體驗，如尼爾森的啟發式評估原則（后面會詳細講到）。
4.盲目模仿是導致失敗的罪魁禍首
在特定環境中行之有效的方法在另一環境中可能根本行不通。每個設計解決方案不僅是針對眼前的問題，而且還針對目標受眾。請記住，良好的設計是仔細的分析研究產生的，需要付出大量的努力來與用理解用戶，定義問題，并 根據上下文構思，最終產出最終設計和評估解決方案。
你可能會說，別人已經驗證了的功能，我們沒必要花費時間去重復測試，但他人的功能是針對特定的場景特定的業務目標，或許并不適用你的產品。所以，在模仿之前，請仔細考慮您的問題與原始設計師的方案匹配程度。
5.用戶測試無可替代
在競品研究中我們需要時刻保持懷疑的態度，在將競品的設計應用于自己的產品之前，需要評估設計背后的需求、場景，以判斷會否適合自家產品。這個過程可以沒有用戶參與，例如選擇專家進行的可用性評估。但最終，在你決定將設計投入自己的產品時，你需要意識到只有真實場景下的用戶測試，才能判斷該設計是否成功。
無處不在的“漢堡菜單”按鈕。最初是Facebook率先取得成功的設計，現在有大量證據表明該設計帶來了很大的可用性問題。通過將圖標與其他導航方式（例如ios的菜單導航）進行比較的A / B測試，發現了這些問題。
時刻留意競爭對手的產品設計有利于你不斷更新和迭代，從而保持競爭優勢，但你必須知道，研究競品只能讓你和它處于一個水平，他不會教給你如何開辟新的想法，如何解決未解決的問題。并且能從競品分析中收獲的有效信息完全取決于你的個人能力和經驗。因此保持質疑，持續思考，以創新意識探索更可能是UX設計師長遠的目標。
NNG的十項UI界面啟發評估的原則
前面提到我們應該通過標準來衡量產品的設計，而不是個人的主觀臆測。尼爾森的啟發式評估原則就是這樣一套可實踐的評估標準，共有十項，主要涉及到用戶體驗、可用性的評估。使用這是個標準能夠評估出大部分的可用性問題。
1系統狀態的可見性
任何情況下都應該顯示易于理解的界面信息和系統狀態，以保證用戶正確執行操作。
這其中其實不僅僅要求“可見”，也要求“隱藏”。因為系統界面的展示目的是使用戶易于理解其中的信息，因此要清晰展示有效信息，同時隱藏無效信息和干擾項。概括來說這一項原則的關鍵在于視覺傳達的效率，如CTA按鈕高亮來聚焦注意力，文字鏈按鈕添加下劃線或箭頭來傳達可點擊的狀態等。
2.系統與用戶習慣的匹配
設計師應根據目標用戶的經驗習慣進行界面設計，如使用符合用戶認知的語言、概念、預測用戶的常規行為方式如單手操作，減輕認知負擔，并使系統更易于使用。
在電腦屏幕右鍵彈出的菜單窗口恰好在鼠標附近，因為用戶當時視覺聚焦于此。移動端閱讀類產品的目錄按鈕總在右下角，因為大部分人使用右手單手操作，而在IPAD端的閱讀產品，目錄置于左下角，因為用戶一般需要雙手持設備，此時左手點擊目錄更符合用戶習慣。
當然，不僅僅要考慮用戶操作習慣，更要考慮用戶的心理預期。這就要用到隱喻，例如按鈕按下后模擬出下沉的視覺效果，再如最早的閱讀類產品模擬真實書架，還原用戶習慣的書架瀏覽查找書籍然后閱讀的體驗。
3.用戶控制和自由
產品應該允許用戶自由控制自己的操作行為，例如可以撤銷重做，或在不同內容間自由跳轉。
4.一致性
界面設計人員應確保在相似的平臺之間維護圖形元素和術語的統一。例如，代表一個類別或概念的圖標在不同的設備上使用時不應代表不同的概念。垃圾桶應當代表刪除、回收等操作，而不是其他的語義。
5.防錯
提前預測可能發生的錯誤，嘗試盡量避免它們，將潛在的錯誤保持在水平。用戶不樂意處理錯誤同時不擅長處理錯誤，為了減少用戶遇到錯誤的，試著消除問題部分。例如驗證碼部分只允許填寫數字，且自動喚起數字鍵盤無法切換字母鍵盤，這樣就防止用戶輸入錯誤信息格式的可能。
6.降低用戶認知負荷
人類注意力是有限的，不要嘗試一次行給用戶灌輸過多信息，試著一次只展示一個核心功能或內容，每個步驟只用來做一件主要的事情。目前主流的注冊流程都遵循這個原則，一次只進行一個步驟，輸入手機號、發送驗證碼、填寫驗證碼、登錄成功。
7.靈活性和效率
使用更少的交互，讓用戶更便捷的完成目標，例如使用縮寫、語音輸入、自動填充等技巧。目前有些產品通過自動填充手機號碼來提高登錄注冊效率，或自動填充短信驗證碼來提高驗證效率，這就是一種優化交互來提高產品使用效率的方式。（但這種方式對權限要求較高）
8.美學原則與極簡設計
減少混亂和多余的元素，不要爭奪用戶注意力，提供清晰可見的導航。根據海外的調研，有三到四成用戶離開一個網站的原因是導航混亂不易理解。
9.幫助用戶識別、診斷錯誤并恢復
采用通俗的語言解釋錯誤的情況并提供解決方案或說明情況。
10.幫助文檔
我們期望不需要說明文檔（類似說明書）也能讓用戶正常使用和產品和解決遇到的問題。但我們仍然需要一定的說明文檔，來解釋特殊情況或常見問題，以保證用戶在需要時能輕易找到解決方案。
文章來源：UI中國
Chartistic是一款通過交互快速編輯數據可視化圖表的app。本文通過對“Chartistic”app進行產品體驗與分析后產出的PRD文檔。該文檔由幾個板塊組成：全局說明、產品說明、頁面詳細功能說明等。
一、文檔綜述
1.1文檔輸出環境
1.2產品簡介
1.3產品總結
二、全局說明
2.1鍵盤說明
2.2按鈕說明
2.3默認設置
2.4限制設定
2.5頁面交互
三、產品說明
3.1產品操作流程
3.2產品功能導圖
3.3頁面流程
四、頁面詳細功能說明
4.1歡迎頁
4.2首頁
4.3圖表編輯頁
4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁
4.3.2智能剪貼畫編輯頁
4.4X軸Y軸編輯頁（柱狀圖/折線圖/面積圖/餅圖）
4.5設置編輯頁
4.5.1柱狀圖/折線圖/面積圖設置編輯頁
4.5.2餅圖設置編輯頁
4.5.3智能剪貼畫設置編輯頁
4.6圖表完成頁
五、總結
Chartistic，一款備受好評的小眾數據可視化app。
在這個到處都充斥著數據，以數據為導向的年代，日常辦公中隨時隨地都有可能需要對或多或少的數據進行可視化處理來幫助分析與演示。
雖然有很多的功能強大的工具可以創建圖表，但是卻沒有多少工具可以使創建更簡單、更具有交互性。
Chartistic無需登錄，打開即用，在移動端以交互的方式編輯數據，一分鐘內創建漂亮的柱狀圖、折線圖、區域圖和餅狀圖。將圖表以圖像的形式導出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!
交互便捷，操作簡單的它已在43個國家/地區投入使用。在新加坡、泰國、菲律賓和越南，名列App Store的年度十佳應用榜單。上線起至今共入選 App Store 精品推薦 9 次，下載量累計24萬次 。
目標用戶：需要對少量數據迅速進行可視化處理的辦公人群
產品定義：快速、簡單的移動端數據可視化工具應用，導出圖表作為PPT等演示工具的補充。
產品特征：
在不同頁面需要輸入編輯時，對應的彈出鍵盤的類型，數字鍵盤只能輸入正數
圖表編輯頁面：
X軸Y軸編輯頁面：
設置編輯頁面：
新建圖表時
圖一
圖二
圖三
圖四
頁面名稱：首頁
入口：歡迎頁后自動跳入
頁面說明：
序號1：點擊出現其他鏈接彈層，首頁頁面置于底部并虛化（如圖三）
序號2：點擊出現新建圖表類型彈層，首頁頁面置于底部并虛化（如圖二）
序號3：
序號4，5：點擊關閉彈屏，首頁頁面置于頂部并解除虛化
序號6：點擊快捷處理按鈕消失，回到首頁，在首頁圖表列表第一個位置添加復制的圖表
序號7：點擊彈屏關閉，快捷按鈕消失，回到首頁，該圖表刪除，列表中該圖表后面的圖表前移填充空缺位置
4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁
圖5
圖6
圖7
圖8
圖9
頁面名稱：柱狀圖/折線圖/面積圖/餅圖圖表編輯頁
入口：
頁面說明：
主頁面：左滑展開展開設置編輯頁面，下滑展開X軸Y軸編輯頁面
序號1：點擊返回首頁
序號2：點擊進入圖表完成頁面
序號3：點擊圖表類型切換為折線圖，數值背景等設置不變，折線顏色為柱狀圖同一風格的單個顏色（如圖6）
序號4：點擊圖表類型切換為面積圖，數值背景等設置不變，折線與面積顏色為柱狀圖同一風格的單個顏色，折線的顏色比面積顏色深一個色號（如圖7）
序號5：點擊圖表類型切換為餅圖，數值背景等設置不變，配色也不變（如圖8）
序號6：單擊–切換圖表顏色風格
序號7，17，18：按住上滑/下滑–修改圓點高度，上方或者下方的對應數值一起修改，左側提示目前高度對應的數值，修改值在設定的Y軸最大值與最小值之間
序號8，9，10，12：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊展開X軸Y軸編輯頁面
序號11：
序號13：點擊后小圈即序號7變成刪除符號如圖9，單擊刪除符號刪除該組數據，當刪除至只剩一組數據時刪除符號變回小圈，不可再刪除
序號14：點擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設置按鈕，隱藏后圖表變為左向，單擊后以上按鈕出現
序號15：點擊展開設置編輯頁面
序號16：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊輸入標題
序號19：點擊餅圖需要修改占比的目標扇形后出現兩個半圓形按鈕，按住按鈕滑動分隔線調整目標扇形角度，按鈕相鄰一邊的扇形同時被增大/減小角度，餅圖中間提示目前目標扇形角度對應的占比
4.3.2 智能剪貼畫編輯頁
頁面名稱：智能剪貼畫編輯頁
入口：
頁面說明：
主頁面：左滑展開展開設置編輯頁面
序號1：按住上下滑動更改有色部分的高度，左側占比數值一起更改，更改范圍為0%-100%
頁面名稱：X軸Y軸編輯頁面
入口：
頁面說明：
餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕
序號1：點擊保留編輯結果，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號2：點擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號3：
序號4：
序號5：點擊編輯文本框與數值框之間出現小刪除按鈕即序號4，點擊刪除對應的該組數據
異常提示：
頁面名稱：設置編輯頁面
入口：
4.5.1 柱狀圖/折線圖/面積圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
值設置功能
頁面說明：
序號2：最大值最高可設置為10000，最大值設置的值需要大于最小值，僅可編輯為整數
序號3：最小值最小可設置為0，最小值設置的值需要小于最大值，僅可編輯為整數
異常提示：
網格設置功能
頁面說明：
序號4：可見性為關閉狀態時，行數與每一間隔的值無法選擇與編輯
序號5：初始默認值為10，可編輯范圍為【0~15】，僅可編輯為整數
序號6：對齊條開啟狀態見圖，在圖表編輯頁面滑動所編輯的數據對應到Y軸上的數值（圖中的0、100、200、300等數值）時停頓一下，左側提示所對應的數值；滑動編輯的數值（如323、546等）不在Y軸上時，不顯示左側的數值提示
序號7：簡單圖表僅保留圖表主體形狀，如上圖
序號8：初始默認值為100，僅可編輯為整數，每一間隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內，考慮到（最大值-最小值）/輸入的間隔值 得到的行數有可能不是整數的問題，實際顯示的行數為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數
異常提示：
邊框設置功能
圖例設置功能
背景設置功能
頁面說明：
序號10：主題文字注釋
序號11：四種主題單選，設計出圖標作為按鈕外觀，下方會出現對應文字注釋，所選擇的背景按鈕外層加一圈黑色示意
圖表樣式設置功能
頁面說明：
序號9：柱狀圖/折線圖/面積圖樣式說明如圖
4.5.2 餅圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
表格設置功能
頁面說明：
豎向表僅可選擇左對齊或者右對齊，橫向表可選擇左對齊/右對齊/居中。
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
餅圖樣式說明如圖
4.5.3 智能剪貼畫設置編輯頁
圖像搜索功能
頁面說明：
序號1：僅可輸入英文名稱搜索，無編輯內容時文本框內容為Search，字體淺灰色，輸入內容后字體變為黑色
異常提示：
當移動端無網絡時，搜索框下方“在線搜索圖像”更改為“連接中斷”，搜索框點擊無反應
標題設置功能
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
智能剪貼畫樣式說明如圖
頁面名稱：圖表完成頁
入口：
頁面說明：
序號1：點擊返回首頁
序號2：點擊進入圖表編輯頁面
序號3：點擊導出保存到本地或者分享
以上便是我本次倒推撰寫的Chartistic的產品需求文檔，格式參考倒推“潮汐”APP的產品需求文檔。
這款App是一款很實用的手機應用，交互很有特色，因為過于追求操作的簡便，導致功能局限比較大，對于App的未來優化方向，筆者認為可以在以下幾個方向嘗試：
這是本人第一次撰寫的產品需求文檔，一定有諸多不足，希望各位前輩不吝賜教，感激不盡！希望可以成為一名產品經理，創造出對用戶有價值的產品，不求做改變世界的產品，只求改變自己，改變眼前。
文章來源：人人都是產品經理
大部分交互設計師接到需求后，就開始分析下競品、然后結合自己產品和自己的想法，就著手交互原型制作了，在這樣一個設計流程中，交互設計師很難有體系化的思考。
有沒有一套體系化的設計思路，讓交互設計師做出的方案又專業、又全面、又經得起挑戰和用戶檢驗的設計方案呢？
本文是我梳理的一套體系化設計流程與思路，希望可以幫到大家。體系化設計思路大綱如下：
作為一個交互設計師。在我們接到需求之后，首先需要弄清楚的是產生需求的業務背景是什么。其次是基于業務背景了解產品的目標是什么。最后弄清楚產品的用戶人群有哪些，用戶目標是哪些。
交互設計師通過從產品經理或者其他需求發起方那里了解需求生產的業務背景，了解為什么要做這個需求。在了解清楚之后，追溯需求最原始本質。
在我們實際工作的大部分情況下，大部分產品經理不會在需求文檔中將業務背景寫清晰，這時候我們交互設計師就可以將業務背景在交互文檔中輸出，并清晰的展示出來。
1. 業務背景是什么？
業務背景通常是我們為什么要做這個功能。通過做這個功能，對業務有什么幫助。通過業務背景，我們可以推演出業務訴求，并得到對應的產品目標。
2. 產品目標是什么？
產品目標是產品能得到什么樣的結果，對產品來說可以獲得什么樣的好處。所以在交互文檔的設計中要重點體現出產品目標。通過明確產品目標，可以清晰的指導我們做交互方案。
3. 用戶人群是哪些？
用戶人群主要是通過我們對現有產品的用戶畫像得到，并推算出使用這個需求的用戶人群是哪一類人，通過明確的用戶人群，這樣我們在做設計過程中，可以很清晰知道這個需求為誰而做。
4. 用戶目標是什么？
用戶希望通過使用這個功能達到什么樣的好處或目的。
5. 設計目標是什么？
通過業務背景、用戶人群、用戶目標和產品目標拆解出對應的設計目標。
以登錄注冊為例。業務背景是目前產品的登錄和注冊的效果不理想。對應的用戶人群分為兩類，分別為新用戶的注冊流程和老用戶的登錄流程。用戶目標是方便快速的完成登錄注冊流程，越簡單越快越好。產品目標是提升登錄注冊的完成率。
設計目標是拆解，如何能提高登錄注冊的完成率。那么設計師可以拿到登錄注冊的完成流程，看看登錄注冊過程中，哪些步驟轉化率低，那么對轉化率低的地方進行設計優化。
目標拆解就是對頁面進行數據提升具體優化方案，例如文案問題、視覺布局問題、交互路徑問題等。
對于設計師來說設計方法有很多種。例如常見的有：目標導向、數據分析、用戶調研、設計走查、場景化設計、用戶體驗地圖、競品分析等。
在做設計方案過程中，一般不會將上述的方法全部用到，更多的是使用其中的一種或者幾種混合使用。
根據具體的需求選擇適合的方法。例如在做登錄注冊這個優化流程方案過程中，可以通過數據分析找到轉化率低和設計走查思考如何提升數據，就可以完成設計目標。
1. 不同場景梳理
我們需要以場景的思維做場景分析，通過場景分析就可以清晰地描述這些場景，從而確定用戶的需求，并在這基礎上用交互方案滿足需求。
舉個栗子，產品提出一個需求：應用添加「商品列表按照價格從低到高排序」的功能，這還是老思維，是在「定義我們的應用」；
而如果從場景的角度來思考，用戶搜索某種商品，在列表頁會列出一長串商品，而用戶此時只想快速找到符合他的要求的那一個；而有些用戶在挑選的時候，會需要買價格便宜的，此時排序功能就是用戶的需求。
這樣從場景來理解，會更清楚地理解需求發生的環境，便于做出好設計。
比如，順著排序的場景，可以進一步想：有這樣需求的用戶在我們的應用里多嗎？如果多，那么意味著用戶經常需要進行排序的操作，所以在設計的時候，可以把排序的入口放的明顯一點，好操作一點，方便用戶輕松地進行排序。
對于使用滴滴快車的用戶，整個流程包含三個階段，分別為上車前，坐車中和下車后。每個階段都存在多種用戶使用場景。
2. 不同角色用戶
有時候需要考慮不同角色的用戶，例如后臺系統，需要同時考慮普通用戶、管理員角色和超級管理員。
三個不同角色的使用權限也是完全不同的。權限：普通用戶 < 管理員角色 <超級管理員。三種角色的主操作流程也是不一樣的，在設計過程中需要差異化設計。
3. 設計不同流程
明確設計目標、設計方法確定、弄清楚不同場景。接下來就是設計不同的流程。
一般先設計功能入口流程，接下來就是主流程和支線流程。最后才設計異常流程。
4. 方案細化和走查
在涉及到異常場景，且可以全局性復用的情況，則只需要全局性組件說明即可，不用每個流程都展示其異常場景組件或者頁面。
全局組件指的是整個產品通用的組件，例如全局斷網，操作成功、操作失敗、加載、空數據界面，404 等
全局斷網：一般是在首頁使用 tips 提示。用戶在其他界面點擊操作時，也會出現 toast 反饋提示用戶。也有一些 app 在用戶進入后出現對話框提示用戶網絡異常。相對于對話框，使用 tips 對用戶的干擾度更小。
操作成功：一般操作成功都是根據具體的使用場景出現對應的提示。
操作失?。寒惓Ｇ闆r導致操作失敗，這時需要統一的提示，通常使用 toast，也有一些使用對話框強提示用戶。
加載：涉及到全局加載和局部加載，全局加載在設計中要統一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區域加載等。
空數據類型一共有三類：
通過核心指標判斷設計方案是否符合預期，以此驗證設計方案是否成功，并為后續產品的迭代優化做依據。
1. 關注設計的核心指標
設計過程中，要關注設計的核心指標，針對于核心指標，進行針對性的設計。
如果改版的最重要（核心）的指標是任務流程完成率，先查看用戶操作流失率，然后分析找出流失原因，給出對應的優化方案。等到優化方案的產品版本上線后，對比完成率數據變化。
如果改版的最重要（核心）指標是人均觀看次數，則要思考可通過哪些設計策略可提升產品的人均播放次數。
舉個例子，新浪微博，以前版本用戶看完視頻后，視頻會有重播按鈕和推薦視頻，用戶只有進行下一步點擊才能播放下一個視頻。
改版后看完視頻會自動切換到下一個視頻。這樣的設計策略雖然綁架了用戶的行為，用戶從一個主動接收者，變成了一個被動接收者，但是這種策略能有效的提升人均播放次數。
2. 核心指標帶來的價值/收益
當驗證了核心指標往好的方向發展，這時候，就需要總結核心指標帶來的價值和收益，這樣的話設計價值才可以直接被量化。
舉個例子：一個 banner 的點擊率達到 3% 的時候，每天 GMV 約 200 萬，當重新設計了這個 banner，同時其他條件保持不變，點擊率提升到了 6%，這時候通過數據查看每天的 GMV 是多少，如果達到了 400 萬，那么這增加的 200 萬的 GMV 則是通過設計優化所帶來的。
設計師在交付稿件后，容易松懈，以為項目告一段落，就疏于后續的跟進工作。其實后續的跟進也很重要。產品測試版上線后，交互設計師應該跟進后續的走查和設計問題的反饋。
通過數據分析，確定上線的方案有哪些問題需要優化，建立需求池方便后續跟進優化，不斷完善產品設計。
文章來源：優設
藍藍設計的小編 http://www.syprn.cn