中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

自選股小程序已經上線，作為項目的一員，做了一下交互體驗和視覺設計的總結。

我們很幸運能夠第一批加入微信小程序內測的團隊，并深刻的感受到微信開平童鞋快速的顛覆自我的能力，同時也開始了自選股小程序界面重塑再造、快速擁抱變化的新歷程。作為內測團隊中最重量級的小程序－自選股的設計師，和大家分享一下整個項目的設計心得體會。

設計定位

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

自選股小程序結合微信的設計規范以及自選股app的品牌特色，針對自選股微信小程序簡潔、輕便的設計定位，進行了核心功能界面設計的創新再造。整個界面都采用線性設計，避免圖的帶入，整個包下來不到1mb。我們所追求的就是”快”.

交互設計&視覺設計

這個項目的視覺設計開始實現是有難處的。我們幫助微信團隊一起搭建了一部分重要框架，我們是微信小程序最忠實的“測試小分隊”。初期交互設計稿是沒有的，設計師只能快速摸索產品的手稿進行設計。

這個項目涉及到的內容特別多，一是人太多，有微信的前端童鞋、自選股客戶端童鞋等等，太多的底層框架還不能支持，只能在初稿的基礎上不斷優化；二是涉及功能太多，細節太多，時間太過緊急，所有視覺設計稿都是出自于下面的多張手稿，出圖的效率必須又高又快，不然跟不上開發和產品的需求。往往剛調好的一個頁面可能又需要再重新調整高度和蠟燭圖的數量等等，不過整體的效率還是大大得到了提高。

后來我們有了微信團隊的交互規范，我再根據他們的規范來調整自選股的界面設計。

1. 交互設計

微信一直都是極簡設計，給用戶帶來最棒的設計體驗,同時也給出了一系列的UI設計規范，簡單舉幾個栗子。

• 一個頁面只有一個重點，不干擾用戶的目標
• 一次只做一件事，不打斷用戶的操作流程
• 簡單且一致的導航，讓用戶來去自如
• 注重異常狀態，讓用戶有路可退
• ……

下面說一下小程序個人認為比較重要的交互設計

（1）所有頁面層級不能超過5層

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

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

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

自選股app

微信框架

自選股小程序

（3）暫時不支持多點手勢（如左滑），可使用長按刪除

左劃刪除為JS模擬生成暫不支持原生操作，體驗起來不是很順暢，所以建議采用長按方式去替代左劃刪除操作。

（4） 一個頁面不能超過4個Tab

為確保點擊區域，頂部tab項不得超過4項。一個頁面也不應出現一組以上的tab欄。

自選股行情tab

（5）左右滑動切換

頁面的過長時間的等待會引起用戶的不良情緒，微信盡最大努力減少等待時間。

（6）不支持頂部懸浮導航

（7） 支持圖片（相冊、拍照）、音頻（錄音、播放）、視頻（拍攝、本地選擇）、位置（GPS位置、微信內置地圖坐標、）

（8）加載反饋注意事項

• 若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。
• 載入過程中,應保持動畫效果
• 不要在同一個頁面同時使用超過1個加載動畫。

2. 視覺設計上鼓勵差異化

每個小程序可以按照自身的品牌特色進行視覺設計，形成自己的小程序風格。自選股小程序沿用了自選股app黑色設計風格，icon重新設計并風格一致化。

（1）字體設計

字體和字號按照微信所給的規范以及自選股根據自身特色所總結的設計規范進行統一設計，保證界面以最清晰的狀態呈現給用戶。

（2）配色設計

主內容?white?白色，次要內容?Grey?灰色，Blue?藍色為輔色，并且藍色為完成字樣色，紅色為出錯用色。其中最重要的紅綠色進行了色盲區分，讓色盲人士看股票再也不是難事。

（3）按鈕設計

自選股按鈕的設計上按照微信所給的規范進行了再設計。按鈕高度為44px下使用，顏色＃3083e3?/?＃d45c25／＃565b5e，字號為18pt。在可點狀態下文字調整透明度為60%，但在不可點狀態下文字調整透明度為30%。

（4）Icon設計

為了風格一致化，我將小程序的icon重新統一進行了設計。線性的圖標更加體現小程序“輕、快”的設計理念。Icon以“點擊藍”和“狀態灰”為主以及各家銀行icon的統一規劃。

（5）界面適配

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

（6）tab設計

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

規范和整理

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

對整個小程序的頁面設計以及規范進行了總結，同時也幫助開發同學后期的校對工作以及頁面的查找。一套UI會不斷重組到6套個股底層頁的模板重新搭建，10個大功能主頁面、16個主功能特性，46個需求細分特性，在短短幾個月的時間不斷地調整，不斷地顛覆，不斷地“重生再造”。

總結

最后很開心能和自選股小分隊一起把小程序一點點實現起來,也特別感謝微信團隊的支持。在做自選股小程序我們不斷快速的調整，不斷地打磨細節，也得到了微信團隊的一致好評,希望能給大家帶來一款好用的炒股產品。

來源：騰訊NDC