頁面排版布局離不開基本的視覺心理學(xué)知識，交互設(shè)計(jì)師需要學(xué)習(xí)和掌握的視覺心理學(xué)，以及如何將其應(yīng)用到具體的頁面設(shè)計(jì)中。
在日常生活中經(jīng)常會有一些尷尬的場面，比如這些打不開的門，這里稱之為諾曼門，因?yàn)橹Z曼在他的視覺心理學(xué)這本書里面特意強(qiáng)調(diào)過這種門。我們看來他是一個拉的指示，但是往往他需要推才能打開，除了這種打不開的門之外還有一些，數(shù)據(jù)線老是插不進(jìn)去。
日常生活當(dāng)中也出現(xiàn)了大量這種不美好的設(shè)計(jì)，糟糕的設(shè)計(jì)往往是有一些錯誤的視覺引導(dǎo)，復(fù)雜的一些信息分類。完全不符合我們平時一些閱讀或者認(rèn)知的習(xí)慣。使用過程中各種不爽，同樣在互聯(lián)網(wǎng)層面中，這樣的設(shè)計(jì)也是隨處可見。
比如說登錄頁面，大家看一下這個頁面存在哪些問題。
這是某類技術(shù)類產(chǎn)品一個登錄頁面，在提供了網(wǎng)站賬號登錄的同時，為了讓用戶能夠快速的登錄這個平臺，還提供了一個第三方登錄，右側(cè)的網(wǎng)易通行證，在市面上的普及率還是蠻高的。
在左右兩側(cè)分別是一個平等的賬號登錄，一個網(wǎng)易云賬號一個網(wǎng)易通行證。兩種賬號是平等的地位，通過布局發(fā)現(xiàn)，網(wǎng)易通行證似乎屬于網(wǎng)易云賬號，視覺頁面給我們這樣一個誤導(dǎo)。
第二個問題，這個區(qū)域，會發(fā)現(xiàn)很多干擾信息，這里我們只是想提供一個快速登錄的入口，但是額外提供了一些很繁瑣的小圖標(biāo)，但這些小圖標(biāo)對我們登錄是沒有任何實(shí)質(zhì)性的效果的。
第三個問題，是頂部，網(wǎng)易云賬號和通行證是平等的關(guān)系，通過這樣一個視覺效果發(fā)現(xiàn)，好像網(wǎng)易通行證隸屬于網(wǎng)易云賬號。似乎是從它里面抽出來的一部分，其次是右上角的叉號，這樣的布局會讓大家以為。把網(wǎng)易通行證這個頁面給叉掉。而不是把整個登錄體系給關(guān)掉，有些問題是頁面的視覺引導(dǎo)錯誤造成的。
因此掌握用戶觀察和思考的規(guī)律，才能設(shè)計(jì)出符號用戶預(yù)期的產(chǎn)品。也才能談得上極致的用戶體驗(yàn)，為了讓這種極致的體驗(yàn)做的更好，交互設(shè)計(jì)師往往會通過具體的視覺頁面。來向用戶展示使用場景，繼而滿足用戶的需求。中間的視覺界面也成了連接業(yè)務(wù)流程和用戶體驗(yàn)的一個重要橋梁。
通過視覺界面可以將，不可見的這種信息架構(gòu)和任務(wù)流程轉(zhuǎn)變成一種可知的用戶體驗(yàn)。
在網(wǎng)易云閱讀這個例子中，在網(wǎng)易云閱讀支付的流程優(yōu)化過程中，當(dāng)時我們發(fā)現(xiàn)支付流程的流失率很高。很多人在閱讀過程中需要去支付的時候，很多人都不愿意支付。主要原因是支付過程環(huán)節(jié)過于復(fù)雜，步驟過多。怎樣優(yōu)化這個流程，讓整個流程通過業(yè)務(wù)流程圖的方式繪制出來。
通過去除了購物車，合并了結(jié)算和充值的這個頁面。來簡化了整個支付的流程，看到流程中打叉和合并修改標(biāo)注的地方，都是進(jìn)行了一些優(yōu)化的地方。這些流程優(yōu)化的地方最終也落地成了一些用戶可以見的產(chǎn)品界面。
簡化的這個流程和頁面，能夠讓用戶在整個沉浸式的閱讀過程中，它不得已要去完成支付的時候，能夠以一種很快捷的方式去完成，然后在回到之前沉浸式閱讀體驗(yàn)中，整個支付流程很流暢所以給用戶提供了一種快速愉悅的支付體驗(yàn)。
這種流暢的用戶體驗(yàn)，最終也轉(zhuǎn)變成我們整個商業(yè)上的一個目的，能夠有一個支付上的顯著性提高
標(biāo)注的數(shù)據(jù)可以看到支付量有一個明顯的上升的，
最終的視覺頁面才能滿足產(chǎn)品和用戶這種雙方的一個需求。在實(shí)際過程中交互設(shè)計(jì)師會構(gòu)建很多用戶體驗(yàn)或者說是使用流程。
比如在異性偶遇這個頁面里，通過滑動的效果讓用戶感覺到我們是隨機(jī)的去翻看美女的感覺，有一種偶遇的體驗(yàn)在里面。
其次是朋友地圖，有一種通過位置關(guān)系上的布局，讓大家能夠感知到。我自己和周圍朋友之間的一個空間位置上的關(guān)系，能夠感知到我的朋友都在什么地方，實(shí)際空間上的心理體驗(yàn)，反推到我們的具體頁面設(shè)計(jì)上。
通過拼車頁面能夠?qū)崟r模擬車上的一個場景，可以看到車上是坐了幾個人。分別是誰來模擬現(xiàn)實(shí)中這樣去拼車的一個用戶體驗(yàn)。
網(wǎng)易云音樂的播放界面以黑膠唱片的形式，來模擬音樂播放的用戶體驗(yàn)。讓用戶沉浸在黑膠唱片的播放過程中
以上這些都是交互設(shè)計(jì)師，通過具體的頁面來構(gòu)建了一個用戶的使用場景和用戶體驗(yàn)，交互設(shè)計(jì)師在實(shí)際工作中都是以線框圖來展示具體的交互界面。而將具體頁面的任務(wù)操作，信息排版以及信息間的層級關(guān)系傳遞給視覺設(shè)計(jì)師。
視覺設(shè)計(jì)師會在我們交互稿的基礎(chǔ)上，來完成最終的視覺效果。即使交互設(shè)計(jì)師能夠很好的傳遞上述所說的層級關(guān)系，頁面布局的同時。也可能會出現(xiàn)紕漏
比如現(xiàn)在看到網(wǎng)易云信的例子，這是工具類產(chǎn)品移動端的著陸頁，是一個H5頁面，左側(cè)是我們交互設(shè)計(jì)師提供的一個交互設(shè)計(jì)方案。這個方案是希望我們的用戶在他的一個H5頁面去查看我們網(wǎng)易云信的一些介紹，然后將具體的設(shè)計(jì)方案移交給我們的視覺同學(xué)。
視覺給我們的第一個方案，在這個方案里面背景是一個女性。一個很孤獨(dú)的場景，會發(fā)現(xiàn)在這樣一個工具性很強(qiáng)的一個產(chǎn)品里面，出現(xiàn)了一個極強(qiáng)的社交暗示的一個背景。
其實(shí)這里完全不符合我們整個產(chǎn)品的一個風(fēng)格，也是不符號我們具體的設(shè)計(jì)方案的。經(jīng)過和視覺去溝通，跟他去傳遞我們整個頁面所需要傳遞的這種工具類，一種嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)風(fēng)格，最終我們得到了第二份稿子
在第二份方案里，我們看到通過純色的背景，來渲染一種安全、穩(wěn)定的情感在里面。它也完全符合我們網(wǎng)易云信，以真實(shí)穩(wěn)定的IM服務(wù)標(biāo)榜我們這樣一個產(chǎn)品定位。
通過這個例子我們可以看到，出現(xiàn)這個紕漏是在我們的交互設(shè)計(jì)師。在傳遞我們具體的設(shè)計(jì)方案的過程中，缺失了對視覺界面情感元素的要求。因此也就造成了視覺設(shè)計(jì)師在去設(shè)計(jì)這個頁面的時候，在情感把握上出現(xiàn)了一些紕漏。
交互設(shè)計(jì)師是要懂得視覺心理學(xué)，因?yàn)樗軌驇椭覀兏玫厝鬟f我們這個頁面所需要傳遞的一些情感因素。
標(biāo)題一和下面具體的內(nèi)容，以及標(biāo)題二我們會錯誤的認(rèn)為標(biāo)題二和內(nèi)容是對應(yīng)的關(guān)系。但實(shí)際上往往是期望標(biāo)題一和內(nèi)容是對應(yīng)起來的。但是由于間距的關(guān)系會有這樣的誤解，但是通過一些調(diào)整比如是這樣是不是好很多。
調(diào)研了標(biāo)題和內(nèi)容之間的間距，整個邏輯關(guān)系會清晰很多。為什么會有這樣的關(guān)系了，這里就講到第一個知識點(diǎn)。
這種親近被大量用到了分組中，利用間距關(guān)系來做組建、分組的方式。被大量的用在windows Phone的設(shè)計(jì)里面。而且一直延續(xù)到至今這樣的頁面少去了中間的分隔線，整個頁面看起來簡潔干凈
當(dāng)用戶看到兩個文案的時候，同樣是藍(lán)色的字體，下劃線我們期望的反饋是一樣的，但是當(dāng)我們?nèi)c(diǎn)擊的時候重新發(fā)送密碼找回郵件的時候，系統(tǒng)會觸發(fā)一個發(fā)送郵件的程度，當(dāng)我們點(diǎn)擊下面的數(shù)字的時候卻沒有任何反饋。
但我們會通過上面的視覺信息來判斷同樣的藍(lán)色字體，同樣的下劃線往往是一樣的反饋。我們?yōu)槭裁磿羞@樣的預(yù)期了，這里就講到了相似性
上圖的圓點(diǎn)會傾向于是縱向排列的，那么如果改變一組的顏色了
圓點(diǎn)馬上會按照橫向去排列了，顏色上的相似會強(qiáng)烈的引導(dǎo)我們的視覺，促使我們認(rèn)為這些圓點(diǎn)是橫向排列的，那么這些又怎樣應(yīng)用到我們的設(shè)計(jì)中了。
這是web端的一個表單頁面，表單總共有5列，每一列的間距很大?？吹竭@些表單的時候會傾向于縱向去閱讀這些信息，但是我們往往希望用戶去橫向閱讀信息
那么怎樣幫助用戶來做這樣的閱讀了，我們加了一個陰影，就不是縱向閱讀而是橫向閱讀了。
這里所說的相似包括了很多層面的信息，背景色、顏色只是其中的一種，還包括方向、大小以及其他因素。
既然有相似它的對立面就有不相似，或者稱之為對比。這些不相似或者相似，會被我們應(yīng)用到大量的一些比如導(dǎo)航設(shè)計(jì)里面。
這里它有了4個導(dǎo)航頁，我們設(shè)計(jì)了相同的視覺信息，讓用戶快速來判斷它是4個導(dǎo)航頁，但是又想讓用戶知道他當(dāng)前處于哪個頁面。在第一幀時間線這里。把logo的顏色做了一些變化，讓用戶感知到他當(dāng)前屬于時間線這個table頁。
用戶也可能會看到中間是有一個紅色的入口，和其他table頁是不一樣的。我們點(diǎn)擊看下效果
原來它是一個發(fā)送的入口，我們會看到它在設(shè)計(jì)上是和其他table頁面是不一樣的，做為一個快速入口，通過與其他的table頁的一個區(qū)別。讓用戶快速識別到它和其它是不一樣的，這里經(jīng)常會用到一個對比。同樣這些也可以用到我們一些網(wǎng)頁設(shè)計(jì)里面來，像右邊的這個案例。Mac端很普通的一個彈窗
底部是有一個按鈕分別是刪除、取消、存儲，在這樣一個彈窗里面，我們傾向于讓用戶做一些存儲的操作。以避免給用戶造成一些不可挽回的后果，不僅在布局上做一些調(diào)整，同樣在存儲按鈕上加了一個底色，來幫助用戶做這樣的判斷。
這里加一個小提示，叫相似性可以幫助我們來識別哪些是同類，做出快速的判斷。而對比可以表明彼此之間的差異，做出適當(dāng)?shù)囊龑?dǎo)。
接近性可以幫助我們進(jìn)行分組，像這種情況下有大量的信息丟在這里。即使我們通過一些間距的調(diào)整，但是依然看起來不是很清晰，也很難判斷上下的一個組別關(guān)系，這里上下一共有兩個組別，那么有沒有好的方法
嘗試性的加了一個邊框，有沒有突然間效果很明顯了，而且能迅速的通過邊框來知覺到上下是有兩個分組的，那么為什么會有這樣的效果了。
這里就講到封閉性。封閉性就是傾向于將殘缺的輪廓加以補(bǔ)充，使之成為一個完整的閉合，通俗來講就是會將殘缺的部分自行腦補(bǔ)，補(bǔ)成一個完整的圖形，這些大量的用到logo設(shè)計(jì)里面，像左邊這張圖即可以快速分辨出這款PONY的鞋以及和艾克貝斯這個logo的結(jié)合
即使這個鞋是被鏤空掉的，但是依然能看到logo在里面。在一些APP的頁面里同樣可以用這樣的原理進(jìn)行分組，前面分組講到的間距，這里跟大家講的是線框或者背景色。
圖上右邊是facebook的頁面，這里是通過一個白色的背景或者白色的邊框，將它的狀態(tài)全部框在一起，他的頭像、信息、發(fā)送的圖片，以及下面的底部操作，讓我們來知覺這些全部都是一組信息，這里就是用邊框的方式來分組。
常見的分組模式都有哪些了，
第一個通過一些間距效果來達(dá)到把不同元素區(qū)分出來，來迅速的知覺到它們是不一樣的。我們稱之為點(diǎn)也就是前面講的接近性。
第二個用橫線的方式來表明組與組之間的差異，就這是之前講到的相似性的一個反面應(yīng)用，中間的橫線與下面兩個橫線形成了鮮明的對比。能夠幫我們快速知覺到上面和下面是兩個分組
第三個通過白色的背景將整個活動框在里面，這就是剛剛講的閉合性，也就是通常所說的面。
三個方式各有千秋，也是根據(jù)不同的使用場景，來具體應(yīng)用到產(chǎn)品設(shè)計(jì)里面。
交互設(shè)計(jì)師時常也會談到流程上的閉環(huán)，或者體驗(yàn)上的閉環(huán)實(shí)際上就是對一個完整狀態(tài)，有個認(rèn)知傾向。比如在購物車設(shè)計(jì)的時候，當(dāng)我們點(diǎn)擊了一個添加按鈕，就需要系統(tǒng)給我們反饋是否添加成功，以及添加成功之后的一些效果。
這些都是地完整狀態(tài)的一個傾向而已，在做流程設(shè)計(jì)的時候也要考慮到封閉性，封閉性不僅僅可以應(yīng)用到具體的頁面布局里，也可以應(yīng)用到流程設(shè)計(jì)是來。
這里需求是說我們要拉很多人，去發(fā)起一次多人通話，但是底部的展示區(qū)域終究是有限的，怎么在有限的區(qū)域展示更多的人被選中了，第一個方案直列了四個被選中的頭像，以及當(dāng)前被選中的數(shù)量，顯然不是最好的
第二種方案在最左邊加了一個半遮擋人頭，通過這種方案我們可以迅速的判斷，原來左邊還有人。也會傾向于認(rèn)為它的左邊還繼續(xù)有人，但這種方案還不是很理想
我們在左邊不僅僅露出半個頭，會把左邊所有沒有展示的人的頭像全部都疊加在一起，通過整個頭像的疊加來暗示用戶這里還有很多人，顯然這種方案是最好的，最終也選擇了第三種方案
為什么我們會認(rèn)為我們看不到的地方，還會有很多信息存在呢，人做判斷的一個依據(jù)是什么？
就是連續(xù)性。即使說有些信息我們看不到，但是我們通過它外周的信息來幫助我們，或讓我們覺得這里還有很多的信息存在，可能在有些時候我們在UI設(shè)計(jì)里，稱之為視覺流。但我們這里更習(xí)慣性稱之為連續(xù)性。
圖中是云信的一個客戶案例，下面列舉了使用云信的眾多產(chǎn)品的一些logo圖片，但是這個區(qū)域終究是有限的，那么怎樣來告訴用戶很多的產(chǎn)品在使用我們的云信了，這里采用了一個播放滾動的效果，當(dāng)用戶看到這里我們的logo是不斷在滾動的。來暗示我們，你看到的僅僅是使用我們產(chǎn)品的一部分
還有很多你還沒有看到，以此暗示我們有大批量的用戶，除了在網(wǎng)頁端在移動端我們還有一些什么樣的使用方式了。
第一個是模擬現(xiàn)實(shí)中圖片疊加的效果，當(dāng)我們手動去滑動的時候，可以快速地翻動照片，第二個是采用了半遮擋的方式，可以迅速的看到右邊圖片是沒有完全展示出來的，我們習(xí)慣性的或者下意識的會去滑動照片，來查看一些沒有查看到的圖片，第三個是通過右邊的一個小箭頭來暗示除了你現(xiàn)在看到的，還有大量的信息沒有展示出來，三種方式并沒有好壞之分。只不過根據(jù)當(dāng)前用戶的使用場景，或者說產(chǎn)品的目的來選擇適當(dāng)?shù)姆绞蕉?/p>
整個頁面向右上角傾斜，有沒有辦法視覺更平衡一些，嘗試移動按鈕的位置，當(dāng)我們把下部的按鈕從左邊移動到右邊的時候，有沒有感覺整個視覺更加平衡
因?yàn)檫@時候我們的整個視覺流是之字型的，整個是牌一個平衡的狀態(tài)
為什么為覺得這樣視覺就會平衡，看起來就會舒服了
這里就涉及到一個對稱性，視覺元素是有重量的，根據(jù)顏色不同會賦予視覺物體不同的重量，會根據(jù)視覺元素重量的不同，來營造整個頁面的平衡。
這里在web端產(chǎn)品，一個很標(biāo)準(zhǔn)的平衡設(shè)計(jì)方案，一個title然后下面四個元素，并不是每個頁面都要做到平衡，我們可以做到不平衡。因?yàn)槲覀儠揽恳曈X的重量來引導(dǎo)用戶的視覺流，什么叫視覺的重量了
一個杠桿上有一個大球一個小球的示例，同樣顏色質(zhì)地的兩個球，大球被小球翹起來有沒有感覺怪怪的。因?yàn)槲覀儠J(rèn)為同樣顏色質(zhì)地的兩個球，重量必須是大的球重量會更大。但是重量大的反而被小的敲了起來，必須不符合用戶的認(rèn)知模型，如果我們把大球的顏色變談，大球被小球翹了起來。
是不是整個都會變得合理一些了，這就是講到的視覺重量。視覺重量或者視覺流，怎么樣來運(yùn)用到具體的頁面設(shè)計(jì)中了，在很多官網(wǎng)或者首頁里，會依據(jù)視覺重量來引導(dǎo)用戶的視覺流
這個例子左右的一個對稱布局，但是視覺流往往是之字形的
因?yàn)闀鶕?jù)頁面的重量，來瀏覽整個頁面。
當(dāng)用戶迫切需要撥打電話，但是由于各種原因，我們暫時不能提供這種服務(wù)，我們需要向用戶表達(dá)一種歉意，以及安撫用戶這種很急躁的心情，但是現(xiàn)在我們頁面所表達(dá)的情感，是一只雞很悠閑的坐在哪里，好像事件事情都跟它沒關(guān)系一樣，這時候用戶的急躁情緒反而會被激怒，所以整個頁面所要表達(dá)出的一種情感訴求，是沒有準(zhǔn)確傳達(dá)出來的。
什么是頁面所傳達(dá)出的情感
就是我們一些視覺元素，或者色彩都有一定的情感在里面，比如說我們整個色彩可以幫助網(wǎng)站去營造整體的氛圍，比如fitbit網(wǎng)站是一個運(yùn)動網(wǎng)站，通過整個色調(diào)來傳遞出積極健康的一個整體氛圍，而我們交互設(shè)計(jì)師需要知道，我們整個頁面需要傳遞出的這種情感氛圍是怎么樣的。
但是我們有時候也并不是需要完完全全去懂得，怎么去運(yùn)用這些色彩，但是我們可以把這些需求傳遞給我們視覺設(shè)計(jì)師。
就像我們實(shí)際過程中，我們需要明確每個頁面需要傳遞出的情感需求，并準(zhǔn)確的傳遞給視覺設(shè)計(jì)師，
接近性：物體之間的間距
相似性：兩個物體是不是一樣的，包括大小、方向、顏色
封閉性：它們是不是在一直統(tǒng)一的閉合空間
連續(xù)性:是不是一個連續(xù)的物體，或者說它們是一個被我們知覺為是一個連續(xù)的物體
對稱性：
情感性：
做為交互設(shè)計(jì)師這些視覺知識，能夠幫助我們，在設(shè)計(jì)方案中傳遞出整個頁面的一個邏輯性關(guān)系，以及情感上的訴求來最終提升，來最終提升整個設(shè)計(jì)方案的質(zhì)量
頁面布局的基本步驟和基本知識
頁面是連接用戶和產(chǎn)品的重要橋梁，用戶對于產(chǎn)品的一個體驗(yàn)和感知，都是發(fā)生在具體的頁面上的。
頁面不只是手機(jī)APP中的一個界面，也可能是一個觸摸板、是個投影、紙片、甚至是包裝盒，這個頁面實(shí)際上是承擔(dān)了我們產(chǎn)品的功能，也飽含了設(shè)計(jì)師的設(shè)計(jì)理念在里面，最最重要的是頁面滿足了我們用戶某方面的需求。
頁面是非常非常重要的載體，那么如何判斷這個載體的好與壞。如何來判斷優(yōu)與劣了
微信、陌陌、易信，查看附件的人，分別采取了不同的設(shè)計(jì)方案，到底哪個設(shè)計(jì)方案會更好一點(diǎn)了。如果直接這樣分析會無從下手，如果真的要說也無外乎會說一些，顏色設(shè)計(jì)風(fēng)格一類的評論，但終究不能從一個交互設(shè)計(jì)的角度來評判三個界面的好與壞。
微信頁面是基于半熟人的社交，陌生人社交并不是最重要的，雖然在初期的時候，對微信幫助很大。但在這個頁面重點(diǎn)是展示附近的人，以及這個人的個人信息，具體還是一個熟人社交、半熟人社交。
陌陌基于約炮的純陌生人社交，在頁面上更加突出了人的照片，以大圖的形式展示個人的魅力。以達(dá)到吸引異性的目的，這是陌陌的做法
易信作為一個純熟人的社交，朋友地圖重點(diǎn)展示周圍熟人的分布情況，而這些熟人都不需要展示詳細(xì)的個人信息、性別，因?yàn)檫@些都是知道的都是熟人，重點(diǎn)展示的是他和我們之間的一個位置關(guān)系，三個頁面的布局都滿足了各自產(chǎn)品的需求，也都可以稱之為比較優(yōu)秀的頁面設(shè)計(jì)。
頁面最重要的衡量標(biāo)準(zhǔn)還是有用，能夠滿足用戶和產(chǎn)品雙方的需求。
用戶帶著他的目的和需求到我們頁面上來的，用戶到頁面要做兩件事情，獲取信息和操作流程等于完成任務(wù)。
任務(wù)是比較廣泛的意義，用戶到頁面后獲取信息進(jìn)行流程操作來完成他的任務(wù)，在不同的任務(wù)和目的下，也就決定了頁面的排版布局是不一樣的。
根據(jù)用戶數(shù)據(jù)，用戶到支付頁面流失率很高成功率很低，很多用戶會流失，支付寶經(jīng)過這樣的嘗試。采用半遮罩的設(shè)計(jì)，能用戶一種沒有頁面跳轉(zhuǎn)的感覺，給用戶一種我都是在當(dāng)前頁面操作這樣一個體驗(yàn)，大大提高了用戶在整個操作過程中，流暢的心理預(yù)期，也提高了整個用戶的付款率、成功率。
想要設(shè)計(jì)出符合用戶和產(chǎn)品兩方面需求的頁面：
反是脫離這一點(diǎn)，或者說沒有想清楚這一點(diǎn)，頁面的設(shè)計(jì)就無從談起。
舉例網(wǎng)易嚴(yán)選的頁面設(shè)計(jì)：
第一步先對信息進(jìn)行分類
比如易信改版過程中，對易信的信息架構(gòu)進(jìn)行了梳理，將每個獨(dú)立的功能模塊寫在一張卡片上面，讓用戶按照自己的理解進(jìn)行組織分類。
拿發(fā)現(xiàn)來舉例，用戶會把朋友圈、問一問、曬一曬..、更多功能都屬于發(fā)現(xiàn)里面，用戶認(rèn)為免費(fèi)短信、電話留言、傳文件到電腦等，屬于發(fā)現(xiàn)里面，但是又不同于剛才其他那幾類，它們使用的頻率可能沒那么高，所以我們將發(fā)現(xiàn)里面剛才提到的這些功能，全部放到一個叫更多功能里面去。
逛商城通常會按照男裝、女裝去選擇，比如杭州的銀泰二樓女裝，三樓男裝。根據(jù)這個到了相應(yīng)的樓層，然后再根據(jù)上裝下裝去進(jìn)行選擇，如果上上裝會選擇我是去買一件T恤還是買一件襯衣，導(dǎo)航設(shè)計(jì)就是現(xiàn)實(shí)生活當(dāng)中的一個映射。
右圖的分類組織完成按照我們?nèi)粘Ｉ钪羞x擇衣服的一種方式進(jìn)行布局和設(shè)置的。用戶在用的時候不需要額外的學(xué)習(xí)成本，不需要額外的思考就能夠按照，導(dǎo)航去選擇自己的商品。具有極高的易用性在里面
考拉海購的例子，并沒有按照產(chǎn)品的成分進(jìn)行分類，而是以具體的功效做為一個類別，因?yàn)槲覀兌贾牢覀內(nèi)p肥應(yīng)該去選擇一個減肥瘦身的補(bǔ)品，但是我們不知道我們具體去買蛋白粉了還是買其他什么的。我們可以不知道自己想要什么東西，但我們可以他具體具備什么樣的功效。屬于哪個類別
導(dǎo)航設(shè)計(jì)里面，按照用戶的視角去設(shè)計(jì)的按照用戶思考邏輯設(shè)計(jì)，如果讓用戶自己去思考用戶就可能離開你了。
卡版分類法也用到排版設(shè)計(jì)中
回到網(wǎng)易嚴(yán)選產(chǎn)品頁
如何將一個抽象的需求轉(zhuǎn)變?yōu)橐粋€具體的功能
用戶說他想要一匹更快的馬，其實(shí)他想要的是更快的速度，所以經(jīng)典的福特汽車就誕生了。
將喜歡的商品收藏起來
列出的一些需要的功能點(diǎn)，面對這么多功能點(diǎn)怎么進(jìn)行組織分類了
使用前面提到的卡片分類法得到結(jié)果
將業(yè)務(wù)需求和用戶需求轉(zhuǎn)變?yōu)楣δ茳c(diǎn)，將將功能點(diǎn)進(jìn)行了組織分類
每個用戶到具體的頁面來的時候都是帶著他的需求來的，都是為了獲取自己的信息，然后進(jìn)行自己需求完成的任務(wù)，可以通過具體來設(shè)計(jì)用戶任務(wù)的一個方式，來確定頁面上所有信息的主次關(guān)系，來幫助我們判斷頁面上內(nèi)容的主次關(guān)系，以此來做出頁面設(shè)計(jì)
比如在嚴(yán)選的推薦頁里，主要任務(wù)是查看推薦的各類商品，包含已經(jīng)上線的還有首發(fā)的新品，所以在整個頁面的視覺設(shè)計(jì)上分為三個區(qū)塊。
banner位：主要進(jìn)行一些熱推的商品展示，來做導(dǎo)流
新品首先：推薦剛剛上線的一新新品，引導(dǎo)用戶查看信息或者進(jìn)行購買
人氣推薦：賣得比較好的商品
主要任務(wù)是非常清晰的，用戶到這里來查看我們所推薦給他的商品有哪些，大體分為三類。用戶也會按照這樣的一個視覺流，去查看我們頁面的信息然后依次瀏覽下來，來幫助他選擇所喜歡的一個商品。
并不是全部，但是要在工作中，時時去提醒自己要注意到的注意事項(xiàng)，分為三塊。
眼動的效果圖，用戶的閱讀習(xí)慣通常從左往右閱讀，并遵循F型的閱讀習(xí)慣在里面，在設(shè)計(jì)中也要遵循這樣的習(xí)慣。
在注冊設(shè)計(jì)里面，通常把注冊項(xiàng)表單做成左對齊，用戶在閱讀的時候能從上到下去閱讀，不會有視覺的跳轉(zhuǎn)。
右圖的例子本來輸入框隱藏在輸入框里面，當(dāng)輸入的時候放置在左側(cè)整個，這樣不僅會有很好的視覺效果，而且看起來很舒服。
用戶的視覺中心往往會從頁面的左上角開始，最后會終止于頁面的右下角，合理運(yùn)用這個法則幫助用戶更好地去閱讀網(wǎng)站。獲取信息并采取行動，官網(wǎng)的例子就很經(jīng)典。在官網(wǎng)整個閱讀的時候在我們左上角是一個關(guān)于網(wǎng)站的LOGO首頁是banner圖，整個頁面的右下角有一個操作按鈕。當(dāng)用戶在看到這個頁面的時候會遵循對角線法則。
此外他還有一個很巧妙的地方放置了一個大猩猩可以看到他的一個視覺流，他的視角看準(zhǔn)了右下角這樣一個操作按鈕。所以這里稱作動作或者物體的視覺引導(dǎo)，我們也會注意到右下角這樣的操作按鈕。這個頁面做的非常漂亮的而且效果很明顯。
這就要用到格式塔，前面關(guān)于邏輯關(guān)系的應(yīng)用，里面重點(diǎn)講了三個關(guān)于邏輯關(guān)系或者關(guān)于分組的。概括來說就是點(diǎn)線面
微信的登錄頁面，只有兩類信息，一類是賬號密碼讓用戶去輸入，在最底下有個更多。這里就是作為其他賬號登錄的入口，因?yàn)檫@里是用他之前登錄的QQ賬號去登錄的，然后其他的登錄信息在我們整個頁面任務(wù)中，是沒有那么重要的，優(yōu)先級比較低。這里就故意做得比較弱化。
關(guān)于弱化是有很多手段在的，微信是選取了兩種不同的樣式，登錄用了button按鈕，而更多是用的文字鏈。兩個的樣式是不一樣的，在其他設(shè)計(jì)里面可以用到顏色來區(qū)分。比較同樣兩個button一個顏色弱一點(diǎn)，另外一個button顏色具有很好的引導(dǎo)作用，可以在button上做強(qiáng)化一個功能和弱化一個功能的作用。
有些操作是不希望用戶去進(jìn)行的
二次驗(yàn)證或者說密碼的二次確認(rèn)，在他們看來連續(xù)輸入兩次密碼是安全的，而設(shè)計(jì)師出于一種體驗(yàn)的考慮就會陷入一種糾結(jié)。
這個時候往往要從需求的根源來入手，來分析這個需求是不是真的站得住腳。那么二次驗(yàn)證終究是為了讓用戶確認(rèn)自己的密碼，但并不能防止用戶去忘記這個密碼。確認(rèn)這個需求是產(chǎn)品強(qiáng)加給用戶的，因?yàn)椴⒎侨康挠脩舳夹枰ゴ_認(rèn)這個密碼是不是輸對了，那有部分的用戶體驗(yàn)就會因?yàn)檫@個功能受到損害。
那有沒有好的方案，兼容部分用戶想看密碼而部分用戶不想看密碼這樣的一個需求了。那這里有一個查看明文密碼的功能就非常好。它能夠滿足和解決這個問題，所以從需求入手，我們認(rèn)可這個需求。
但是我們可以從不同的角度來解決這個問題。來提供不同的解決方案，然后我們最終刪除了確認(rèn)密碼這個功能，但是額外提供了一個查看密碼這樣一個功能入口來滿足部分用戶，想查看他密碼這樣一個需求。
在這個狹小的空間里面不能展示全部內(nèi)容，用戶在這個頁面的主要任務(wù)是獲取產(chǎn)品的信息。包括各種商品的細(xì)節(jié)、價格之類的，用戶在第一次來的時候可能會有查看運(yùn)費(fèi)信息這樣一個需求在，但是在之后的購買和體驗(yàn)過程中。
是基本不會太關(guān)注這個運(yùn)費(fèi)的，或者說不會太關(guān)注運(yùn)費(fèi)是如何去計(jì)算的。即使他想去關(guān)注，他也往往是想知道這個運(yùn)費(fèi)的具體價格是怎么樣的。而具體相應(yīng)的算法是什么樣的，在后面的時候他已經(jīng)不是很關(guān)注了，為了不干擾主要的任務(wù)流程。
但又不損失次要的任務(wù)場景，最終的策略就是將具體的運(yùn)費(fèi)計(jì)算方式收藏起來，當(dāng)點(diǎn)擊下拉框的時候才能查看相應(yīng)的運(yùn)費(fèi)詳情。
但是隱藏又不能做的太隱蔽。因?yàn)楫?dāng)用戶想去查看的時候，他必須要有一個很好的視覺引導(dǎo)。讓他去查看這些不是很重要，但是他又想知道的信息，所以通常我們會有些視覺引導(dǎo)在，暗示這里有更多的內(nèi)容去查看。這里就用了一個下拉箭頭的方式，
比如絕大多數(shù)產(chǎn)品的搜索功能都是提供簡單粗暴的一個搜索，然后全部在哪搜索，但是如果我們需要精確的搜索，或者通過相應(yīng)的設(shè)置來進(jìn)行固定條件的搜索的時候，高級條件搜索功能就很有必要了，而這些高級功能往往都是隱藏起來的。
比如易信的頭像功能，點(diǎn)擊用戶頭像的時候，會出現(xiàn)三個入口。lofter在發(fā)圖的時候產(chǎn)品方是期望用戶能夠更多的發(fā)高質(zhì)量的單張圖片，但終究會向用戶的需求進(jìn)行妥協(xié)。因?yàn)橛脩粢呀?jīng)現(xiàn)在已經(jīng)習(xí)慣去發(fā)多張圖片，但是產(chǎn)品方向也并沒有完全去繳械投降，所以特意將多選這個功能做的非常隱藏。需要長按才能喚起
移動端設(shè)計(jì)的時候要考慮到人體的極限，以右手為例，拇指的活動范圍往往都集中在屏幕的左下方，右邊的圖，在這個區(qū)域內(nèi)手指是活動的非常靈活的，可以準(zhǔn)確點(diǎn)擊到屏幕上的內(nèi)容，所以將操作頻率比較高的放在這個區(qū)域里面。比如購物的APP里將購買或者加入購物車等操作放在一個非常容易點(diǎn)擊的位置，來減少用戶的操作成本。
在之前的設(shè)計(jì)規(guī)范里也講到了，在底部的時候我們會放置很多操作按鈕在里面。會將操作比較頻繁的返回放在左上角，這是礙于之前的設(shè)計(jì)規(guī)范不得已而為之的一個方案了。IOS里加入了左滑返回。
當(dāng)手指也點(diǎn)擊目標(biāo)距離越近，而且目標(biāo)越大的時候，這樣的操作就越容易成功，用戶的操作成本也越低
同樣兩個目標(biāo)，距離我們近的會更容易點(diǎn)擊，這里所說的就是設(shè)備當(dāng)前位置和目標(biāo)位的距離。距離越長所用的時間也越長
目標(biāo)越大也越容易點(diǎn)擊得到，當(dāng)目標(biāo)的大小。目標(biāo)越大的時候，我們所用的時候就越短了。
之前關(guān)于易信建群的例子里，講到了創(chuàng)建群的按鈕做的相當(dāng)大的，且保持也其他模塊的距離，而且相對獨(dú)立但又在拇指操作距離最佳里面，這樣點(diǎn)擊起來相當(dāng)方便，而且不容易點(diǎn)擊到其他區(qū)域去，很好的容錯性在里面
費(fèi)次定律有兩個悖論
簡單來說就是不能一味追求目標(biāo)的大，按鈕越大的時候反而會適得其反，畢竟面積達(dá)到一定程度的時候，你已經(jīng)無法忍受它的丑了，因?yàn)閷?shí)在太丑了，這個還是很好理解的。
有時候會縮短操作距離，通常會將操作按鈕放在一起，這樣用戶操作起來比較方便。但是如果離的太近就會引發(fā)一些額外的麻煩，比如分組不清、界面混雜全部都混在一起、容錯性低很容易點(diǎn)到其他按鈕上去，造成錯誤的操作。
好比淘寶的例子做為一個用戶已經(jīng)無數(shù)次的刪掉了，我們一些商品了，因?yàn)楸緛碇皇窍胝乙恍┫嗨频纳唐?，但是?jīng)常會有一些誤操作存在，至于改進(jìn)方案可以不要兩個按鈕距離那么近?；蛘呤褂脙蓚€不同的觸發(fā)方式來喚起兩個操作。
同樣是IOS里不得不做的權(quán)限請求，三個產(chǎn)品采取了不同的方式。
交互設(shè)計(jì)師可能不需要知道，動效具體是怎么實(shí)現(xiàn)的。但是你需要知道你需要怎樣的動效。你需要動效來表達(dá)怎樣的效果，去效對于交互設(shè)計(jì)師來說不在于酷炫，而在于他是體驗(yàn)的一部分。
比如易信的例子里在，需要展示語音錄制過程中的一個狀態(tài)，加入了長按這樣一個動效效果在里面，在發(fā)送的過程中有很好的視覺引導(dǎo)。
動效對于交互設(shè)計(jì)師的意義，他是整個產(chǎn)品用戶體驗(yàn)非常重要的一環(huán)。
各平臺都有自己的設(shè)計(jì)規(guī)范
13年的時候開始做易信這款產(chǎn)品，但是出于設(shè)計(jì)成本還有開發(fā)成本和維護(hù)成本，畢竟兩個端開發(fā)人員也要分成兩個端去做。維護(hù)成本會很高，最主要的是對市場前景的未確定性，畢竟當(dāng)時做為新產(chǎn)品，很難去確定說這個產(chǎn)品能夠被市場所接納，基于現(xiàn)在的成本以及市場前景的未確定性。采用了多平臺統(tǒng)一的設(shè)計(jì)方案，最終不論是安卓還是iOS端都采用了抽屜式導(dǎo)航
這里講一下抽屜式導(dǎo)航，易信當(dāng)時定位是基于熟人的通訊工具，聊天就是唯一或者說非常重要的功能。其他的朋友圈、朋友地圖、周邊功能都是比較邊緣化。非用戶的主要使用場景，在整個設(shè)計(jì)上采用抽屜式導(dǎo)航。
右下角是做了一個加號，點(diǎn)擊的時候會民出發(fā)起聊天、免費(fèi)短信、電話留言、掃一掃這樣一些快捷入口
點(diǎn)擊抽屜式導(dǎo)航，還隱藏了朋友地圖、設(shè)置等好友功能，基于當(dāng)時的定位更多考慮的是熟人間的通訊。
到2.0的時候做了調(diào)整，易信占據(jù)了很不錯的市場份額，已經(jīng)開啟了熟人通信到陌生人社交這樣功能性上的轉(zhuǎn)變，功能上也不在與通訊一家獨(dú)大。朋友圈、偶遇、問一問以及后續(xù)的一些社交功能，開始成為易信的一個發(fā)力點(diǎn)，原來的架構(gòu)和導(dǎo)航已經(jīng)不能滿足整個產(chǎn)品的發(fā)展了。
改版也就勢在必行了，對于設(shè)計(jì)師而言，是否依舊保留原來兩個平臺一個統(tǒng)一設(shè)計(jì)方案呢，還是遵循各自平臺的一個設(shè)計(jì)方案。產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)進(jìn)行了很多討論，最終還是決定做一個區(qū)分化的設(shè)計(jì)。遵循了安卓端最新的設(shè)計(jì)規(guī)范。
促使我們做這樣的決定有3個，第1點(diǎn)是當(dāng)時安卓4.0整個規(guī)范已經(jīng)很成熟而且贏得很多用戶的青睞因此我們遵循它的設(shè)計(jì)規(guī)范，也能夠得到一部分用戶的青睞。第2點(diǎn)易信當(dāng)時在人員儲備、資金上已經(jīng)很充足了，而且對于市場前景也是非常美好的。
第3點(diǎn)微信14年將安卓版也設(shè)計(jì)成完全遵循安卓4.0的設(shè)計(jì)規(guī)范，所以從市場的呼聲和競爭對手的角度來考慮，也有必要做出相應(yīng)的回應(yīng)。
所以在2.0版本的時候，徹底將安卓版和iOS版本進(jìn)行了分別的設(shè)計(jì)，
2.0調(diào)整了信息架構(gòu)，開始使用標(biāo)簽式導(dǎo)航，
這里主要講的是涉及到多平臺的時候，思考的角度是什么樣的，大家可以借鑒到自己的產(chǎn)品設(shè)計(jì)里面去。
win10出現(xiàn)的時候與其他兩個平臺統(tǒng)一了一些規(guī)范。我們在設(shè)計(jì)中考慮如何減少設(shè)計(jì)成本，一套設(shè)計(jì)方案能不能即滿足兩其他兩個端上面的使用，也能滿足win10在移動端和桌面上的使用。最終采用了安卓端一樣，在頂部加入標(biāo)簽式導(dǎo)航，唯一不同的是加了icon，大大降低了用戶跨平臺使用的學(xué)習(xí)成本。
全面兼容了win10的移動版和桌面版，依據(jù)win10的設(shè)計(jì)框架能夠?qū)崿F(xiàn)，一個應(yīng)用在不同windows終端上運(yùn)行的一個夢想，我們通過調(diào)整應(yīng)用的寬度，當(dāng)他調(diào)到一個預(yù)限值的時候就可以切換到移動版的樣式，當(dāng)時也是遵循了這樣的設(shè)計(jì)方案。
當(dāng)我們將右側(cè)win10桌面版去調(diào)整它的寬度的時候，當(dāng)調(diào)整到規(guī)定的預(yù)限值的時候就會變成左傾的移動版的樣式。
這樣就只需要開發(fā)一個應(yīng)用，在windows的移動端、平板端、桌面端去實(shí)現(xiàn)兼容，一個應(yīng)用解決三個端的問題，這真的是一個很贊的方案。
除了兼容安卓和iOS兩個端的設(shè)計(jì)規(guī)范之外，有沒有更好的解決方案就是native和web設(shè)計(jì)
有沒有更好的方案將兩個設(shè)計(jì)結(jié)合起來了
混合設(shè)計(jì)方案就誕生了，可以用在哪些地方了
易信的星幣商城，在整個頁面的框架頂部采用了navtive設(shè)計(jì)，基于本地的開發(fā)，主體是用H5頁面去構(gòu)成的，這個頁面的迭代性很強(qiáng)
完成了上面四步過程進(jìn)行了頁面設(shè)計(jì)、頁面排版，要問幾個問題
易信的信息架構(gòu)和微信是高度相似，消息、通訊錄、發(fā)現(xiàn)、我。設(shè)計(jì)師陷入糾結(jié)中，就把發(fā)現(xiàn)改為應(yīng)用，讓用戶來使用發(fā)現(xiàn)用戶根本沒發(fā)覺，直接問他的時候，他才知道這里有區(qū)別。有時候不要看用戶怎么說，還要看他怎么做。
階段一：因?yàn)樽约旱脑O(shè)置觀還沒有完全建立起來，更多的是從競品上去汲取他們設(shè)計(jì)方案的精髓，會去借鑒很多競品的設(shè)計(jì)方案。
階段二：隨著設(shè)計(jì)能力的不斷提升，意識到這種借鑒有抄襲的嫌疑。但更多還是基于它的精髓在的。這時候會有意避免跟他一樣，避免借鑒去做一些差異化的設(shè)計(jì)，比如易信是叫發(fā)現(xiàn)好還是叫應(yīng)用好
階段三：但真正當(dāng)我們成熟到一定階段的時候，發(fā)現(xiàn)這種刻意的避免是完全沒有必要的，因?yàn)橛脩敉粫⒁獾侥氵@里所謂一個架構(gòu)上、樣式上的相似性，他更多關(guān)注的是你這個產(chǎn)品能不能滿足他在某方面的一些需求，能不能滿足使用習(xí)慣。
這時候也到了設(shè)計(jì)的比較好的習(xí)慣，一個真正的正軌上，為了用戶的使用習(xí)慣而去設(shè)計(jì)的，所以很多新人也會糾結(jié)關(guān)于借鑒與設(shè)計(jì)的前兩個階段，這點(diǎn)大家不用擔(dān)心
隨著對用戶的理解、設(shè)計(jì)的理解不斷加深，也就跨過了為了借鑒而借鑒。或者說為了借鑒而去做設(shè)計(jì)的這兩個階段，最終走入到以用戶為中心，為用戶使用習(xí)慣去設(shè)計(jì)，為用戶的需求去設(shè)計(jì)的階段。
這三個階段對交互設(shè)計(jì)師非常重要，但前期沒法快速使用。在實(shí)際過程中會采用一些改良的快速驗(yàn)證方法
五個步驟很嚴(yán)格會耗費(fèi)很多時間，在快速迭代中往往做不到這一點(diǎn)，那么怎么去做了
改良版：
相對于標(biāo)準(zhǔn)流程我們在實(shí)際中會進(jìn)行這樣的專家評估，通俗來講就是交互設(shè)計(jì)師的內(nèi)部評審。
邀請專家級別交互設(shè)計(jì)師參與評估，同時將方案以郵件的形式提前告知對方。
在整個評估過程中進(jìn)行系統(tǒng)評估，做為介紹的同學(xué)會詳盡的介紹整個項(xiàng)目的背景是怎么樣的，以及項(xiàng)目需要解決的問題是什么，然后詳細(xì)自己介紹自己的具體設(shè)計(jì)方案，具體的解決方案。
交互專家或資深設(shè)計(jì)師會依據(jù)自己的工作經(jīng)驗(yàn)，或者說同學(xué)給他準(zhǔn)備的可用性原則指標(biāo)，對頁面進(jìn)行評估，在整個過程中甚至?xí)τ谀愕男枨筇岢鲑|(zhì)疑。
在整個過程中如果希望專家的評價是更多的傾向于可用性，那可以打印一些可用性原則的表單，這個網(wǎng)上有很多可以下載一份。讓專家同學(xué)爭對性的提出建議，最后整理結(jié)果做出修改和排期，這兩個是要非常快速地去響應(yīng)的。
在評估完后就要快速的給出解決方案，有些問題可能會比較嚴(yán)重，要適當(dāng)?shù)娜タ紤]是本期就能夠去修改的，還是延期到下一期，這五步是交互同學(xué)在工作中快速去驗(yàn)證我們設(shè)計(jì)方案，所采取的改良過的專家評估方法。
相對于標(biāo)準(zhǔn)的用戶測試，粗暴用戶測試并沒有嚴(yán)格的用戶分層，都是隨機(jī)的去辦公樓里，抓一些潛在用戶，可能是開發(fā)人員、測試人員。并沒有嚴(yán)格的測試環(huán)境，可能就在他的工位上，粗暴測試往往都是拿一些可見的設(shè)計(jì)方案，可能是圖列的一些紙面原型，或者直接拿著電腦拿著手機(jī)上的demo就過去，直接讓他們進(jìn)行試用。
比如易信星幣廣場的時候，直接打印出了紙面的原型讓用戶來使用。這里說的用戶就是在其他樓層上找到的同事，在工作中要善于利用這種非項(xiàng)目組同事的體驗(yàn)和反饋機(jī)會，除了在體驗(yàn)任務(wù)流程上之外，也可以進(jìn)行對比測試，讓用戶去評價兩個方案這里會發(fā)現(xiàn)，粗暴的用戶測試包含了我們的任務(wù)走查法，讓用戶按照每個任務(wù)依次去走查每個頁面，也有可能是AB測試，讓用戶看兩個方案。
這些都是在極短的時間內(nèi)，可能是一個下午，快速的幾個用戶來試用我們產(chǎn)品，讓用戶任務(wù)走查或AB測試，這里要基于當(dāng)初我們所要驗(yàn)證的一個點(diǎn)，到底是驗(yàn)證流程上是否可靠還是優(yōu)化前以后的差異上的改進(jìn)。
如果為了檢查整個頁面的流程是否可靠，可以采用任務(wù)走查，如果是為了驗(yàn)證優(yōu)化過的方案，比前個方案更加有效，可以采用AB測試。
在整個測試過程中，對很多類型用戶測試的方法的精髓進(jìn)行提煉了，然后把它應(yīng)用到我們具體的設(shè)計(jì)開發(fā)里面去，應(yīng)用到設(shè)計(jì)師快速的方案驗(yàn)證。
這里都是交互設(shè)計(jì)師的快速驗(yàn)證，并不是嚴(yán)格的用戶測試，在這個階段的專家驗(yàn)證、用戶測試是非常非常重要的。
左邊第一張圖是一個布局方案圖，不能稱之為頁面的設(shè)計(jì)方案。
右邊三個圖它很清晰地描述出了頁面之間的跳轉(zhuǎn)關(guān)系，頁面之間的邏輯關(guān)系，但同樣缺少了必要的交互說明。不能作為交互方案最好的展現(xiàn)形式，說了這么多其實(shí)兩者都是完整的交互方案的一部分。但是卻不能作為一個貫穿從設(shè)計(jì)到開發(fā)到測試流程中的一個完整的設(shè)計(jì)文檔
在整個過程中誰會遇到交互文檔，什么樣的場景下使用，達(dá)到什么目的
不是產(chǎn)品出了所有需求交互才會參與，而是早早就參與進(jìn)去，在這個階段交互會使用簡單的交互方案，可能是草圖或動手畫的草圖與產(chǎn)品經(jīng)理進(jìn)行溝通，產(chǎn)品經(jīng)理通過可視化的需求方式，來討論整個需求的可行性。討論需求是否能夠確定下來。
初級使用粗糙的交互草稿，溝通需求滿足情況，同時跟開發(fā)討論方案的可行性，因?yàn)榻换ピO(shè)計(jì)給出的不僅僅是完美的設(shè)計(jì)方案，也是需要能夠落地的，如果沒有具體方案討論起來比較費(fèi)勁，因?yàn)闆]法用可視能夠形象化的方式來展現(xiàn)設(shè)計(jì)方案，即使粗糙的稿子也無妨我們進(jìn)行討論
確定了具體的方案整個開發(fā)過程中，不會有任何障礙，就可以完善和補(bǔ)缺交互稿。就可以移交下游的視覺同學(xué)了。
會關(guān)注頁面表達(dá)的情感需求，交互除了將頁面布局方案較為準(zhǔn)確傳遞給視覺，頁面具體所要表達(dá)的情感需求，也要通過比較合理的方式傳遞給視覺同學(xué)。
在整個開發(fā)過程中，需求的設(shè)計(jì)方案也會根據(jù)市場或者用戶的需求有所調(diào)整，這時候也會將變動過的需求和設(shè)計(jì)方案，及時體現(xiàn)在交互稿中。這時候交互稿使用人員也就是開發(fā)人員也要注意到在整個交互稿中，有了哪些的變更哪些改動，
測試人員是交互稿最嚴(yán)格的執(zhí)行者，因?yàn)樗麜罁?jù)我們整個交互設(shè)計(jì)文檔來設(shè)計(jì)他的測試用例是什么，他會嚴(yán)格測試設(shè)計(jì)方案最終的實(shí)現(xiàn)效果。
他要保證整個產(chǎn)品上線前的質(zhì)量，測試不僅是開發(fā)的好伙伴也是整個設(shè)計(jì)團(tuán)隊(duì)很好的朋友。因?yàn)樗麜臀覀價eview整個交互稿中是否有紕漏，他們關(guān)注的往往是一些具體實(shí)現(xiàn)上的細(xì)節(jié)，一些極端狀態(tài)。
測試在具體的測試用例撰寫過程中或測試過程中，會將我們之前遺漏過的交互細(xì)節(jié)反饋給我們。這時候要將之前遺漏的細(xì)節(jié)補(bǔ)充到交互文檔里面去
其次在前面也提到在整個開發(fā)過程中或者版本迭代過程中交互稿會有所修改，也要將修改過的交互稿同步給測試，以免他還是采取老的測試方案去做一些方案性的測試，在整個版本的迭代過程中都要同步給測試。
根據(jù)交互文檔細(xì)節(jié)做逐條驗(yàn)收
建議使用Axure
(1) 封面
會明確標(biāo)出整個需求，隸屬于哪個版本叫什么名稱，涉及到人員有哪些，策劃、設(shè)計(jì)、開發(fā)
(2) 修訂記錄
整個版本迭代，交互或者需求有些變更的地方，我們需要以很明確的方式，很方便我們測試和開發(fā)去閱讀的方式在這里進(jìn)行標(biāo)明，比如按照時間的倒序，每條都是很細(xì)化到一個功能上的變動。每條下面都有超鏈接，方便開發(fā)、測試去閱讀的時候減少閱讀成本
(3) 需求及業(yè)務(wù)流程圖
需求方或產(chǎn)品方產(chǎn)出的東西，但為了表示文檔的完整性，也是放到交互文檔中。有明確的需求分析過程，及整個業(yè)務(wù)邏輯及系統(tǒng)中的規(guī)則
(4) 信息架構(gòu)
本次功能所包含的幾個模塊，以及模塊之間的信息層級是怎么樣的，方便交互設(shè)計(jì)師進(jìn)行邏輯分析
(5) 流程圖
在進(jìn)行具體設(shè)計(jì)之前，流程設(shè)計(jì)很重要，也建議把整個流程設(shè)計(jì)的結(jié)果，就是功能流程圖在交互文檔里面展示。一來幫助交互梳理自己頁面，二來幫助開發(fā)和測試去理解設(shè)計(jì)方案，
(6) 設(shè)計(jì)方案
拿紅包舉例，在某一個功能模塊里，會有詳細(xì)的每個頁面的逐層級的說明，比如發(fā)起頁、具體頁包括發(fā)送過程中
會將整個流程每個頁面逐幀進(jìn)行標(biāo)注說明，因?yàn)檫@就是整個具體的設(shè)計(jì)方案
(7) 交互控件
要保證整個項(xiàng)目的完整性團(tuán)隊(duì)內(nèi)的高度一致性，會把本次涉及到的交互控件在這里羅列出來，
(1) 封面
名稱、隸屬版本，方便我們項(xiàng)目跟進(jìn)，以及項(xiàng)目排期，明確地描述了整個需求中所涉及到的一些相關(guān)人員，確保相關(guān)人員知曉這件事情。
(2) 目錄
兩個標(biāo)準(zhǔn)，一是結(jié)構(gòu)清晰，二是命名準(zhǔn)確，整個交互文檔目錄就是整個交互文檔的信息架構(gòu)，在檢查新同學(xué)交互文檔時，會先看整個文檔結(jié)構(gòu)是否清晰，如果架構(gòu)都沒搞清楚怎么證明設(shè)計(jì)方案是靠譜的
(3) 修訂記錄
實(shí)時更新，方便查看
(4) 業(yè)務(wù)流程圖
一般放在產(chǎn)品需求文檔，建議在交互稿里也體現(xiàn)，這樣能夠?qū)⑿枨筮M(jìn)行很好的梳理，方便測試和開發(fā)在一份交互稿里面就能夠去理解我們的業(yè)務(wù)需求是怎么樣的。包括具體的實(shí)現(xiàn)方案
(5) 信息架構(gòu)
整個信息架構(gòu)和交互文檔邏輯是一樣的，
(6) 交互流程圖
(7) 交互方案
以上是錯誤的方式，正確的應(yīng)該是包含具體頁面流程是怎么樣的，包含單個頁面具體某些點(diǎn)的交互說明
交互方案從三個部分講述
錯誤的方式：
推崇的方式：
清晰簡潔的頁面只說明一個事情，讓條理很清晰，閱讀者一眼能看明白。一個頁面一個任務(wù)并不是說一個頁面，一個任務(wù)涉及到多個頁面，這里最好展示多個頁面
在現(xiàn)有任務(wù)中增加一個新功能的時候，新功
