通常來說，界面設(shè)計工作是在原型圖之后開發(fā)之前，原型圖的構(gòu)架關(guān)系在一定程度上會影響到界面的設(shè)計的發(fā)揮余地。所以設(shè)計師同學(xué)要積極的參加到前期各個環(huán)節(jié)中。站在各個職能的角度上環(huán)視產(chǎn)品需求給出視覺體驗建議，方便更好的開展今后的設(shè)計工作，了解和確定產(chǎn)品屬性以及基調(diào)。

一個好的app視覺在一定程度上反映了產(chǎn)品的精神面貌以及品牌調(diào)性，同時也帶給用戶易懂且操作舒適的使用體驗。

在產(chǎn)品界面設(shè)計之前，首先需要了解前期產(chǎn)品的一些數(shù)據(jù)和分析，用以支撐接下來設(shè)計工作的論點(diǎn)和依據(jù)：

產(chǎn)品目標(biāo)用戶人群和消費(fèi)情況

調(diào)研結(jié)果表明人們每月用于互聯(lián)網(wǎng)彩票消費(fèi)的額度較高，同時互聯(lián)網(wǎng)購彩者以男性居多，購買能力更強(qiáng)。另一方面，網(wǎng)易的用戶以30歲以上的男性用戶為主，這樣的用戶構(gòu)成，也對網(wǎng)易的彩票銷售起到了促進(jìn)作用。

產(chǎn)品方向

以競彩專家推薦為主要特色的足球、籃球賽事分析類App

體彩市場情況以及競品分析

目前，體彩市場主要細(xì)分為彩票售賣、付費(fèi)閱讀、虛擬游戲三個領(lǐng)域。其中彩票售賣由于已經(jīng)被叫停，故不在此次討論范圍之內(nèi)。

主要競品

競彩貓、球商、小刀匯、精彩說等

競品概況(視覺角度)

產(chǎn)品視覺角度分析：整體產(chǎn)品視覺不統(tǒng)一，且界面中層級關(guān)系混亂。競品在用戶體驗上是低于整體app業(yè)內(nèi)水平

設(shè)計方向

根據(jù)以上數(shù)據(jù)分析歸納產(chǎn)品的設(shè)計方向應(yīng)為：層次鮮明 ，內(nèi)容突出 。男性用戶更為理性，盡量減少過多結(jié)構(gòu)視覺樣式的表現(xiàn)，保持統(tǒng)一性且結(jié)構(gòu)鮮明流暢，更突出內(nèi)容和數(shù)據(jù)的呈現(xiàn)。在產(chǎn)品之初，不斷在顏色和細(xì)節(jié)等方面滲透品質(zhì)與品牌感。由于項目屬于為專業(yè)競猜用戶服務(wù)的產(chǎn)品，專業(yè)內(nèi)約定俗成的一些規(guī)范和特定的一些色彩搭配的含義可以誘發(fā)用戶的一些直觀情緒，設(shè)計中必須要考慮到避免使用一些不合時宜的色彩。

設(shè)計思路 UI部分

1-首頁主視覺部分

從業(yè)務(wù)和需求角度考慮，首頁信息盡可能展現(xiàn)更多信息，在界面設(shè)計語言表現(xiàn)上需要盡量扁平處理，用顏色或者模塊區(qū)分不同層級的信息。主次分明，做到能用一種維度區(qū)分，就不做兩種處理。統(tǒng)一同類內(nèi)容和模塊以及元素，更好的呈現(xiàn)卡片內(nèi)容和每個卡片之間的邏輯關(guān)系。在內(nèi)容化設(shè)計上給出更明確的認(rèn)知，輔助用戶在使用場景下，快速找到需要獲取的信息。

專家推薦部分間隔較閱讀類產(chǎn)品稍大些。希望在頭像和名稱部分增加一下視覺通透感。用戶瀏覽起來減少疲憊，處于舒適狀態(tài)。方案卡片右下空間也是同理。

首頁做了無頂部導(dǎo)航欄處理。從業(yè)務(wù)和用戶角度考慮，第一屏作為重要信息流展示，需要展示更多信息，設(shè)計規(guī)劃業(yè)務(wù)內(nèi)容需要更多展示空間。

整個首頁信息流分為個三個模塊“專家推薦 ”“推薦方案” “編輯精選” 。為了減少用戶的認(rèn)知成本并且不增加結(jié)構(gòu)的復(fù)雜性，一個頁面不適宜超過三個不同樣式，所以在編輯精選卡片中有無數(shù)據(jù)都做了統(tǒng)一處理。

2-專家個人頁視覺部分

專家個人頁模塊中，為了不增加樣式的復(fù)雜性，專家介紹文字和數(shù)據(jù)收錄在一個卡片中，且數(shù)字和文字組合版塊需要適當(dāng)增加留白空間，調(diào)整到最平衡的視覺結(jié)構(gòu)，又通過這些空間突出了需要呈現(xiàn)的信息層級，符合視覺規(guī)律。

根據(jù)頁面屬性的需求，專家個人頁的頂部用了個性化的背景設(shè)計卻不花哨。突出專家個人的信息呈現(xiàn)。層級清晰，主次分明。

其中盡量將同類型場景、內(nèi)容模版統(tǒng)一，達(dá)到簡明統(tǒng)一的效果。比如專家關(guān)注和首頁保持模塊統(tǒng)一，關(guān)注專家頁面和主視覺保持平衡等。產(chǎn)品內(nèi)部，同類屬性標(biāo)簽樣式和顏色統(tǒng)一，如命中率標(biāo)簽等，解決用戶對同類型場景的認(rèn)知和統(tǒng)一視覺感受，瀏覽更流暢舒適。

首版本之后馬上會有優(yōu)化，其中有很多需要完善的部分，比如動效，文章中這里說的是只一種工作方法，如何通過立flag，完成UI的產(chǎn)出過程。整體遵循的原則應(yīng)該是整體視覺的統(tǒng)一性 信息呈現(xiàn)富有層次性和分布邏輯具有組織性。

其實，界面設(shè)計是一種視覺語言，產(chǎn)品用這種語言與用戶溝通，用戶在什么樣的場景下使用產(chǎn)品，和產(chǎn)品的交互過程中，激發(fā)了用戶的那些情緒，當(dāng)這些情緒出現(xiàn)，我們的設(shè)計語言是激勵還是安撫體諒?我們需要做的是用設(shè)計語言完成與產(chǎn)品交互之間的平衡，給用戶帶來更好的體驗甚至小驚喜。

產(chǎn)品設(shè)計過程中需要有自己的理念，它不僅僅是狹隘的扁平化或者擬物化，這只是表象。這種理念應(yīng)當(dāng)是基于它是如何有益于用戶的，又或者給用戶帶來什么樣的好處，獲得了什么樣的啟發(fā)，或許是生理上的，或許是情感上的。

我一直覺得做設(shè)計，其實是在克制，潛移默化是最好的。在你沒有想好如何表達(dá)，最穩(wěn)妥的做法是，克制你的表達(dá)欲。