最近在做文章轉(zhuǎn)移，全部文字請點擊http://fog-li.lofter.com/

對Demo的思考

在一個沒有交互的團隊里工作，PM和UI自然需要分別承擔一部分交互的工作，所以多少會出現(xiàn)交互稿不完善的情況。到目前為止，我還沒從PM或者交互手上拿到過我認為考慮完善畫得漂亮的交互稿，不過倒是在每次閱讀他人交互demo后，發(fā)現(xiàn)了一些看似很小，但實際需要深究的問題。

【1】數(shù)據(jù)的意義

工作中有參與過幾次后臺設(shè)計，在項目結(jié)束后會發(fā)現(xiàn)，后臺的功能多用于展示數(shù)據(jù)和處理數(shù)據(jù)。在設(shè)計時會多注意如何清晰展示數(shù)據(jù)。但這次設(shè)計時發(fā)現(xiàn)，數(shù)據(jù)是否表達了準確的意義，比觀感上清晰展現(xiàn)數(shù)據(jù)更重要。

一串數(shù)據(jù)的顯示并不是在設(shè)計稿上加個字符這么簡單，其實這涉及到開發(fā)，涉及到用戶的理解，也涉及到設(shè)計的布局。既要符合開發(fā)數(shù)據(jù)調(diào)用邏輯和工作機制，也要清晰的表達數(shù)據(jù)意思減少用戶的使用困惑。

每增加一種屬性，可能對于開發(fā)來說，增加的就不止是一行代碼

案例一

注意紅線標注部分

這是后臺左側(cè)導(dǎo)航最常見的個人信息模塊，起初我認為紅線部分只是一個關(guān)于人物屬性的提示而已。后來和PM溝通之后才知道，不同的人物屬性會觸發(fā)不同的功能。后來的后來才了解，原來添加一個小小的人物屬性，其實對開發(fā)來說，需要做的不僅僅是一行代碼。

單從一用戶對應(yīng)一屬性來說，比較好理解，是什么屬性開什么功能就是了。但是一用戶對應(yīng)多屬性的時候，就不是單純的人物標記了，需要開發(fā)編程時去加入識別和判斷，再讓系統(tǒng)識別讀取合適的數(shù)據(jù)。這樣一來，要與開發(fā)討論這種開發(fā)機制是否可行，討論合適方案，而不是想當然的隨便加個屬性。

案例二

左邊為原方案? 右邊為修改后方案

這是設(shè)計時遇到的個人信息浮層，需要滿足信息告知和信息勘誤兩個功能。本來收到demo時（原型實在太丑，我自己做了左邊那個示意）還沒太注意，覺得這只是一個小控件，做完大的布局框架之后再說。后來仔細分析了一下這個控件，發(fā)現(xiàn)原型既沒有滿足清晰的信息告知，也不能明確的定位勘誤。

左邊的Demo是【A+B+C】的信息組合展現(xiàn)，表意并不明確。比如這個信息可以組合成【所在校區(qū)英語一年級】也可以組合成【所在校區(qū)語文一年級】，這樣的話會出現(xiàn)很多種搭配，用戶并不能明確知道自己名下的每一條信息，那個勘誤接口也不能定位信息，總之這個原型考慮不周全。

后來，和PM溝通后，我把樣式改成了右邊這樣。節(jié)約空間、信息清晰還能準確定位，能滿足信息查看和勘誤的兩個功能。

【2】交互模型樣式

這次開發(fā)比較基礎(chǔ)，沒有過多復(fù)雜模塊。拿到Demo時，功能點是能看懂，但是看起來就很變扭，也說不上為什么。只能先想想自己有沒有用過類似功能，找到合適的參考先。

方案一

這次的后臺有個創(chuàng)建分組功能，原有Demo和常見的郵箱添加用戶做法類似（見下圖），選框會因人數(shù)的增加而變化，但實際載體卻是一個彈窗。

如果真按照原型來做的話，彈窗的高度就不可控，樣式會發(fā)生變化。雖然增加幾行代碼也許能解決的這個問題，但結(jié)合實際使用常見來看，用戶大多使用1280*768的屏幕，并不是大屏用戶的擁躉；而創(chuàng)建分組又需要大量添加成員；這樣做的導(dǎo)致的結(jié)果就是彈窗變大，超出顯示區(qū)域，操作起來很麻煩。

PC版_QQ郵箱

想來想去覺得這樣不適合，然后想了想最常用的創(chuàng)建分組功能的應(yīng)用 — QQ和微信

下圖是：MAC版的QQ創(chuàng)建組，是上中下結(jié)構(gòu)。

層級部分是左右結(jié)構(gòu)，不需要一層層點開，這種設(shè)計和QQ二元分組結(jié)構(gòu)有關(guān)。經(jīng)常操作區(qū)域為紫色部分,鼠標移動帶來的手部移動區(qū)域其實挺大的。選中后列表顯示也不夠直觀，中間列表選中的內(nèi)容要在底部列表才顯示。

MAC_QQ分組

下圖是：WIN版的QQ創(chuàng)建組，是左中右結(jié)構(gòu)。

層級展示沒那么清晰（需要一層層點擊打開），鼠標移動基本在一條平行線上，使用起來很直觀，就好像把左邊籃子里的雞蛋放到右邊籃子里。但中間的按鈕設(shè)計有點丑，應(yīng)該是有改進的可能

WIN_QQ分組

下圖是PC版微信發(fā)起群聊，左右結(jié)構(gòu)。

我覺得這是三種建組方式里面最好用也最清晰的，所有操作集中在彈窗左邊，右邊列表僅做顯示數(shù)據(jù)用，鼠標上下滑動就好，連鼠標移動都很少，選好之后一個確定就搞定，干凈利索又好用。

看到這個控件的時候真心熱淚盈眶啊（555...）越發(fā)覺得交互Demo的重要性啊！不然做到最后開發(fā)不出來，還是要重做設(shè)計，那就太苦逼了。最后我選擇了微信發(fā)起群聊這種模式作為參考，能很好的滿足這次的設(shè)計需求~

PC_微信建群