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