自選股小程序已經(jīng)上線，作為項(xiàng)目的一員，做了一下交互體驗(yàn)和視覺(jué)設(shè)計(jì)的總結(jié)。

我們很幸運(yùn)能夠第一批加入微信小程序內(nèi)測(cè)的團(tuán)隊(duì)，并深刻的感受到微信開(kāi)平童鞋快速的顛覆自我的能力，同時(shí)也開(kāi)始了自選股小程序界面重塑再造、快速擁抱變化的新歷程。作為內(nèi)測(cè)團(tuán)隊(duì)中最重量級(jí)的小程序－自選股的設(shè)計(jì)師，和大家分享一下整個(gè)項(xiàng)目的設(shè)計(jì)心得體會(huì)。

設(shè)計(jì)定位

大家都知道小程序是“即搜即用，用完即走”,從它的整個(gè)定位我們可以了解到是小程序更適合那些輕量級(jí)的工具型應(yīng)用。自選股本身不是輕量級(jí)產(chǎn)品，也希望能夠在微信上搭建一個(gè)小程序的話，則更需要簡(jiǎn)潔、輕便的設(shè)計(jì)定位。

自選股小程序結(jié)合微信的設(shè)計(jì)規(guī)范以及自選股app的品牌特色，針對(duì)自選股微信小程序簡(jiǎn)潔、輕便的設(shè)計(jì)定位，進(jìn)行了核心功能界面設(shè)計(jì)的創(chuàng)新再造。整個(gè)界面都采用線性設(shè)計(jì)，避免圖的帶入，整個(gè)包下來(lái)不到1mb。我們所追求的就是”快”.

交互設(shè)計(jì)&視覺(jué)設(shè)計(jì)

這個(gè)項(xiàng)目的視覺(jué)設(shè)計(jì)開(kāi)始實(shí)現(xiàn)是有難處的。我們幫助微信團(tuán)隊(duì)一起搭建了一部分重要框架，我們是微信小程序最忠實(shí)的“測(cè)試小分隊(duì)”。初期交互設(shè)計(jì)稿是沒(méi)有的，設(shè)計(jì)師只能快速摸索產(chǎn)品的手稿進(jìn)行設(shè)計(jì)。

這個(gè)項(xiàng)目涉及到的內(nèi)容特別多，一是人太多，有微信的前端童鞋、自選股客戶端童鞋等等，太多的底層框架還不能支持，只能在初稿的基礎(chǔ)上不斷優(yōu)化；二是涉及功能太多，細(xì)節(jié)太多，時(shí)間太過(guò)緊急，所有視覺(jué)設(shè)計(jì)稿都是出自于下面的多張手稿，出圖的效率必須又高又快，不然跟不上開(kāi)發(fā)和產(chǎn)品的需求。往往剛調(diào)好的一個(gè)頁(yè)面可能又需要再重新調(diào)整高度和蠟燭圖的數(shù)量等等，不過(guò)整體的效率還是大大得到了提高。

后來(lái)我們有了微信團(tuán)隊(duì)的交互規(guī)范，我再根據(jù)他們的規(guī)范來(lái)調(diào)整自選股的界面設(shè)計(jì)。

1. 交互設(shè)計(jì)

微信一直都是極簡(jiǎn)設(shè)計(jì)，給用戶帶來(lái)最棒的設(shè)計(jì)體驗(yàn),同時(shí)也給出了一系列的UI設(shè)計(jì)規(guī)范，簡(jiǎn)單舉幾個(gè)栗子。

• 一個(gè)頁(yè)面只有一個(gè)重點(diǎn)，不干擾用戶的目標(biāo)
• 一次只做一件事，不打斷用戶的操作流程
• 簡(jiǎn)單且一致的導(dǎo)航，讓用戶來(lái)去自如
• 注重異常狀態(tài)，讓用戶有路可退
• ……

下面說(shuō)一下小程序個(gè)人認(rèn)為比較重要的交互設(shè)計(jì)

（1）所有頁(yè)面層級(jí)不能超過(guò)5層

一進(jìn)入小程序就是第一層，往后依次類推，到第5層以后無(wú)法再進(jìn)入第6層。主要還是微信在性能上的考慮，不考慮5層以上的操作。倒也可以用redirect的方式去規(guī)避。

（2）頂部navigation?bar上的icon無(wú)法自定義

自選股app右上角有很常用的刷新、搜索按鈕，但是小程序頂部只能夠放置微信框架下的“返回”“x”和“…”，甚至目前”…”里面的操作也不能自定義.所以我們采用頂部搜索bar的形式替代了搜索icon，下拉刷新替代了左上角刷新icon。

自選股app

微信框架

自選股小程序

（3）暫時(shí)不支持多點(diǎn)手勢(shì)（如左滑），可使用長(zhǎng)按刪除

左劃刪除為JS模擬生成暫不支持原生操作，體驗(yàn)起來(lái)不是很順暢，所以建議采用長(zhǎng)按方式去替代左劃刪除操作。

（4） 一個(gè)頁(yè)面不能超過(guò)4個(gè)Tab

為確保點(diǎn)擊區(qū)域，頂部tab項(xiàng)不得超過(guò)4項(xiàng)。一個(gè)頁(yè)面也不應(yīng)出現(xiàn)一組以上的tab欄。

自選股行情tab

（5）左右滑動(dòng)切換

頁(yè)面的過(guò)長(zhǎng)時(shí)間的等待會(huì)引起用戶的不良情緒，微信盡最大努力減少等待時(shí)間。

（6）不支持頂部懸浮導(dǎo)航

（7） 支持圖片（相冊(cè)、拍照）、音頻（錄音、播放）、視頻（拍攝、本地選擇）、位置（GPS位置、微信內(nèi)置地圖坐標(biāo)、）

（8）加載反饋?zhàn)⒁馐马?xiàng)

• 若載入時(shí)間較長(zhǎng),應(yīng)提供取消操作,并使用進(jìn)度條顯示載入的進(jìn)度。
• 載入過(guò)程中,應(yīng)保持動(dòng)畫(huà)效果
• 不要在同一個(gè)頁(yè)面同時(shí)使用超過(guò)1個(gè)加載動(dòng)畫(huà)。

2. 視覺(jué)設(shè)計(jì)上鼓勵(lì)差異化

每個(gè)小程序可以按照自身的品牌特色進(jìn)行視覺(jué)設(shè)計(jì)，形成自己的小程序風(fēng)格。自選股小程序沿用了自選股app黑色設(shè)計(jì)風(fēng)格，icon重新設(shè)計(jì)并風(fēng)格一致化。

（1）字體設(shè)計(jì)

字體和字號(hào)按照微信所給的規(guī)范以及自選股根據(jù)自身特色所總結(jié)的設(shè)計(jì)規(guī)范進(jìn)行統(tǒng)一設(shè)計(jì)，保證界面以最清晰的狀態(tài)呈現(xiàn)給用戶。

（2）配色設(shè)計(jì)

主內(nèi)容?white?白色，次要內(nèi)容?Grey?灰色，Blue?藍(lán)色為輔色，并且藍(lán)色為完成字樣色，紅色為出錯(cuò)用色。其中最重要的紅綠色進(jìn)行了色盲區(qū)分，讓色盲人士看股票再也不是難事。

（3）按鈕設(shè)計(jì)

自選股按鈕的設(shè)計(jì)上按照微信所給的規(guī)范進(jìn)行了再設(shè)計(jì)。按鈕高度為44px下使用，顏色＃3083e3?/?＃d45c25／＃565b5e，字號(hào)為18pt。在可點(diǎn)狀態(tài)下文字調(diào)整透明度為60%，但在不可點(diǎn)狀態(tài)下文字調(diào)整透明度為30%。

（4）Icon設(shè)計(jì)

為了風(fēng)格一致化，我將小程序的icon重新統(tǒng)一進(jìn)行了設(shè)計(jì)。線性的圖標(biāo)更加體現(xiàn)小程序“輕、快”的設(shè)計(jì)理念。Icon以“點(diǎn)擊藍(lán)”和“狀態(tài)灰”為主以及各家銀行icon的統(tǒng)一規(guī)劃。

（5）界面適配

ui需要整體等比縮放，以適合安卓與IOS手機(jī)。甚至我們還實(shí)現(xiàn)了自選股微信小程序在iOS和Android雙平臺(tái)的等比例完美適配，有一個(gè)適配套用公式就是所要適配的設(shè)計(jì)元素實(shí)際（寬度、長(zhǎng)度）／設(shè)計(jì)稿子尺寸的實(shí)際（寬度、長(zhǎng)度）＊所要適配手機(jī)的實(shí)際（寬度、長(zhǎng)度），一套代碼兩端復(fù)用。

（6）tab設(shè)計(jì)

Tab欄選中態(tài)默為100%色，未選中態(tài)帶有60%。保持Tab的可用性、可視性和可操作性。

規(guī)范和整理

設(shè)計(jì)稿變更快的真是攔都攔不住，為了保證大家能夠快速共享到設(shè)計(jì)稿的資源，我們封閉2個(gè)月期間使用Trello快速同步所有的設(shè)計(jì)變更，真的又快又有效。

對(duì)整個(gè)小程序的頁(yè)面設(shè)計(jì)以及規(guī)范進(jìn)行了總結(jié)，同時(shí)也幫助開(kāi)發(fā)同學(xué)后期的校對(duì)工作以及頁(yè)面的查找。一套UI會(huì)不斷重組到6套個(gè)股底層頁(yè)的模板重新搭建，10個(gè)大功能主頁(yè)面、16個(gè)主功能特性，46個(gè)需求細(xì)分特性，在短短幾個(gè)月的時(shí)間不斷地調(diào)整，不斷地顛覆，不斷地“重生再造”。

總結(jié)

最后很開(kāi)心能和自選股小分隊(duì)一起把小程序一點(diǎn)點(diǎn)實(shí)現(xiàn)起來(lái),也特別感謝微信團(tuán)隊(duì)的支持。在做自選股小程序我們不斷快速的調(diào)整，不斷地打磨細(xì)節(jié)，也得到了微信團(tuán)隊(duì)的一致好評(píng),希望能給大家?guī)?lái)一款好用的炒股產(chǎn)品。

來(lái)源：騰訊NDC