正文之前自己閑扯幾句：最近團隊內(nèi)部正在做一個新的產(chǎn)品，而在做這個產(chǎn)品的過程中，慢慢暴露了團隊在于磨合上，分工上的一些問題?？赡苁且驗闀r間太緊、溝通不足等原因。產(chǎn)品承擔(dān)著大部分的壓力，而急于下決定，急于畫線框圖，而對于產(chǎn)品方向上的問題并沒有進行詳細(xì)地說明。幾個星期下來，大家還是有種我們到底要做什么的狀態(tài)，一切都處于摸索的狀態(tài)。而其他人在這個過程中沒什么參與感也成了一個很大的問題。
后來情況有些好轉(zhuǎn)，產(chǎn)品運營這邊開始分工調(diào)研，尋找差異化，找突破點，建立用戶模型使用場景等。設(shè)計研發(fā)也能適當(dāng)?shù)貐⑴c到了討論之中，在這個過程中我們也算是找到了一絲絲方向。
一直很希望經(jīng)歷一次產(chǎn)品從零開始的我，在這個過程中也讓我更加理解了用戶體驗五要素。大家有時間可以看看，這里也貼上書籍下載地址。
這是一個非常經(jīng)典的框架體系，它包括戰(zhàn)略層（產(chǎn)品目標(biāo)、用戶需求）、范圍層（功能、需求分析）、結(jié)構(gòu)層（信息架構(gòu)、頁面流）、框架層（頁面布局）和表現(xiàn)層（視覺傳達(dá)）。在一個實際的產(chǎn)品開發(fā)中，戰(zhàn)略層及范圍層主要由產(chǎn)品經(jīng)理負(fù)責(zé)，而結(jié)構(gòu)層和框架層則由交互設(shè)計師來完成，表現(xiàn)層由視覺設(shè)計師完成。但我們團隊中沒有交互設(shè)計師這樣一個職位，所以結(jié)構(gòu)層和框架層我們是由產(chǎn)品和設(shè)計共同合作來完成。
前期產(chǎn)品及運營的同事大致確定了產(chǎn)品的戰(zhàn)略層以及范圍層，接下來需要做的是結(jié)構(gòu)層以及框架層的東西，這里解釋一下這兩個層的概念：框架層是針對于單頁面的結(jié)構(gòu)設(shè)計，而結(jié)構(gòu)層則是將單頁面連接在一起，從而形成了系統(tǒng)。
而在這一篇文章中，主要講的是產(chǎn)品的框架層。分為4個部分來講
框架結(jié)構(gòu)
信息層次
信息組織
功能操作
框架結(jié)構(gòu)
①能否承載產(chǎn)品功能？
是要采用列表、宮格還是圖表等，都要基于設(shè)計的目的、產(chǎn)品功能、用戶畫像、使用場景等這些去考慮。想想當(dāng)前設(shè)計的框架是否適合承載這些產(chǎn)品功能，有沒有更好的方式去呈現(xiàn)，以及盡可能地想到頁面會存在的問題。大的框架對于整個產(chǎn)品來說是很重要的，一個應(yīng)用也不可能一開始就做到十全十美，后續(xù)可能對進行優(yōu)化，但一般是基于大框架的基礎(chǔ)上進行調(diào)整。
②明確點擊區(qū)域
? 用戶是否明白是可以點擊的。
舉個例子：下圖是我們團隊負(fù)責(zé)的一個項目，我們做這個頁面的時候就遇到這種情況，紅藍(lán)兩個模塊是可以點擊的，但很多用戶并不知道，所以一開始數(shù)據(jù)表現(xiàn)很差，后面我們優(yōu)化的時候增加了箭頭以及浮起來的小動畫以及投影后數(shù)據(jù)很明顯就上去了。（雖然可能不是最優(yōu)方案）
（補充：同時要避免非點擊區(qū)域而讓用戶感覺想按鈕的情況）
? 點擊區(qū)域問題
這也是一個經(jīng)常會遇到的一個問題。研發(fā)的同事把設(shè)計的頁面實現(xiàn)出來以后，一般會讓設(shè)計這邊過一下，然后你在操作的時候發(fā)現(xiàn)，某個按鈕點擊后無反應(yīng)，那一般有兩種情況。一種是：研發(fā)這邊實現(xiàn)的問題，還有一種是你點擊區(qū)域大小設(shè)置的問題。
在MD設(shè)計規(guī)范里面寫到：為了確保平衡信息密度和可用性，觸發(fā)區(qū)域大小至少是 48 x 48 dp。在大多數(shù)情況下，觸發(fā)區(qū)域之間應(yīng)該還有8dp或更大的間距。
③ 內(nèi)容區(qū)域等是否合理統(tǒng)一？
這個是從我組長那里學(xué)來的。如果是開始一個新的產(chǎn)品，先提取該產(chǎn)品的主要頁面先做，比如：主頁、二級頁面、側(cè)邊欄以及彈窗等，并在這個過程建立基礎(chǔ)規(guī)范，頁面樣式重復(fù)可以后續(xù)再完善。這樣在時間相對較趕的情況下，研發(fā)可以先著手把產(chǎn)品的框架搭建起來，而團隊中有其他的設(shè)計人員的話也可以進行更好的合作。
信息層次
①信息層次是否清晰 ? ? ? ?
明確任務(wù)的優(yōu)先級別，對于想讓用戶第一眼看到或完成的任務(wù)需要在設(shè)計時進行合理凸顯。拿cm來舉個例：從主頁來看，有一個一鍵清理的大按鈕以及4個主要的功能，為了讓用戶進來后第一時間去點擊一鍵清理按鈕，在上面做了一些小動畫，包括外圈3個圓的轉(zhuǎn)動，冒氣泡等。而且在完成提醒也和主頁相呼應(yīng)，做得還是比較完整的。
②表達(dá)是否清晰 ? ? ?
能清晰地表達(dá)想要傳達(dá)給用戶的意思。舉個手機清理軟件例子，大部分的清理軟件中會有一個通知欄管理的功能，能夠幫你將應(yīng)用通知管理起來并可以快速清理，要開啟這個應(yīng)用呢需要用戶轉(zhuǎn)到內(nèi)部開啟權(quán)限。各個應(yīng)用會采取不同的表達(dá)方式，比如說clean master和Power clean在引導(dǎo)上做得算比較好的。它們用動畫進行展示，告知用戶我正在把你的一條條信息都收起來，并且你可以一鍵清理掉。雖然文字表達(dá)不太一樣，但目的都是一樣的，都是讓用戶更加理解你這個功能的意義，以及引導(dǎo)用戶去開啟權(quán)限。而有些應(yīng)用就說得不明不白的。所以做這些的時候也要多去看看競品是怎么去做的。
信息組織
這個概念會比較泛。我理解的信息組織，大范圍來說是你需要將所有頁面組織起來，形成一個系統(tǒng)。小范圍來說將單個頁面的信息進行有序地排列。這是一項重要的能力。有邏輯有序的信息組織能讓用戶更加有效率的進行應(yīng)用的操作。
① 確認(rèn)邏輯是否通順
② 是否可以將信息合并歸類
上段時間有個研發(fā)的同事來問我，他說他們團隊的研發(fā)老大讓它整理一下debug的列表，目的是為了讓其他的同事（研發(fā)、測試）能夠快速找到需要調(diào)試的功能。如果是你你會怎么做。
我第一個想到的就是要將內(nèi)容進行分類，方式可以通過標(biāo)題，顏色等方式進行區(qū)分，再者就是任務(wù)的優(yōu)先級了。對于功能眾多的一個頁面，比如說支付寶的應(yīng)用列表，google play等，如果沒有分類，簡直不敢想象。
③ 頁面的信息承載量會不會太大
④ 視覺焦點是否明確
...
功能操作
① 是否易操作
考慮常用手機型號尺寸，用戶在各種使用場景下能否快速觸發(fā)。比如以下情況
– 移動情景下，注意力容易被分散（如交談，觀察周圍環(huán)境等）
– 移動情景下，操作手機的時間碎片化（各種事情打斷）
– 移動情景下，任務(wù)容易被中斷（意外情況影響）
– 移動情景下，肢體可能被其他物體被占用（如遛狗、拎包等）
– 移動情景下，噪音分散注意力（車水馬龍、人聲鼎沸的路邊）
...
② 重要、頻繁觸發(fā)的功能按鈕是否在手機的可操作區(qū)域
不同的產(chǎn)品對應(yīng)的用戶場景和操作流程是不同的，而在設(shè)計的過程中同樣要考慮各種影響因素。在設(shè)計產(chǎn)出后再回過頭來檢驗一遍方案是否真正滿足用戶需求？
好了大概以上這些，內(nèi)容可能還有遺留，后續(xù)還會陸續(xù)補充..
