通常來(lái)說(shuō)，界面設(shè)計(jì)工作是在原型圖之后開發(fā)之前，原型圖的構(gòu)架關(guān)系在一定程度上會(huì)影響到界面的設(shè)計(jì)的發(fā)揮余地。所以設(shè)計(jì)師同學(xué)要積極的參加到前期各個(gè)環(huán)節(jié)中。站在各個(gè)職能的角度上環(huán)視產(chǎn)品需求給出視覺(jué)體驗(yàn)建議，方便更好的開展今后的設(shè)計(jì)工作，了解和確定產(chǎn)品屬性以及基調(diào)。
一個(gè)好的app視覺(jué)在一定程度上反映了產(chǎn)品的精神面貌以及品牌調(diào)性，同時(shí)也帶給用戶易懂且操作舒適的使用體驗(yàn)。
在產(chǎn)品界面設(shè)計(jì)之前，首先需要了解前期產(chǎn)品的一些數(shù)據(jù)和分析，用以支撐接下來(lái)設(shè)計(jì)工作的論點(diǎn)和依據(jù)：
產(chǎn)品目標(biāo)用戶人群和消費(fèi)情況
調(diào)研結(jié)果表明人們每月用于互聯(lián)網(wǎng)彩票消費(fèi)的額度較高，同時(shí)互聯(lián)網(wǎng)購(gòu)彩者以男性居多，購(gòu)買能力更強(qiáng)。另一方面，網(wǎng)易的用戶以30歲以上的男性用戶為主，這樣的用戶構(gòu)成，也對(duì)網(wǎng)易的彩票銷售起到了促進(jìn)作用。
產(chǎn)品方向
以競(jìng)彩專家推薦為主要特色的足球、籃球賽事分析類App
體彩市場(chǎng)情況以及競(jìng)品分析
目前，體彩市場(chǎng)主要細(xì)分為彩票售賣、付費(fèi)閱讀、虛擬游戲三個(gè)領(lǐng)域。其中彩票售賣由于已經(jīng)被叫停，故不在此次討論范圍之內(nèi)。
主要競(jìng)品
競(jìng)彩貓、球商、小刀匯、精彩說(shuō)等
競(jìng)品概況(視覺(jué)角度)
產(chǎn)品視覺(jué)角度分析：整體產(chǎn)品視覺(jué)不統(tǒng)一，且界面中層級(jí)關(guān)系混亂。競(jìng)品在用戶體驗(yàn)上是低于整體app業(yè)內(nèi)水平
設(shè)計(jì)方向
根據(jù)以上數(shù)據(jù)分析歸納產(chǎn)品的設(shè)計(jì)方向應(yīng)為：層次鮮明 ，內(nèi)容突出 。男性用戶更為理性，盡量減少過(guò)多結(jié)構(gòu)視覺(jué)樣式的表現(xiàn)，保持統(tǒng)一性且結(jié)構(gòu)鮮明流暢，更突出內(nèi)容和數(shù)據(jù)的呈現(xiàn)。在產(chǎn)品之初，不斷在顏色和細(xì)節(jié)等方面滲透品質(zhì)與品牌感。由于項(xiàng)目屬于為專業(yè)競(jìng)猜用戶服務(wù)的產(chǎn)品，專業(yè)內(nèi)約定俗成的一些規(guī)范和特定的一些色彩搭配的含義可以誘發(fā)用戶的一些直觀情緒，設(shè)計(jì)中必須要考慮到避免使用一些不合時(shí)宜的色彩。
設(shè)計(jì)思路 UI部分
1-首頁(yè)主視覺(jué)部分
從業(yè)務(wù)和需求角度考慮，首頁(yè)信息盡可能展現(xiàn)更多信息，在界面設(shè)計(jì)語(yǔ)言表現(xiàn)上需要盡量扁平處理，用顏色或者模塊區(qū)分不同層級(jí)的信息。主次分明，做到能用一種維度區(qū)分，就不做兩種處理。統(tǒng)一同類內(nèi)容和模塊以及元素，更好的呈現(xiàn)卡片內(nèi)容和每個(gè)卡片之間的邏輯關(guān)系。在內(nèi)容化設(shè)計(jì)上給出更明確的認(rèn)知，輔助用戶在使用場(chǎng)景下，快速找到需要獲取的信息。
專家推薦部分間隔較閱讀類產(chǎn)品稍大些。希望在頭像和名稱部分增加一下視覺(jué)通透感。用戶瀏覽起來(lái)減少疲憊，處于舒適狀態(tài)。方案卡片右下空間也是同理。
首頁(yè)做了無(wú)頂部導(dǎo)航欄處理。從業(yè)務(wù)和用戶角度考慮，第一屏作為重要信息流展示，需要展示更多信息，設(shè)計(jì)規(guī)劃業(yè)務(wù)內(nèi)容需要更多展示空間。
整個(gè)首頁(yè)信息流分為個(gè)三個(gè)模塊“專家推薦 ”“推薦方案” “編輯精選” 。為了減少用戶的認(rèn)知成本并且不增加結(jié)構(gòu)的復(fù)雜性，一個(gè)頁(yè)面不適宜超過(guò)三個(gè)不同樣式，所以在編輯精選卡片中有無(wú)數(shù)據(jù)都做了統(tǒng)一處理。
2-專家個(gè)人頁(yè)視覺(jué)部分
專家個(gè)人頁(yè)模塊中，為了不增加樣式的復(fù)雜性，專家介紹文字和數(shù)據(jù)收錄在一個(gè)卡片中，且數(shù)字和文字組合版塊需要適當(dāng)增加留白空間，調(diào)整到最平衡的視覺(jué)結(jié)構(gòu)，又通過(guò)這些空間突出了需要呈現(xiàn)的信息層級(jí)，符合視覺(jué)規(guī)律。
根據(jù)頁(yè)面屬性的需求，專家個(gè)人頁(yè)的頂部用了個(gè)性化的背景設(shè)計(jì)卻不花哨。突出專家個(gè)人的信息呈現(xiàn)。層級(jí)清晰，主次分明。
其中盡量將同類型場(chǎng)景、內(nèi)容模版統(tǒng)一，達(dá)到簡(jiǎn)明統(tǒng)一的效果。比如專家關(guān)注和首頁(yè)保持模塊統(tǒng)一，關(guān)注專家頁(yè)面和主視覺(jué)保持平衡等。產(chǎn)品內(nèi)部，同類屬性標(biāo)簽樣式和顏色統(tǒng)一，如命中率標(biāo)簽等，解決用戶對(duì)同類型場(chǎng)景的認(rèn)知和統(tǒng)一視覺(jué)感受，瀏覽更流暢舒適。
首版本之后馬上會(huì)有優(yōu)化，其中有很多需要完善的部分，比如動(dòng)效，文章中這里說(shuō)的是只一種工作方法，如何通過(guò)立flag，完成UI的產(chǎn)出過(guò)程。整體遵循的原則應(yīng)該是整體視覺(jué)的統(tǒng)一性 信息呈現(xiàn)富有層次性和分布邏輯具有組織性。
其實(shí)，界面設(shè)計(jì)是一種視覺(jué)語(yǔ)言，產(chǎn)品用這種語(yǔ)言與用戶溝通，用戶在什么樣的場(chǎng)景下使用產(chǎn)品，和產(chǎn)品的交互過(guò)程中，激發(fā)了用戶的那些情緒，當(dāng)這些情緒出現(xiàn)，我們的設(shè)計(jì)語(yǔ)言是激勵(lì)還是安撫體諒?我們需要做的是用設(shè)計(jì)語(yǔ)言完成與產(chǎn)品交互之間的平衡，給用戶帶來(lái)更好的體驗(yàn)甚至小驚喜。
產(chǎn)品設(shè)計(jì)過(guò)程中需要有自己的理念，它不僅僅是狹隘的扁平化或者擬物化，這只是表象。這種理念應(yīng)當(dāng)是基于它是如何有益于用戶的，又或者給用戶帶來(lái)什么樣的好處，獲得了什么樣的啟發(fā)，或許是生理上的，或許是情感上的。
我一直覺(jué)得做設(shè)計(jì)，其實(shí)是在克制，潛移默化是最好的。在你沒(méi)有想好如何表達(dá)，最穩(wěn)妥的做法是，克制你的表達(dá)欲。