<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          政務可視化設計經驗-頁面視覺-上

          周周

          前言

          從入行到如今的這些年中,眼中的設計風格不斷變化。伴隨這些年行業的興起,從最早的擬物風到現在的內容當道,越來越多的設計師參與其中,為行業貢獻著自己的理解。但也發現同質化的現象越趨明顯,個人認為這里面有設計師本身的問題,也有行業風氣的問題。同質化的現象有很多的組成因素,可能是頁面視覺是直接的拿來主義,亦可能是脫離不了舒適圈的習慣為之。


          我很擔心的一件事情就是我們一味的反對同質化的假,最后會演變成另外一種假。是一味的擯棄,還是部分的接納。這是一個界限的問題,而這個界限我還沒想明白。如今風格太現成,都像麥當勞一樣,思想的麥當勞,短暫的吃下去了,飽了,不去想了。這個慣性思維很可怕,最可怕的是可能有段時間自身都意識不到這個問題。


          那么如何跳出這個慣性思維?我這邊借用馮小剛導演在十三邀里說的一段話來解釋。創作過程太正常很多時候是經驗在發揮作用,每次都和自己的經驗作斗爭,最后可能會出現一個在經驗之外又讓自己激動的東西。簡而言之就是革了自己的命??赡苣奶煳蚁朊靼走@個問題,會再寫一章如何創新來講這個問題。


          那么本章主要講我們是如何在前期定義一張大屏的風格?主要可以從幾個方面來講:配色、字體、構圖、氛圍。


          一、定義頁面配色

          定義大屏配色的前提是對于用戶的政務有著充分的調研,明白是主管哪個行業的,分別用對應的色系去定調子。


          舉個例子,生物醫藥、環保等行業通常選用能表達健康安全的綠色;公安、教育、政府等通常選用能表達科技未來的藍色;消費業、服務業等行業通常選用能表達熱鬧、朝氣的暖色調。


          它們有個共性就是主色調不管傾向于哪個顏色,背景通常是對應顏色的暗色系。因為可視化大屏使用環境通常是在室內、展廳等這種外部環境比較暗的地方,避免對于觀賞者視覺上的不適應。而且這也有幫助觀賞者對于數據的聚焦比對的工作,暗色調的背景加上高亮的配色,也容易在界面中將層次做出來,這點特別適用與3D城市的構建,以后我們會講述如何在城市中做出層次對比的方法。





          色彩心理學普遍還是適用于可視化大屏的,顏色對于人意識的傾向性還是比較強烈的。但是需要明確的是在數據可視化領域中,有些配色規則并不適用。在傳統UI設計中我們一般會擬訂主色輔色特殊狀態色,甚至在灰階會把標題、正文、背景的顏色區分做全。這樣做的好處就組件一致性,給人統一的感覺。數據可視化一般會定一個主基調,圍繞這個主基調會用至少5-6中以上的調色板進行設計。


          (一)使用足夠并且容易區分層級的顏色種類


          假設我們需要做一個政務的可視化系統,在設計初期敲定了以靛藍(H:200)為主色調的設定。那么我們會尋找在這個顏色周邊的鄰近色去做這個靛藍色調的搭配,比如在青(H:180)和深藍(H:220),使得整個大面積的色彩整體上過渡會比較自然。通過對純度S和明度B的調節,我們可以找到很多色調用于數字、文字、點線面等視覺元素。然后在靛藍色調的對比色上去尋找用于高亮的展示,比如綠(H:120)這類的,起到強化主色調的層級作用。最后找到靛藍色的互補色左右的紅(H:10)和黃(H:45)用于重點強調內容。主色調的互補色需要少量并且珍惜的使用,需要有但不是大面積得使用。


          色彩是為了突出內容的重要信息,請有選擇、有策略的使用顏色,切勿濫用。配色沒有絕對的好壞,只有在當前場景下是否適合,色環理論只能大致告訴你一些配色的方式,最重要的是靠設計師自己眼睛去感受顏色帶來的沖擊力。上述的配色方式僅僅是我們工作的一個慣用方式,不同項目敲定的內容也不同,請靈活使用。


          當然我們在這邊提及的色調并不是一個確定的值,而是圍繞選定顏色周邊的一個色域??赡茉谖淖只蛘邤底稚蠒赜脗鹘yUI的規則,保持特定的統一。但是在點線面、配飾、特殊狀態的觸發等元素上使用這些色域去提高整個界面的層次和細節,使得畫面沒有那么硬,各個板塊之間是有舒服得過渡。這里的色域以前是需要自己將色調于黑白二色融合的漸變中選取不同位置的顏色組成色板,如今AntDesign的輪子比較友好,填入主色就可以對應生成有層級的顏色。



          我們上述的配色方案是有傾向觀賞展示型的,由于用戶使用大屏普遍都是匯報展覽并且用戶樣本容量小。故在表達的過程中大量借鑒了運營設計的方式方法,因此配色方式存在包容性不夠的現象,對于色盲色弱的人群是有障礙的。比如青色、藍色、紫色在色域展開的過程中,選取其中幾個顏色做疊加色板樣式時,灰色模式下存在顏色拉不開的現象??赡苁恰八{色”是對色障人群最友好的顏色,AntV保留MPC疊加色板,但同時在使用建議中也寫明推薦使用MOB疊加色板。



          在數據可視化領域中,還需要界定清楚你做的是偏向觀賞展示型的還是偏向實戰分析型。這兩者的區別主要在觀賞性的數據可視化往往需要大量的視覺語言去烘托氣氛、用輔助性的元素去增強觀賞的趣味。實戰分析型的主要是需要消除不必要的視覺雜音、強化傳達的力度。因此這就是一個尺度的問題,是偏向品牌創意的手法多一點,還是偏向傳統UI的手法多一點,君可自決~


          (二)反面案例解析

          以下的案例是我自己工作中犯的錯誤,拿出來共勉(捂臉233333)。做的時候由于可視化的經驗并不是很多,在選用顏色的過程中并沒有把顏色的層級拉的特別開,導致長時間觀賞容易產生識別不清的問題,進一步講有可能在比對數據過程中產生認知障礙?;厥滓豢?,中央的核心區插畫的比重大于數據本身要表達的內容,出現了喧賓奪主的情況。這也是一些設計師容易犯的錯誤,需要再次明確所有的手法和表達方式都是服從一個原則,即清晰有效地傳達與溝通信息。



          設想一下,一個充滿數據的界面本身就是會伴隨視覺疲勞的。人是有惰性的,會自然的抗拒一些不清晰不明確的展現方式。數據可視化在我們理解中就是通過設計師清晰有效地傳達與溝通信息,使人有能力抗拒自己的惰性去從枯燥的數據中分析出超額信息。


          二、挑選頁面字體

          數據可視化和大量數字打交道,選對數字的字體挺重要的。涉及到字體版權的問題請自行解決,在推薦字體之前有兩件事情需要注意下:


          第一、文字習慣左對齊,數字習慣右對齊。文字左對齊是人一般從左至右閱讀,數字右對齊能夠快速識別數據量的大小,容易與其他數據比對。因此在選用數字字體的時候,盡量使用字間距相同的字體(比如Lato字體和DIN字體,注意PS中比對的時候需要選擇度量標準,使用視覺的字間距會有問題),這樣比對數據的時候字間距相同更容易產生比對結果。



          第二、選用數字字體的時候需要檢查下常用字符是否有缺失、是否顯示正常。比如錢幣的符號“¥”和“$”以及“%”。還有就是“1”和“7”、“0”和“O”這兩個需要能夠清晰識別。(國外的很多字體是沒有人民幣的符號的,DIN的0和O并不是特別好識別,故很多公司會自己改良字體滿足自身業務的要求)



          我們最長使用的就是思源黑體、思源宋體,開源并且字體庫全。缺點就是比較中性,在數字上辨識度不是很友好,因此我們在數字上最常使用的就是DIN字體。DIN 是德國標準協會,Deutsches Institut für Normung 的首字母縮寫。1975年起,德國政府把DIN作為國家標準體系,DIN 標準在國際和歐洲范圍內被廣泛使用。DIN 字體繼承了嚴謹可識別度高,被廣泛運用。


          DIN也是有缺陷的,支付寶設計師SKY在專欄里也講過4的開頭較大,以及5,6字體的圓形不夠一致,7縮小后識別度問題,所以很多公司都會基于這些問題進行二次設計,比如微信錢包、京東金融、百度金融都在一些地方對DIN字體進行了微調后使用。


          接下來我們直接推薦幾個有風格的英文和數字字體給大家(私貨環節?。?/span>


          (一)英文字體

          1.Futura

          Futura這個字體是我自己特別喜歡的一個字體,字體表現很現代,看上去特別利落,繼承了包豪斯的設計理念。


          2.Optima

          Optima也是我個人比較心水的一款,字體充滿人文主義。字體本身嚴格遵循了黃金分割原則,比例優美,字里行間充滿了變化。

          3.Garamond

          Garamond簡直就是襯線體之中的典范,就這么說吧,經典的設計中一定會出現他的身影。


          4.Bodoni

          Bodoni被譽為“現代主義風格最完美的體現”。字體粗細對比強烈,給人浪漫的感覺。


          5.Didot

          Didot和Bodoni很相似,都是給人浪漫的感覺,不同的是Didot在數字上面做了不一樣的處理,兩者在電商上使用都蠻多的,一般用做價格顯示。


          (二)數字字體

          1.DIN

          DIN被德國人視為“國民字體”,有著悠久的歷史。德國的路標和路牌的標準字體就是DIN。其中的4這個設計挺有個性和特點的,容易辯識出來。除了前面說的問題,真的是精準的徳國工藝阿(dog臉~)

          2.lcdD

          lcdD是常見的電子表數字的字體風格,更加端正鮮明的視覺效果,運用在數字提示等內容上,傾斜風的設計讓字體更有自己的獨特魅力。


          3.Lato

          Lato就是那種非常現代科技感的一款,并且具備了很多常用自己的特點,屬于那種用了不會出錯的字體。


          4.Avanti

          Avanti和DIN在字形上是很相似的,但是它的字形更加飽滿。差異主要在3、5、8這三個數字以及G、Q都做了不一樣的處理,上半部較小而下半部較大,多了一些變化和趣味性。這個字體還有一個細體,一粗一細,靈活使用。


          5.Tensans

          Tensans和Avanti也很相似,如5和8上下部分的比例,6和9的轉折以及中圈部分都挺相似的,有點像Avanti字體的加粗版本。但是Tensans特征更加明顯,比如2、3、4、7的轉角尖銳,切角鋒利,具有很濃重的現代工業氣息,比較適合速度、剛猛、游戲等主題的設計。


          6.Impact

          Impact這個字體第一感覺就是厚重醒目,視覺沖擊力很強。特粗的筆畫、緊縮的間距以及狹窄的中宮,特別適合大標題和醒目的價格展示。


          7.BebasNeue

          字體字面比較秀長,筆畫流暢,簡約大方。適用于化妝品、服裝等女性向。


          8.Niagara-Solid

          和上面哪個BebasNeue是有點相像的,字面細瘦,挺拔優美。多了一些襯線體的字重和體勢的變化,設計感與裝飾感更強,尤為時尚,在女性、文化、時尚類中用的格外多。


          9.Gaoel

          Gaoel有著Avanti的韻味,但是更加年輕、圓潤,令人驚喜的是大寫的字母有著統一的特點,特別未來。不過需要注意的是該款沒有小寫,小寫就直接變成如下樣子。整體字體設計很圓潤,年輕化,可愛非常適合一些偏年輕化的產品,同時字重非常適合金融產品的字重效果!


          10.Proxima Nova

          Proxima Nova的style還是比較多的,我個人用的比較多還是在它的細體上做修改,比較纖細現代。


          11.Gotham

          Gotham號稱發布會字體,特別現代干凈的一款字體,這些年看到的較多是手機發布會的海報設計,纖細的字體壓在海報上很有力量。


          12.Expansiva

          Expansiva也是特別有個性的一款字體,用于做數字的也比較多,目前看到的可視化設計中存在,但是使用量并不多,由于字形骨骼的因素,用于數字上比較多。


          文章來源:tob.design        作者:王亮亮同學


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          炫酷大數據可視化界面設計賞析(八)

          周周

          大屏可視化界面設計可謂是當今行業、企業發展的見證,生動直觀地再現了行業、企業的全貌。不僅作為展示,方便了解、監督;同時可以作為一個有效的管理平臺,帶來效益。大屏界面面向范圍廣,協同性好,易于被采用。下面幾個大屏的界面設計,沉穩的背景上,加上亮色作為點綴和強調。既不失其風格,又富有靈動性。


          WechatIMG345.png

          WechatIMG343.jpeg

          WechatIMG342.png

          WechatIMG341.png

          WechatIMG340.jpeg




          (圖片均來源于網絡)


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          更多精彩文章:


             大數據可視化界面設計賞析(一)

             大數據可視化界面設計賞析(二)

             大數據可視化界面設計賞析(三)

            大數據可視化界面設計賞析(四)

            大數據可視化界面設計賞析(五)

            大數據可視化界面設計賞析(六)

            大數據可視化界面設計賞析(七)


          ui界面設計之網站設計案例欣賞(二)

          周周

          今天跟大家分享的是深色背景的網站界面,深色背景穩重大氣,體現科技感。在界面布局方面簡潔清晰,同時界面中的表格、按鈕、標簽、圖表等控件精致美觀,不管是做web端網頁、大屏界面,還是手機app,都可以借鑒。


          WechatIMG335.png


          WechatIMG334.jpeg


          WechatIMG333.png


          WechatIMG332.png


          WechatIMG336.jpeg


          WechatIMG337.png


          WechatIMG338.png


          (圖片均來源于網絡)


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          更多精彩文章:


          ui界面設計之網站設計案例欣賞(一)


          政務可視化設計經驗——故事線

          周周

          前言

          故事線,即故事框架,在前面的系列有略微提到過,畢竟如何串起信息點以及頁面的構圖方式是服務于故事線的。在我們服務用戶的過程中,發現有些項目的表述方式是重復的。那重復的原因是啥呢?簡單的想了下這些問題,不難發現用戶吸收信息的方式和業務邏輯大致是相似的,所以我們在做項目的過程拿到用戶給出的需求后想出的解決辦法中也是具有一定的相似性。


          解決辦法中的表述方式是單獨存在的,是對應不同的業務場景,我們想要的是將故事線的方法論總結下來,畢竟思想是永恒的。專門用一章講一下我們總結的方法論是因為這些故事線本身是抽象的,具有高度的總結性,能夠適用于大多業務,也方便新人設計師在做需求的時候有一定之規可以參考。


          一、發現現象-提煉問題-問題分析-解決問題

          發現現象-提煉問題-問題分析-解決問題這條故事線,是我自己寫文章的時候想出來的,確實故事線最早的體現就是工作報告之中。這個可算是黃金故事線,百分之八九十都能套進去。因此適用面特別廣,我們經常使用這條故事線來講民生問題,特別在脫貧攻堅的專題中用的較多。那么就圍繞脫貧攻堅專題來講一下怎么鋪開這條故事線。


          以茶農的故事作為切入點,我們發現實際的場景是這樣的。A地的茶葉產業鏈較完整 ,B地是A地的幫扶對象,但是B地的經濟民生一直不溫不火的狀態。從大數據的角度,通過監控B地產業鏈的指標不難發現其實是有文章可以做的,簡單來論述下主要是以下四塊內容。


          發現現象:B地移植了A地的茶葉產業做法,本以為能大力提升B地經濟 ,但是從B地的GDP、產業增加值、人均可支配收入并沒得到明顯持久性提升。

          提煉問題:通過監控B地的茶葉市場調研數據,不難發現B地的市場和A地的高度重合。B地的經濟不溫不火應該是做法全盤照抄A地,并未形成自身特色,在市場上未拉開差距,一直以低廉利潤來維持銷量,產生不了其他高額的產品附加值。

          問題分析:通過分析B地的茶葉市場調研數據,發現在其他緯度上B地的茶葉產業市場并沒有拓展。比如A地深耕多年在銷售渠道上,建立了產業全國銷售網,從數據上分析上表示祖國東南板塊基本被A地壟斷,但是其他板塊并沒有全部滲透,B地是否可以向那些板塊進軍。諸如此類的問題都可以從數據層面分析出來。

          解決問題:當核心問題被提出分析后,得到一些改良意見。那么未來的產業運轉以這些意見為參考,建立起合適的監控指標,用來佐證這些改良意見是否具有成效。



          這條故事性適用性廣,挺多問題都能放進去。但是需要明確一件事,每一步的對應指標需要有代表性,不然說明不了問題,還有上面的故事線是如何鋪開的僅僅作為解釋。


          二、宏觀-中觀-微觀

          宏觀-中觀-微觀這條故事線,是我在做經濟項目的過程之中挖掘出來的。當時在做項目的時候主要還是從宏觀和微觀兩個角度去論述,通過化繁為簡、以小見大來表達我們的想法。最后通過總結整理后,發現加上一個中觀緯度會更加順暢和飽滿。這條故事線適用于不同領域至上而下的政策傳導和政府關懷的信息串聯。


          就拿這個經濟項目為例子講一下這條線怎么鋪開。當時拿到的需求是客戶想通過數據看下十三五規劃后一個變化,怎么去響應中央的號召,怎么通過解讀工作將政策和人民群眾建立起橋梁,怎么將人民群眾落到實處。其實這就是一個從宏觀到微觀過程,換句話說就是方向-工作-成果。通過歸類提煉信息點,我們不難發現可以將信息分成三塊內容。


          宏觀:中央經濟會議的主基調、國家層面的重大項目、國家統計局頒布的監測重點指標;

          中觀:省委或者地方上是怎么解讀政策的,并且針對自身特點增添了什么內容;

          微觀:人民群眾的生活變化——物價的監控指標、人均收入的監控指標、生活質量的監控指標;



          分清楚這些后就用設計語言一步一步的表述下去,形成從上到下的一整套解釋。順便提一嘴,需要在橫向上做上數據比對分析。這樣縱向有業務,橫向有數據,整條線才算飽滿。


          三、基礎-工具-落地-成果

          基礎-工具-落地-成果這條故事線,是我同事在和警察叔叔斗智斗勇好幾個月后積累出來的,經過我們不斷實踐總結出這條故事線。這條故事線是從大量的業務邏輯中提取的,環節和環節之間并不是完全獨立,是互補互存的,描述的過程中需要4個環節同時存在才能為最后形成的結論產生背書。這條故事線適用于描述自有業務的從無到有的演變過程,體現自身在對應領域的耕耘。


          那么就拿我同事這段不堪回首的往事來解釋這條故事線是怎么鋪開的(dog臉~)。當時的需求是這樣的,我們的客戶即警察叔叔需要向外界介紹他們工作成果(向保護我們安全的警察叔叔致以最高的敬意!)。我們抽調了很多相關的歷史重大事件的破案歷程來詮釋警察叔叔的辛苦,但是警察叔叔們均不滿意。他們認為還是太片面了,并沒有將大局講清楚。反復和客戶溝通最終確認了業務,因此有了這條故事線的雛形。簡單來論述下主要是以下四塊內容。


          基礎:公安存檔的犯罪記錄庫與人臉識別前端設備相結合產生大量的預警,在庫內形成預警日志;

          工具:簡單來說同一類犯罪,比如賭博經常出現在某個片區,通過建立模型可以知道大致動向。那么不同的規則不同的對象可以建立不同的模型,即犯罪模型就是工具;

          落地:把模型推廣用出去,使用模型進行分析。比如多位賭博人員被捕捉到經常出現在大屏上某個特定的片區,多地協調開始偵辦該犯罪活動。

          成果:將繳獲贓款、犯罪人員、案件細節反補入基礎庫中,形成業務上的閉環。



          這條故事線需要將自身想表達的業務嵌入這四個環節之中,并且從頭至尾必須同時存在,缺少哪個環節最終的閉環無法形成。多地業務反饋,形成良好的閉環是優勢互補、避免資源浪費的最好體現。


          四、核心-緯度1/緯度2/...緯度N

          核心-緯度1/緯度2/...緯度N這條故事線,是在做西湖項目的時候發現的。主要的做法就是以一個核心為內容,分不同的緯度去詮釋這個核心的價值。在表達方式算是總-分的概念,可能最后在從分的地方再繞回來。相比其他的故事線,這比較“面”。將一個大問題分割成幾個小問題,一塊一塊去介紹。這條故事線適用于核心內容比較寬泛,涉及業務領域較多的主體單位。


          簡單介紹下這個項目用來解釋這條故事線是在怎么鋪開的。西湖的項目是一個大結合體,是西湖管委會關于自身治理的一個成果展示。由于管轄的區域中存在較多不同領域的內容,故此采用這種方式論述。主要是以下五塊內容。


          核心:西湖景區主要是旅游產業,對應的核心是景區游玩人數(即公園年卡辦理數、收費景點入園人數)。那么圍繞這個核心就有挺多緯度是可以影響的,最后確定下來的是五個緯度。

          緯度1:治景。監控實施客流,以及分景點監控其客流量和停車服務,實現動態分析擁擠程度;

          緯度2:治業。監控與西湖相關的產業和企業的狀態值,掌握周邊合作企業的發展狀態;

          緯度3:治安。轄區內以網格為單位,監控網格內治安事件的狀態,比如綜合治理、市場監管等事件的發生數;

          緯度4:治水。西湖大面積是水,因此監控西湖的水質水量也是重要的一環;

          緯度5:治山。監控西湖的山體內基礎資源的布設,是便民利民的體現,也是管理成果之一;



          形象的解釋就是核心是塊大餅,不同的緯度就是去分這塊大餅。最終的目的是讓受眾更好的了解故事,因此分大餅的時候請不要過于深入展開某個緯度,各個緯度偏向均衡介紹。避免過于陷入某個緯度導致宏觀核心不可觀。


          五、起初-然后-接著-最終

          起初-然后-接著-最終這條故事線是按照用戶行為沉淀出來的,一般人在介紹自己經歷的事情的往往也是用這樣的格式。其實這個故事線我們也是偶爾在需要點題的內容上做分析詮釋,拿出來講只是想多個內容多個探討的資源。這條故事線適用于具體案例一步一步按照節奏講述的場景。


          那我們拿一個用戶滿意度的流程來解釋這條故事線是在怎么鋪開的。這個用戶滿意度的項目是分析市民來窗口辦理業務的效率以及情緒,從宏觀層面統計轄區內所有網點窗口的業務辦理效率。需要我們將市民來窗口辦理業務的整個流程清楚細致的剖析,通過對業務流程的觀察,我們利用這條故事線大致分了以下四步。


          起初:排隊取號階段。分析目前所有網點窗口排隊取號的擁擠程度(取號量和等待人數)

          然后:業務辦理階段。分析目前所有網點窗口業務辦理的速度效率(辦結量、過號量、辦理時長)

          接著:現場評價階段。分析目前所有網點窗口現場及時反饋的情況(數量、滿意率、網點排名)

          最終:回訪評價階段。分析目前所有網點窗口業務辦理的質量(是否最多跑一次、回訪評價)



          按照節奏講述具體案例有個需要明確的是,信息的接收方會隨著介紹陷入具體的場景,這時候當講完后繞回來輔以幾個總結性指標來概括整個場景,會更加適合信息傳達。


          總結

          以上五條故事線均是從表達中抽離出來的,它和視覺手法等都是為信息傳達服務的,目標都是為了受眾更好的接受信息。故事線本身是抽象的,需要多使用在業務上才會熟悉。上述講述的這五條,其實大家細心點會發現并不是完全獨立,存在換套說辭就可以融在一起的情況。我們自己在使用的過程中也是多條一起講問題,衡量的標準就是把故事講清楚。


          文章來源:tob.design        作者:王亮亮同學


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          政務可視化設計經驗——思考方式

          周周

          引子

          說起大數據這個領域,可是近些年相當炙手可熱的產業,而伴隨這個產業提供了很多就業機會。黨和國家大力推進政府數字化轉型,我們也受益于這波浪潮并在其中得到了成長。我們主要是作為第三方企業幫助政府推動數字化轉型,在這個過程中承擔數據可視化設計的環節。大數據時代下,黨政機關的數據量也是龐大且復雜的,我們的用戶也需要新的技術去面對日常工作,對于設計而言是一個頗有挑戰的課題。

           

          寫本系列的初衷是想把工作過程中的一定之規總結沉淀下來,坦誠的講我們也是站在前人的肩膀向前。比如我們的后臺數字化解決辦法中融合了螞蟻金服AntDesign的精神和阿里云對于體驗的標準化反饋機制,并且針對自身業務在某些緯度上做了傾向性的調整和變化。

           

          在此多說一句,我們很榮幸站在這個時代的浪潮上去觀賞中國崛起的史詩畫卷,但是我們也時刻保持著冷靜和客觀。我們很欽佩那些將比較成熟的東西標準化,拉高整個行業的體驗基準線的團隊。標準化一定是一件需要全行業一起推動的事情,在此獻上我們的一些總結和思考。

           

          前言

          與傳統的數據可視化設計體系相比較,由于我們的用戶是黨政機關、事業單位,因此更有傾向性的選擇和探索。長時間的觀察用戶,發現外界普遍存在夸大事實的宣傳和固執己見的成見。對于LOGO又大又紅的需求,其實有絕大多數是溝通存在了障礙。

           

          在我們為用戶服務過程中,存在經常加班和反復改稿的現象,在一定程度上造成資源浪費。作為B端的設計師,冷靜的復盤項目過程,排除其中的主觀因素,客觀的分析現象。認為問題可能是很多同事無論在業務理解和前期規劃都有一定的障礙和不適之處,不能和用戶達成目標的一致性。發生這樣的問題是因為組內大部分設計師C端的思維并未完全過渡到B端,在工作中沒有凝煉自己的方法論。故此,寫本系列是奔著將我們過去總結的方法論給到新人設計師,為了更好的融入工作,減少試錯成本。

           

          一、明確用戶的痛點-用戶想要關注的內容

          要搞清楚這個問題,首先我們需要解釋下什么是數據可視化。

           

          什么是數據可視化?

          數據可視化主要旨在借助于圖形化手段,清晰有效地傳達與溝通信息。但是別輕易認為是簡單的將數據轉換成圖表,而是以數據為視角,看待世界。換句話講就是用一些方式方法將以數據為內容的信息直觀清晰的展現在用戶面前,幫助用戶了解真實的世界,明白數據背后隱含的變化規律。

           

          那么問題來了,用戶需要看的是什么?

           

          舉個例子:有的時候我們給黨政機關做可視化大屏的時候,用戶在宏觀角度下并沒有明確表達需要展現的內容,往往這個過程中我們需要挖掘用戶的心態。一千個人眼中有一千個哈姆雷特,每位來視察的領導對于看到的內容都有不一樣的詮釋。通過經驗判斷,有些常用的內容是有價值的,比如GDP增速、一產二產三產的產業增加值等。這邊我不是說讓大家都去碼這些指標,這種拿來主義我們從來不倡導。我們是想讓大家明白,用以上的指標是因為這些內容是地方官員工作成果和工作成績的體現,這些指標是通過大量計算的一個結果值,是反應政績的一種量化指標。以往匯報的時候,講訴的時間并不長,因此要抓住機會講結果。

           

           

          因此,用戶關注的不是數據項,數據項是過程的產物,真正的關注點是最終處理后的信息。

           

          知道用戶關注哪些內容后,就冒出一個問題,讓用戶怎么看!簡而言之,你怎么去碼這些關注的內容。在政務系統長期的建設下,我們對用戶的數據有多龐大是有所了解。哪怕歸集數據的主體是一個小的部門,定義其工作性質的就有幾百個指標。你需要理解用戶是長期在哪種環境下的,收到的信息是以什么樣的方式傳遞的。

           

          舉個例子:你注意下我們這篇文章的主次關系,有沒有發現是按照大標題-標題-中標題-小標題-正文的方式敘述的。有空看下政府的紅頭文件或者當地的報刊雜志,都是按照規范的行文方式傳遞信息的。那么用戶長期在這樣的環境,就會依賴這種方式去接受信息。

           

           

          當你發現一個頁面承載過多信息,建議先將信息分類梳理,逐步細化。

          將信息結構化,用寫文章寫書那樣的方式將信息傳達,建議使用總-分或者總-分-總的方式。當你這樣還不能梳理清楚,可以借鑒扉頁-目錄-章節等方式去表達。

           

          二、歸類提煉故事化-有組織有節奏的表達內容

          有的時候,緣分就是那么巧妙。我們的自我要求和用戶的訴求趨于同步,一個故事講的好不好直接關系著一群人的工作成果。這里的故事化換句話說,就是框架。正所謂大道至簡,信息傳播最牛逼的就是把一個特別復雜的內容用最樸素近人的語言總結,比如獨立之精神,自由之思想。

           

          (一)歸類提煉信息點

          我們以一個案例來剖析如何有組織有節奏的表達內容,以下是有關于經濟的內容,僅供參考。

           

          首先,先拆解經濟的信息點,信息本身是有層級有關系的。單獨存在的信息點沒有比較,是無法從側面反應客觀規律的。為了我們盡量少的產生紕漏,先開始逐層拆分。我們明確信息點有哪些,根據上一節的內容,我們獲知信息點取決于用戶需求,而傳播信息點又受傳播媒介影響,即表達目的。總結而言,就是用戶想看什么和你想讓用戶看什么?這個地方需要仔細想想,不然起步就錯了。

           

          在經濟大屏中領導一般關心的是工作成果和工作成績。

           

           

          當確定這兩個內容的時候我們繼續細化拆分信息點。當前這兩大類是很籠統,不具備結論性。我們需要繼續拆分信息點,直到可以對這兩大類提供結論。此時我們的慣用方法就是用宏觀-微觀作為拆分依據,如下:

           

           

          (二)梳理串聯故事化

          故事化的作用就是將信息點有組織有節奏的表達出來,零散的信息點毫無意義的。換句話說就是用框架的形式清晰完整的表達內容。好的故事是有主有次,主能概括、次能點題。

           

          主要故事線:用戶接受度高,能夠概括整個屏幕的內容,快速了解頁面概況或者特別關注的重要信息。

          次要故事線:對主要故事線起到解釋補充的作用,能夠全面闡述頁面信息或者點題的作用。

           

          那么這邊就清楚了,主要故事線就是宏觀內容,次要故事線就是微觀內容。解釋下,次要并不是說不重要。像這邊的微觀內容代表的就是地方上的信息,需要存在但不是全面展開,它是宏觀的基礎土壤,往往我們在介紹的時候是用來點題,以小見大的。

           

           

          (三)關聯綁定數據

          最早我們就說用戶關注的不是數據項,數據項是過程的產物,真正的關注點是最終處理后的信息。我們訴求的信息點是從用戶想看什么和你想讓用戶看什么中挖掘出來的,需要有數據背書。即數據關聯信息點。

           

           

          總結

          1.明確用戶關心的內容是重中之重,它決定起調的方向。有的時候陷入項目之中,往往是關注項目細節忽略了大局觀,所以經常低頭做事也需要抬起頭看看路。

          2.按照用戶習慣的方式去梳理信息點,減小使用成本。用戶長時間沉浸在有條理有層次的環境中,因此灌輸信息的方式也要依循這個節奏。

          3.歸類提煉信息點,用故事去串聯信息,用數據背書信息。有條有理的去表達我們的想法,能夠讓人更好的接受并且理解。


          文章來源:tob.design        作者:王亮亮同學


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          從品牌到UI-用設計的思想與這個世界和解

          周周

          今天分享的題目是從品牌到UI,用設計的思想與這個世界和解;這里的我說的和解比較寬泛,大家可以理解成與客戶和解,也可與產品經理和解,也可以是與自己和解;

          為什么選這個主題呢,原因是之前在網上聽一群人總是說互聯網走到了下半場,我和好奇,就去查這個下半場到底是什么,后來總算知道了,互聯網行業走到現在,已經從增量時代轉為存量時代,這個存量時代就是下半場,人口、流量、資本的紅利都逐漸收緊。

          在這種情況下我的產品如何從同類產品中脫穎而出,或許增加品牌屬性是種方法,希望大家在聽完這個分享后,會有一些啟發。

          在互聯網的增量時代,品牌設計與UI設計是兩條平行線,幾乎沒有交集,你做你的畫冊、slogan、包裝,我做我的網站、app、微信小程序,偶爾互相模仿,但也不是主流,畢竟兩者載體不同,目的不同,用戶也不同;

          但是到了存量時代,影響用戶選擇的一個重要因素是「品牌」,一個產品要想從同類產品中區別出來,需要有個性,UI+品牌成為產品生命周期中重要的一環,下面我們看看如何在用戶心中植入產品品牌; 

           

           

          在在品牌植入方便,國外很多產品已經走在了我們前面,我們來看看谷歌,谷歌開發者大會上對 Material( Design做了更新,我印象特別深刻的是Google對圖形語言單獨拿出來做一個模塊解釋它,它提取了圓形作為視覺DNA,并沿用到產品的每一個控件;


          當然,如果我們想傳達我們產品的品牌理念,只在圖標組件里運用是遠遠不夠的。

          誕生于1886年的可口可樂,每年都做產品運營推廣,不斷大量的重復它logo的弧線元素和瓶子的外形;

          還有剛剛過去的雙11,從2012年11月11日開始的天貓節,現在是全球最大的B2C平臺,天貓貓頭運用也是滲透到全產品線里面去了,問大家個問題,大家有沒有人知道這個貓頭品牌是誰創立的?其實就是馬云的繼任者,現任阿里巴巴集團董事局主席張勇;講的有點遠了,我們再回到我們的主題;

          這個圖很好的解釋了品牌與產品與用戶的關系,產品需要品牌牽引、支撐,現在互聯網產品越來越趨于同質化,UI 設計師已經不能局限于界面的表現層,更要了解產品背后的邏輯,然后以業務為依據設計品牌,以品牌為基準去設計產品。

            

          第一章意義Significance,這個章節我們講講從品牌到UI的意義


           

          第一個意義是對內:可以規范統一,協作

          品牌本身就可以作為設計規范的一個重要指導原則,通過對配色、文字、圖標、控件等建立設計規范,可以有效減少設計決策時間,傳達一致的品牌調性。

           

           

           

          第二個意義是對外:可以提高認知,溢價增值

          如果一個產品失去了個性,不看 logo,單純看界面的話,很多時候根本分不清是到底是哪一家公司的產品。如果能夠關注設計細節對品牌的影響,肯定能更好地提高用戶對產品的認知,當你對一件產品注入了感情,同時也就為產品提供了營銷推廣的立足點;也可以這么說,設計師創造的情感性價值,直接實現了產品的溢價增值;

          第二章感知Perception


          有位設計界的前輩講過,品牌知名度其實就是信任度的體現,他說世界上最成功的品牌就是宗教,這里沒有詆毀任何宗教的意思,但是宗教建立的品牌信任度,遠遠超過了任何商品;

          這里我們從用戶的角度出發,看下用戶是如何從產品感知品牌的;

          在設計產品的時候常常會發現我們覺得理所當然的地方,用戶往往沒按我們想的方式去使用。那是因為設計師通常有整體觀,站在金字塔頂端去規劃一個產品的設計,而用戶則恰恰相反,在金字塔底端往上爬,他們不知道這個金字塔多高,也不知道從哪一面開始最好爬,所以會遇到各種問題。

          同樣,用戶對品牌的感知由低向高的,用戶通過各種場景接觸到產品,再通過產品的視覺呈現、功能體驗、信息內容等感知品牌,最后在心中形成印象,構建品牌信念,從而影響下次產生相應需求時對產品的選擇;

          可以聯想下我們的購物體驗,是不是總是從同一個地方shopping,這就是購物APP品牌價值已經使你已經形成了習慣選擇;

          作為設計師,我們需要充分理解品牌內核,由內向外將抽象的品牌內核轉化為具象的視覺符號,再延伸到用戶與產品的各個接觸點,從而將品牌理念植入用戶內心。

          第三章融合Integration既然上面我們講品牌和UI最終要走的一起,這一章我們講他們如何在工作融合

           第一步,明確定位,提取關鍵詞,建立情緒板

          當代廣告教皇,美國奧美廣告創始人大衛.奧格威說,“最重要的決定是如何定位你的產品?!?/span>

          在大師的指引下,我們發現首先找到品牌定位,定位自己的細分市場和目標用戶;

          2.圍繞品牌定位提取關鍵詞;

          3.建立情緒版,將抽象的概念轉化為可感知的視覺;

          第二步,提取視覺表現元素,并設計融入品牌定位。我們重點從顏色、圖形、紋理、字體四個方面講一下。

          有時甚至不需要任何圖形,單憑顏色就能產生對某一事物的聯想。


          現在UI設計流行的極簡風,我們發現這些應用采用極簡化設計的同時,圖標也變得更鮮艷,更引人注目,說明這些產品也在尋求一個平衡,在 UI 設計變得極簡趨同的同時,仍然能保留核心的品牌基因。


          顏色在 UI 中的表現有 logo、導航欄底色、圖標、文字、可視化圖表、插圖、按鈕等等。 

          現在UI設計流行的極簡風,我們發現這些應用采用極簡化設計的同時,圖標也變得更鮮艷,更引人注目,說明這些產品也在尋求一個平衡,在 UI 設計變得極簡趨同的同時,仍然能保留核心的品牌基因。 

          圖形

          我們知道顏色是抽象感知,圖形是相對具象的表現方式。

          一旦某個特有的圖形在用戶心中形成烙印,用戶見到相似的圖形組合都能往該圖形聯想,從而關系到圖形背后所代表的品牌,這也是很多企業做品牌升級的時候 logo 都越來越簡潔的原因,因為這樣能有效降低用戶的認知負擔,提高品牌認知。


          圖形通常從 logo 本身提取,并在 UI 中延伸應用。比如馬蜂窩、百度網盤、京東做品牌升級的時候都不約而同地從 logo 中提取了一個代表微笑的弧度,傳遞友好、溫暖的品牌形象。

           

          飛豬提取了 logo 中「豬的發型」用于搜索框,韓國的電商品牌11街也將 logo 延長作為界面中的搜索框。

          紋理

          在 UI 設計或者運營推廣運用中,通過提取品牌圖形元素,再運用分形、排列、重復、平鋪等設計手法形成品牌紋理。

          我們看看京東的啟動頁用 Joy 的外形旋轉做成的紋理背景;

          國外著名的聊天應用 Whatsapp,在聊天頁的背景用涂鴉插圖紋理做背景;

          還有騰訊文檔的啟動頁、登錄頁用了漸變的菱形作為紋理,輔助品牌的視覺表現。

          我們還在聊圖形復制變形的時候,國外的UI設計已經細化到了十分驚人的程度

          例如UBER 在做的品牌升級,設計師出來將每個國家富有代表性的圖形提煉, 然后重復運?平鋪,形成帶有地域特色的?何紋理,運?到閃屏和線上線下的產品當中。

           


           

          字體

          字體是最容易被忽視的設計元素,很多人會認為 UI 中的字體用系統默認的就行。其實字體對于產品氣質的體現著很大的作用,很多品牌都把字體設計當成品牌基因中重要一部分。

          字體的選擇需要契合產品功能特點與品牌調性。

           

          微信讀書使用了方正宋三,讓人閱讀起來有種文字秀麗的浸入感;每日故宮使用了方正清刻悅宋體,字里行間隱含著歷史古韻,滲透著文化氣息;澎湃新聞使用方正準雅宋體,體現其作為新聞產品「專注時政與思想」的嚴肅一面。


          英文字體也可以使用契合產品氣質的英文字體。比如常被用作數字字體的 Din、經典的襯線字體 Playfair Display、?歌御用的 Roboto 等。

           

          第三步,融入品牌觸點

          這里我解釋下品牌觸點這概念,是指一款產品中品牌信息接觸點,是決定用戶對產品品牌印象的關鍵;

          我們看幾個案例,

          啟動頁:知乎的啟動頁采用 slogan 加 logo 的方式來體現品牌,這也是絕大多數應用的做法;每日故宮啟動的時候伴隨著一聲鐘聲,頁面會有一個光線流動的動畫,極具儀式感,一下子就把用戶帶入故宮莊嚴的氛圍當中。

          圖標:東家的每一個圖標都融入了印刷式字體的元素,體現其匠人的品牌基因;mono 則直接把產品名稱「 M O N O」用于導航欄。

          插圖:Dropbox 的兒童風格的插畫與 B站 的二次元插畫都非常契合品牌特征。

           

          品牌觸點式多樣的,除了上面的啟動頁、圖標、插圖之外,還有預加載圖、loading、動效、新手引導等等都能體現品牌觸點,這些品牌觸點,都是講述品牌故事的關鍵載體,幫助產品從同行業中脫穎而出,這里由于時間的關系我們就不展開講了,有興趣的同學,我們可以單獨交流哦

           

          互聯網行業已經過了拓荒時代,行業沉淀下了許多有價值的知識,也有許多非常好的 UI 組件和規范文檔可以直接使用;

          另一方面,很多公司對于 UI 設計在整個產品生命周期中的價值,普遍覺得不是非常重要,UI 設計部門只是一個業務支持部門,起不到主導作用。而如果 UI 設計師做的工作還是停留在把產品的原型文檔變漂亮,肯定是不行了。

          設計師不僅需要對產品業務和商業有深入了解,更重要的是對于品牌在整個產品鏈路中的應用與把控。

          我們需要走出舒適圈,主動去挖掘更深層次的設計價值,提升自我價值。


           

          誠然改變一個大的設計生存環境是非常漫長的過程。要不停的嘗試,就像不停的迭代做新產品一樣,不能因為一兩次的失敗打消掉設計的積極性。

          設計的終極最后就是和解 Compromise

           

           

           

          開篇我提到了與世界和解,分享下我是怎么和這個世界和解的,我相信三句話,可以跟這個世界和解 

          再次謝謝大家聽我叨叨,如果大家喜歡,下次我們可以叨叨點關于設計的更有意思的事,謝謝



          文章來源:tob.design        作者:無名大師29aef85c40


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          選擇類控件設計解析

          周周

          無論是從個性化內容還是用戶體驗上來說,為界面內容選擇正確的選擇類控件可能比想象的要難,全文10,856字 ,預計閱讀20分鐘, 建議收藏。

           

          本文主要研究選擇控件的設計細節,雖然是很常見的控件設計,但也有非常多需要注意的地方。能提煉總結常見事物的一般規律,這本身就是對自己已有知識理解加深的過程。

           

          對數據進行便捷選擇

           

          單選框(Radio button,也叫“單選按鈕”)—— 用戶從一組選項中必須選擇一個選項。

          復選框(Checkbox)—— 當有一個或多個獨立選項時,用戶可以選擇任意數量的選項,包括零個、一個或多個。

          切換開關(Toggle Switches)—— 兩個互斥狀態(打開和關閉)之間的可視切換。

          選擇標簽(Choice chips)—— 是按鈕選擇的一個替代方案。至少兩個選項,用戶可以選擇一個或多個。

          列表選擇(List Select)——可以單擊容器框中隨附的項目,以從列表中選擇一個或多個。

          下拉菜單(drop-down menu,也叫“下拉按鈕)——按鈕包括一個單箭頭指示符,單擊后會顯示包含選項列表的菜單。

           

          單選按鈕的命名(Radio)來源于舊收音機上用于頻率和預設電臺之間切換的的實際物理按鈕。當一個按鈕被按下時,所有其他的按鈕都會彈出,使被按下的按鈕成為唯一處于“按下”狀態的按鈕。

          后來被用于錄音機,盒式錄音機和可穿戴音頻播放器中,90年代初-用于“播放/暫停/快退/快進”控件。

          UI概念是由Xerox PARC的研究首次引入的,Xerox PARC是一家研發公司,幾乎涉及到我們現在每天使用的計算機技術,包括:以太網,圖形用戶界面(GUI),面向對象的編程,計算機鼠標,激光打印等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設備。

           

           

          1.1 單選框

          單選框用于對信息的選擇,允許用戶從一組選項中必須選擇一個,通常以2-5組顯示,單選框應互斥。單選框的外觀一般是一個空白的圓洞,旁邊則通常有文字標簽。標簽的用途除了描述之外,還可以作為操作區域,當用戶選中標簽,所應的單選框就會被選上。已選上的單選按鈕一般會在圓洞內加上一小圓點。單選框僅顯示合理和正確的選項。

           

          單選按鈕的狀態為打開(實心圓圈)或關閉(空圓圈)。

           

          單選框一旦選上,除了選擇另一個選項之外,便沒法取消。所以有時會有空白的選擇、重置或默認選擇。

          每個單選按鈕的標題應清楚地描述選擇它的效果,通常句子結束沒有標點符號。此外,考慮使用下拉菜單,會比顯示所有選項占用更少空間。

           

          1.2 復選框

          復選框是一種按鈕類型,可用于打開或關閉選項。當存在選項對象時,復選框允許用戶從一組對象中選擇一個或同時選中多個和全部項目。每個復選框都是單獨的個體,因此選中一個復選框不會影響其他復選框的取消選中狀態,全選除外。

           

          復選框使操作在兩個相反的狀態,操作或無操作之間進行選擇。復選框在屏幕上顯示為一個小方框,選中時,它被認為是“開”,選中的復選框包含復選標記,正方形將充滿復選標記。;關閉時,則被認為是“關”,它是空的矩形框。復選框一般放置在可選信息左側(圖片、視頻以宮格形式表現的頁面除外)。

           

          復選框的數量

          復選框可以用作單個元素,也可以組合成一個列表或嵌套式的層級列表以從中選擇多個。如果需要將選擇項分成幾組,則使用多級復選框。

           

          混合狀態,僅在多級復選框時出現。如果使用復選框組,全局啟用和禁用多個子復選框,當這些子項并非都處于同一狀態時,父復選框應顯示為混合狀態(用短劃線表示)?;旌蠣顟B常在嵌套層級等對多個對象一同操作時使用,以代表該選項下的子選項沒有被全選。當半選的復選框被點擊時,它便會變成平常的復選框,而它的子選項亦會跟隨全選或取消全選。

          如果存在多個復選框時,考慮使用分組標簽來進行描述。并將標簽的基線與組中的第一個復選框對齊。通常,當復選框垂直列出時,更容易區分它們的狀態。通常,復選框應左對齊,當您需要表示層次結構,例如當父復選框的狀態控制子復選框的狀態時,請使用縮進格式。

           

          1.3 切換開關

          開關是兩個互斥狀態(打開和關閉)之間的可視切換??傆幸粋€默認使用,撥動開關即立即生效。它是在打開時顏色是可見的,關閉時出現無色或灰色。

           

          移動端中切換開關一般有交互動效,PC端沒有。

           

          開關與其他選擇控件最大的區別是:開關操作后,程序立即執行相關操作。而其他選擇控件一般用在表單里,僅反映當前的選擇狀態,如果要執行操作并生效,需要點擊額外的提交按鈕。

           

          注意:

          不要為切換開關創建層次結構,避免使用開關控制單個細節或次要設置。開關的層級結構這在視覺上更容易分散注意力,而且會造成一種錯誤的印象,即所有的子選項都是開著/關著的。所以禁止濫用開關按鈕。

          開關具有比復選框更明顯的視覺效果,因此它控制的功能應比復選框更為強大。如,可以使用開關打開或關閉一組復選框設置。因此它控制的功能應比復選框更為強大。如,可以使用開關打開或關閉一組復選框設置。

           

          注意加載狀態

          如果開關所執行的操作需要考慮加載狀態,例如開關切換狀態不是瞬間(短時間)完成的話,開關則需要顯示加載狀態。

           

          另外一種目前比較流行的加載方式是視覺上加載成功,服務器隨后加載成功。用戶操作開關之后,開關視覺上立即響應改變,然后再向服務器相應改變,中間會存在一定的時間差,這樣能帶給用戶更流暢的體驗。

           

          避免在開關內添加說明標簽。關于開關的打開或關閉,可以通過視覺樣式讓用戶很明確的感知。額外的提供文本標簽描述開關狀態是多余的,還會使界面混亂不堪。

           

          其它樣式

          單一的 icon 通過顏色或圖形的變化來表示開或關的狀態。常見的且體驗比較好的設計方案是將開關樣式設計為當前狀態樣式。如下圖相機界面內HDR與AI功能的關閉與開啟狀態。

           

          當然也有其它情況。最典型的就是視頻的播放暫停開關,他們表示的就是操作后的狀態而不是當前狀態。

           

          名稱變化,名稱變化指的是開關按鈕依賴于其名稱的變化告知用戶開關的當前狀態和操作,如:關注與取消關注,已關注與已取關。名稱變化的開關由于語言的模糊性,仍然造成了部分歧義。我們可以在操作后加入其它提示來消除歧義(如:toast 提示)。

          是否統一操作狀態倒不是關鍵,關鍵是我們是否能夠讓用戶理解按鈕相應的意圖,不做出混亂的選擇便可。

           

           

          1.4 選擇標簽

          Tab標簽

          通常用于切換不同的視圖,或者在表單中作為單選組件使用。一個分段tab通常會由2-6個單選項,可以是圖標和短詞,它適合導航形式,被設計成一個水平或豎直的容器進行單選。一組選項卡中的所有內容應該根據較大的分組原則進行分組,每個選項卡的內容與其他選項卡的內容都互相獨立。

           

          可以包含下拉列表的選項和使用翻頁。

           

          固定的選項卡應該只包含有限數量的選項,并且保持選項的位置不變,有利于用戶記憶。可滾動選項卡用于有很多選項或選項數量可變的情況,但不推薦使用。

           

          優點:將所有選項都擺在一行或一列,對空間的利用率能達到最佳,設計樣式也可以做到非常直觀,漂亮。

          缺點:不大適合處理長詞,短語,如果要將這些內容放在選項中,就須精簡文本。水平空間非常有限,尤其是移動端,即使是少量的選項,有時候你仍然要精簡文本。

           

          Tab選擇時,不要加載整個頁面,只有選項標簽及其內容區域應更改。交替切換標簽時,用戶應該感覺自己在同一位置。不要在選項卡內容中包含支持滑動手勢的內容,因為滑動手勢是用于在選項之間導航的。例如,避免在選項卡中包含一個可以拖動的地圖,或者一個可以滑動刪除的列表。

           

          當功能不可用時,顯示空狀態,加入情感化提示,不要刪除選項卡,確保所有選項卡都啟用。

           

          空狀態:是用戶在使用產品時某個界面無法顯示的時刻,即沒有其他元素。良好的空狀態可以讓用戶知道正在發生的情況,發生的原因以及該怎么做。

          這是四種常見的空狀態類型:

          • 首次使用——新產品沒有內容可以顯示時,例如打開新注冊的印象筆記時會遇到這種情況。

          • 內容被清除——當用戶完成類似清空消息或收件箱等操作后,會出現一個空白的屏幕。

          • 出現錯誤——產品由于網絡問題造成離線時,會出現空狀態的使用。

          • 無結果——如果用戶進行搜索,但是查詢內容為空時會發生這種情況。

           

          明確選中狀態

          具有3個選擇項的Tab標簽,我們能明顯區分選中和未選中狀態,應為Tab標簽是單選控件。但是,如果只有兩個選項,又是矩形按鈕的選擇項,則很難區分當前選擇是哪個,哪個為選中狀態?我自己某段時間一直默認顏色填充形按鈕是選中狀態,但經同事一提,一陣猛驚,那另一個是否為選中狀態?在兩個選項中存在選擇疑惑,我們如何確定狀態呢?

           

          因此,我努力在統一風格的提前下,找出固有的特征,增強選中狀態。這個大家如果有更好想法,歡迎留言。

           

          多選標簽

          標簽選擇通常用于要從3-10個選項中進行多次選擇操作情況,它們最適合用一到兩個簡短的單詞或數字。它們設計的形式一般是一個個按鈕,通過背景色來區分“選中”和“未選中”。由于不存在2個選項的情況,所以

          面對多選標簽時,面對多個選擇項的彼此堆疊,需讓讓用戶知道他們可以選擇多少個選項。添加輔助說明,既可以明確它是多選,又可以規范的最大選擇項;選項過多時進行標簽分類。

          優點:節省空間,標簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的,有趣的。

          缺點:這種形式與tab選項形式有一樣的弊端,都不能很好的處理長詞。不建議對文本進行折行或者調整大小,會不方便用戶閱讀,同時使用兩行以上的標簽會使得每個標簽非常難以快速掃描。

           

          其他樣式:用圓形或其他形狀來表示一個個標簽選項,比較重要或更受歡迎的選項形狀更大,用戶選中多個圓形就是選擇了多個選項;也可以在常見的按鈕中加入圖片的元素,這種的話樣式新穎,但要注意選中時的文字圖片的對比,文字是否具有可見性,適當加上文字選中效果。

           

          Tab標簽和多選標簽

          選項數量是tab控件和標簽控件之間最大的區別。一個連續的背景幫助用戶理解他們必須要選擇一個,而一個分離的背景表明他們可以選擇多個。

           

          1.5 列表選擇

          列表選擇控件包含選擇按鈕,容器框,項目列表和標簽。用戶可以單擊容器框中隨附的項目,以從列表中選擇一個或多個。列表框可能會滾動,具體取決于它包含的項目數和可見區域,更復雜的列表框允許用戶通過將項目從一個列表框移動到另一個列表框來調整容器框的大小,重新排列項目列表以及進行選擇。

           

          優點:

          交互成本低:列表框不需要用戶單擊任何內容即可在進行選擇之前顯示其中的選項(但是,如果有太多項,它們可能需要用戶滾動列表)。

          增加了可見性:一次查看多個選項的能力可以加快決策速度并提高選擇準確性。列表選擇為內容提供了更多的空間。它們易于閱讀,可以容納多文字,文本可以換行,還可以增加圖片。但是,應避免在多列列表框中進行水平滾動。

          用多選雙列表框,用戶可以控制項目的顯示順序,并獲得所選項目的清晰概述,這在列表框包含多個選項時很有用。

           

          缺點:

          空間:他們往往很占用空間,不適合用在垂直高度受限的頁面中。

          陌生:用戶可能不知道如何立即與列表框進行交互-特別是,如果多選列表框中未包含復選框,則他們可能不知道如何選擇倍數。這就是為什么將復選框包含在多選列表框中非常重要的原因,除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。

          用戶可能無法一次看到所有選定的選項:如果在可見區域中看不到更多的可用項目,則用戶可能無法同時看到所有選定的項目。為避免此缺點,請在列表框上方將所選項目顯示為標記,或在不可滾動的列表中突出顯示所選項目。

           

          可以根據選擇類型進行分類,這些列表框形式都可以滾動。

           

          列表單選

          用戶只能從互斥選項列表中選擇一項。最初的單選按鈕被用于列表中超過6個選項時,被設計成垂直方向,圓形輪廓,并擺在列表項的開頭,這就是列表單選。現一些設計中,選中被設計成在列表選項外加一個描邊框形式或帶有背景色,用以節省水平空間。

           

          列表多選

          這種類型的列表框包括使多個選擇更加明顯的復選框,設計樣式上,web通常是在列表開頭處設計一個正方形描邊框(復選框)。

           

          多選雙列表框

          這種類型的列表框由兩個列表框組成,兩處的列表框內容可以相互拖拽。比如左側的列表框已選中項目可拖拽至右側列表框,同時支持表內上下拖拽更換順序。

           

          點擊“ 右箭頭”按鈕可將左側的列表框所選項目移動至右側列表框。多選雙列表框實際運用較少。

           

          1.6 下拉菜單

          這是是一種彈出按鈕,單擊后會顯示包含選項列表的菜單。下拉列表以最簡單的形式包含四個主要部分:一個容器框,一個朝下的箭頭按鈕,一個項目列表和一個標簽。用戶可以單擊向下箭頭以顯示互斥項的列表,從中只能選擇一項。標準下拉菜單是針對我們所理解的“下拉”這個動詞。在激活狀態,當你點擊文本輸入欄的地方時,它會打開一個菜單。列表項僅在單擊向下箭頭后出現,選擇一個項目或在下拉列表的外部單擊將其關閉。

          下拉列表的優點:

          • 為用戶提供最佳選項的功能,默認情況下處于選中狀態。

          • 淡化替代選項和更改:由于下拉列表隱藏了其他可用選項,因此它們很好地淡化了替代選項并過分強調了進行更改的能力。(這在默認值可以滿足大多數用戶的情況下,并且其他選項可能對非專業用戶來說是危險的或令人困惑的情況下是有利的。)

          • 熟悉:下拉列表是大多數用戶熟悉的選擇機制,因為下拉列表在Web和本機應用程序中得到廣泛使用。

           

          缺點是需要點擊項目列表中的選項,包括:

          • 列表包含過多的內容,可能會很麻煩地滾動。

          • 當用戶習慣于捕獲眾所周知的值時,它們會使用戶放慢速度。例如,當輸入生日或信用卡到期日期時,與下拉列表進行交互相比,在直接鍵入內容通常更快,更容易。

          • 忽視:由于表單內容非常緊湊,因此用戶可能會意外忽視表單,網頁和應用程序中的下拉列表。

          • 容易消除:不小心將光標從框中移開會關閉下拉菜單,不得不重新開始選擇過程。

           

          下拉菜單配分組

          當長型下拉菜單的設計不是特別理想時,你可以把列表分組,這樣搜索起來更加簡單。

           

          可編輯的下拉菜單

          可編輯的下拉菜單在菜單上方顯示當前選擇的菜單項,用戶可以輸入菜單中未列出的值。您可以將用戶可以輸入的值的類型限制為某些類型。例如,設計軟件中輸入字體大小時,系統會默認一些數值,同時支持你編輯修改。

           

          快捷搜索選項

          為了更方便用戶的填入,支持字詞搜尋,填寫一半時,就會出現帶有關鍵詞名稱選單。在選項很多的情況下,這個功能變得格外實用。

           

          下拉菜單多選

          下拉菜單多選是復選框的延伸:用戶可以在同一個輸入區域選擇多個。這件控件用的比較少。

           

          這種控件我一般在多個對象進行對比時才使用,如選擇多個公司比較他們的能耗水平與用電規模,由于公司字段比較長,在查看選中狀態時需注意容器能否充分顯示選擇的字段,在導航菜單中會明顯擁擠,在表單中使用相對自由。如果可以的話,篩選中盡量避開這種類型。

           

          超級下拉菜單(胖菜單)

          將站點,應用程序或系統的所有不同部分合并為一個長列表,該列表進一步細分為子類別,并可以從導航欄中訪問,例如下面華為云的下拉列表,大型下拉菜單用于顯示大量的選項,分類,數據集或其他類型的相關內容組。

           

          不符合當下標準的設計會混淆用戶的感觀

          任何偏離你所設計的平臺標準的行為都會給用戶帶來額外的認知負擔。

           

           

           

          2.1 狀態

          選擇控件在操作過程中必須更改其狀態/外觀,以便用戶知道是否能選中,是否被選中。添加這些小的視覺反饋,以使用戶正向的理解,但是差異化設計又不能喧賓奪主。

           

          默認

          默認就是選擇器的開始狀態。向用戶表明,可對該選擇控件進行操作。

          禁用

          選擇按鈕置灰顯示,用戶將無法與選項進行交互。除非產品規則指定,否則很少會遇到這種狀態。

           

          懸停

          像按鈕一樣,選擇控件應向用戶指示它們是可交互的。通常,通過突出顯示鼠標懸停項目區域的背景來突出顯示,吸引用戶的注意。觸摸設備沒有懸停狀態。

           

          按下

          當用戶按住鼠標/手指點擊,選擇控件處于被點擊的狀態。

           

          列表多選支持批量選擇和清除

          使用列表多選,一次全選或取消已選擇的多個選擇項毫不費力。

           

          下拉列表狀態

          下拉列表在按下狀態時會打開選項列表,還有種常見做法是懸停狀態時直接打開選項列表。我更喜歡第一種,第二種在我沒有明確操作的情況下,下拉列表就自動打開的這點讓我比較困惑。

           

          列表選擇狀態

          列表選擇控件在管理文件時,只有通過按下選中選項才能進行編輯性操作。

           

          點擊按鈕進入批量編輯狀態,狀態未選擇時,操作按鈕置灰。按下/勾選列表選項后,操作按鈕點亮,展示已選項的數量,即對當前勾選操作的反饋。點擊操作按鈕,進入對應操作編輯流程。

           

          失敗反饋

          一般都是用戶沒有進行選擇,單擊“提交”按鈕后收到失敗反饋。

           

          在實際的使用過程中,選擇控件有默認、禁用、懸停、按下等不同狀態,雖然這些狀態看起來很多,但是這些狀態涉及到實際交互的需求和不同場景,并且是實現可靠交互的基礎。

           

          2.2 選項

          中立的選項

          這個針對于單選框控件

           

          如果用戶不想做出選擇,那么應該提供一個中立選項。為用戶提供一個明確的方向,中立選項比錯誤選擇要好。

           

          在單選框的選擇時,要充分考慮用戶的實際情況,給出的選項要覆蓋到所有的情況。例如,要考慮到用戶不進行選擇的情況,這時需要提供一個“無”的選項;給出的選項有可能都不符合用戶的情況,如果所有的選項用戶都不會選,就需要提供一個“其它”選項。

           

          單選框所有選項應該滿足“互斥”的原則,因此選項之間要避免存在交集,選項覆蓋要全面,不能出現遺漏。例如,在一個年齡的選擇設置上,如果提供的選項為“20-30歲”和“30-40歲”,那么如果用戶剛好30歲該如何選擇?

          通常給一個默認選項

          這個針對于單選框,Tab切換,下拉列表

           

          把控制力交給用戶

          單選框最好有一個默認選項,當單選框把選項默設置為為選中時,一旦選擇了一個單選按鈕,用戶就不可撤銷,無法返回默認狀態;而默認選中一個則可以防止這類問題,一開始就向用戶傳遞信息必須要在這組單選項之中選擇一個。

           

          加速進程

          下拉菜單中默認選項優與請選擇,如果根據權限或使用頻率能定位到適用于大多數用戶的選擇項時,就不要默認為“請選擇”,而是使用默認選項,這樣做可以降低交互成本和節省用戶的時間和點擊數。

           

          如“國家”和“語言”字段。在這種情況下,根據權限IP,默認選項是合理的,絕大多數用戶也不會更改選項,因此繼續選擇就會很煩人,耽誤時間。

           

          增強“建議”

          帶有默認選項的單選按鈕組合是給用戶的強有力建議——甚至是推薦。默認選項可能會引導用戶做出最好的決定,并在接下來增加他們的信心。尤其是默認選項可以輔助用戶,并讓用戶向著產品所希望的方向傾斜。

           

          在用戶需做出復雜決定或處在不熟悉領域時特別有幫助。當標題和描述都很陌生的時候,默認選項可以引導用戶在各個可能未能理解的選項里做出最好的決定。

           

          在產品上總想說服用戶做出對產品有利的動作。默認選項就會引誘用戶去走特定的道路。常見的例子就是活動頁面,對于忍痛離開按鈕低調置灰顯示,對于留在頁面按鈕高亮顯示。

           

          當然也有許多時候是不帶默認選項的:

          • 不知道用戶行為或想要什么

          • 選擇是否會冒昧,如性別,稱呼等

          • 防錯,保證用戶能夠看到選項并動手做出選擇,比起用戶會出錯并事后給出警示強

           

          注意選擇數量

          如果希望用戶只選擇一定數量的項目。要強制執行此操作,如果用戶單擊的次數多于所選數量,則他們最早的選擇將會被最近的選擇替換。同時注意需要加上輔助說明。

           

          2.3 排序

          選項排序會影響用戶操作,因此需要遵守一定排列原則。

          邏輯順序

          你應該將所有選項按邏輯順序擺放,比如按被選中可能性由大到小,按操作難易度由簡單到復雜,按風險由小到大,將最安全的操作放在前邊,列表選擇一般按照信息時間排序,由新到舊。

          選項的順序可以說服用戶進行選擇,就像前面說的默認選擇項一樣,他們可能只是因為第一個選項在列表中的位置而選擇了第一個選項??梢暂o助用戶,也可以讓用戶向著產品所希望的方向傾斜。

           

          對齊

          一般情況下,左側對齊排列發揮最佳效果,標簽選擇除外。豎直排列相對于水平排列而言,容易讀取和定位,每行一個選項足以,可以提高用戶的瀏覽效率并減少錯誤。

          但是豎直排列會占用較多的垂直空間,如果垂直空間受限,可以考慮水平排列。水平排列的時候,要注意每個選項之間的間距盡量大一點,以清晰的傳達選項對應哪個標簽。

          移動端更多的情況是左側標簽對齊,右側按鈕對齊,二者與頁面留出相同的邊距。垂直屏幕占比小,常用于呼出選擇、開關等有選擇操作的表單標簽。

           

          3.3 交互區域

          交互區域要適當大。單選框的面積較小,用戶在點擊的時候會比較困難,尤其是在移動設備上,易誤操作,可以通過擴大點擊區的交互區域來提高易用性。復選框和單選按鈕一般都很小,點擊或點選會很麻煩,可點擊區域中應同時包含按鈕和標簽,增加操作區域的面積,方便用戶操作。

          列表選擇中可以點擊容器框所在行區域來切換行對象的選中和未選中。

           

          2.4 文字標簽

          每個選項都要配合相應的文字標簽來指示該選項含義。

          一致性

          最好在每個區域上提供同類型的標簽,這樣可以給用戶一種視覺穩定性的感覺。同時盡量保證每個文字標簽用語的表達的一致性,避免否定詞,不要出現有的用名詞,有的用動詞的情況。

          不要在同一組標簽中混用文字和圖標

          一個分段就像是一個按鈕,按鈕內當然可以使用文字或者圖標代表其含義,但是請不要在同一個Segment Controls中混用文字和圖標,避免讓用戶覺得混亂和不一致。

           

          盡量簡潔

          文字標簽需要簡潔明了,一般使用短語而不是句子,因此不需要以句號來結尾。如果需要解釋說明,可以在選項下方使用單獨一行文字說明。僅體現每個個體之間的差異,不用重復選項之間相同的部分,將重復部分提出來放在整個選項的上方。

           

          2.5 輔助提示

          輔助提示很好地補充在消除歧義上的不足,但我們也需要合理使用,進行克制,否則就會造成不必要的視覺噪聲。

           

          圖標與環境暗示

          暗示指的是用戶在操作選擇前,給予用戶的提示,用戶根據這些提示可以判斷當前狀態以及操作后狀態。

           

          比如在界面風格模式,主題色,導航模式切換中,用戶可以通過當前界面的樣式判斷當前是是什么模式,以及選中其它選項后會產生什么結果,如下圖(來源螞蟻設計語言)在選擇圖標中就給予相對應模式的提示。

           

          下圖,白天模式與夜間模式,用戶可以通過當前界面的樣式判斷當前是否已經開啟了相關模式,從而判斷撥動開關后是什么結果。

          環境暗示的優勢是我們不需要其它設計和反饋告知用戶當前狀態,可以通過選擇對象和當前界面環境給予直觀暗示。

           

          警告框與提示框提示

          由于按下開關控件后立即執行操作,如果操作比較危險,請在危險操作后加入二次彈窗確認,告知用戶當前狀態以及潛在風險,避免造成嚴重損失。

           

          當用戶操作后,提示框氣泡反饋告知用戶,讓用戶知道自己是觸發了開啟還是關閉。彈窗提示強度大,使用在一些危險、重要的反饋中,提示框則使用在一些輕量的提示中。

           

          輔助文案

          輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明。下圖是手機信號設置和省電設置相關的選擇,開關的主體是名稱,但是下面的一行輔助文案很清晰地傳達了開關開啟后的后的狀態。

           

          其他輔助

          并不是所有提示都需要讓用戶看見,我們可以給予用戶其他感官的信號告知用戶當前狀態。界面設計與交互中,我們也仍然可以使用聽覺和觸覺來消除開關的歧義。

           

          在安卓微信聊天列表中,選擇一行聊天對象長按,手機會輕微振動一下,表示已點擊,給予觸覺反饋,同時展開的多個選項可進行選擇操作;手機在關閉電源時,手機會卡擦一下,給予聽覺反饋,表示已關閉屏幕,而不需要眼睛盯著屏幕關閉。

           

          我們很容易陷入到特定控件的中,所以我最好是從整體上開始思考。然后做出最佳決定,決定使用哪種選擇設計最有利于一致性、差異性和層次感,控件的高度,寬度,樣式設計和選項數量都是至關重要的因素。我們可以從被選擇對象是單選還是多選出發,來確定使用哪種選擇控件,可以根據下圖情況選擇,當然由于使用場景和內容的不同,請選擇性參考。

          3.1 單選時

          選項6個以下時,使用單選框&Tab標簽

          單選按鈕認知成本低,它能可見所有選項并讓用戶容易做出選擇。

           

          單選框,用戶能夠很快看到有幾個選項以及每個選項是什么,而不用點擊或其他操作再去發現這些信息。讓所有選項都可見,使用戶可以方便地進行比較,這樣可以減少認知負荷,幫助表單更加透明。

           

          涉及到選擇項與內容組之間以及在相同層次結構中進行導航時,使用Tab標簽。不要將標簽用于無關的目的地,也不要加載選項卡的整個頁面,只有選項卡及其內容區域進行更改。

           

          選項多于6個時,使用下拉列表&列表單選

          如果選項的數量超過6個時,應考慮使用下拉列表中或列表單選,因為單選按鈕太多,也會令人不知所措并引起混亂,用戶無論如何都無法記住所有的選項。

           

          下拉列表簡潔。更多適用于可預測的、類似的或增量的選項(年份選擇 )。數量較多且相類似的選項選擇用下拉菜單整合。

          如果屏幕空間有限,請使用下拉菜單。如果不是,請使用列表框。使用下拉菜單,可以使用默認選項,并淡化其它選擇。

           

          3.2 多選時

          選項6個以下時,使用復選框

          選擇項標簽短小且一致時,使用復選框,可以方便地進行比較,這樣可以減少認知負荷,幫助表單也更加透明。

           

          選項多于6個時,使用列表多選

          列表多選一般應用于6個以上選擇項進行多選的情況,數量更多出現將翻頁或滾動情況,需要告知用戶已選多少條數據,并在選中選項時出現相關操作。

           

          選項3-10個之間,考慮使用多選標簽

          選擇項數量在3-10之間,標簽不能過長,考慮使用多選標簽。多選標簽它們給人的印象是輕量的,有趣的。

           

          3.3 其他

          當選擇即生效時,使用開關

          切換開關是一種數字開關。任何由切換開關觸發的效果應立即生效。如果不是這樣,最好用單個復選框替換切換開關。

           

          存在長詞時,盡量不使用多選標簽

          多選標簽不能很好的處理長詞。不建議對文本進行折行或者調整大小,因為會不便于用戶閱讀,使用兩行以上的標簽會使得每個標簽非常難以快速掃描。

          如果垂直空間出問題,考慮標簽

          你應該防止出現很難看清選擇哪個控件的情況(確保按鈕和文本標簽的間距),可以考慮使用選擇標簽或拉大間距以此來在視覺上清晰地分隔選項。

           

           

          寫在最后

          本文介紹了多種選擇類控件,從用戶使用選擇類控件的角度闡釋了模式定義,涵蓋了大多數錄入場景。選擇類控件本身也需要不斷進行迭代、優化和拓展,以適應更多的應用場景。后續我將持續關注,希望本文的能幫助你。

          歡迎留言糾正,感謝閱讀。


          文章來源:tob.design        作者:小龍


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          4個案例教會你如何像設計師一樣解決問題

          周周

          好的設計是能夠解決不少問題的,具備設計思維不僅僅對設計師很重要,對我們來說同樣不可忽視。那么,什么是設計思維呢?我們又應該如何用設計思維來解決問題?本文作者通過這四個案例,教會我們如何像設計師一樣解決問題

          寫出好創意的方法論,都在這了!

          周周

          運營人的日常工作,是與創意分不開的。無論是寫文案還是設計頁面,無論是拉新促活,還是管理社群,都需要在以往的基礎上進行突破,而這就需要進行頭腦風暴了。創意這種捉摸不定的東西,如果沒有方法論的支撐,則會浪費時間和精力。接下來,本文作者為我們總結了一套寫出好創意的方法論

          摁不住的拼多多

          周周


          編輯導讀:當各大電商平臺忙著雙十一的時候,拼多多似乎是個獨特的存在,不慌不忙,圍觀在旁。拼多多為什么不重視雙十一?他們主要在忙什么?文章從這兩個問題出發,對此展開了分析解讀,一起來看看~

          孫悟空是石頭縫里蹦出來的。阿里系幾位P8Plus的朋友和阿德哥聊時說,拼多多也是石頭縫里蹦出來的!

          “打京辦”成立這么多年,沒承想打出個拼多多。剛剛發布的拼多多Q3財報顯示:首次單季度盈利,第三季營收142億元;GMV達1.45萬億,同比增長73%;活躍買家達7.31億……

          在資本市場上,拼多多迅速趕超京東300億美元達1600億美元市值,成為國內僅次于阿里、騰訊、美團的第四大互聯網公司。

          自2014年起,投資界便開始流傳“電商已是死賽道”的共識,拼多多的崛起給了投資界一記響亮的耳光,也再次說明了“長江前浪推后浪,江山代有才人出。”

          與當年打京辦、投蘇寧等手腕比,似乎阿里對拼多多已無招可施,重啟聚劃算、推淘寶低價版眼看也只是“補課動作”。而拼多多,卻正在暗暗部署更多領域,圈內人說,“誰如果小看黃錚的野心,就等承認自己是一個傻X”是同樣的邏輯。

          “摁不住的拼多多!”阿里的多位朋友如是說。

          低調的雙11

          今年的雙11因為“你懂的”原因而顯得波瀾不驚,除了天貓交出4982億元、京東交出2715億元的答卷之外,似乎乏善可陳……

          “拼多多天天都是雙11!”

          拼多多的朋友告訴阿德哥,所以他們不希罕宣布成績。

          當然,這并非拼多多的官方回應,官方回應說,拼多多更在意消費者的購物體驗。拼多多的Slogon是,多實惠,多樂趣。

          一個小混混有了另立山頭的志向后,并非馬上另立山頭,他首先做的,不是去激怒原有的老大,而是,開辟自己的新陣地,帶自己的小弟。

          拼多多只是不公布成績,并非沒有參與“雙11”盛宴。

          曾國藩說,聰明的人都懂得“藏拙”,但只有少數人懂得“藏鋒”。

          沒有滿減、蓋樓、升級列車、養貓……只有簡單的“低價”,拼多多副總裁陳秋說,本次雙11,拼多多的一切優惠都將以最簡單的方式面向用戶,消費者不用做滿減計算題,看到的即是最優價。

          前幾天,夫人非要去郵局給小侄子寄一堆童裝,這與阿德哥的習慣大相徑庭??傻搅肃]局,除了服務的眼神不對之外,價格真讓我驚喜:30多斤一大箱的衣服,郵寄費30元。

          總說國企服務沒跟上,可價格也真是“良心價”啊?!白怨耪媲榱舨蛔?,總是套路得人心”,黃崢說。

          總是低價得人心!

          阿德哥曾做過了多次田野訪問,得出兩個基本結論,一是老家很多親朋基本都知道淘寶,但大都卻正用拼多多;另一個是阿里、京東多年的鐵粉,居然瞬間被拼多多“拉走”。

          “618”期間,一個朋友在京東購買售價1099元的Beats solo3藍牙耳機,已準備在京東下手的他,突發異想去拼多多“多看了一眼”,499元。你沒看錯,不要599元!

          這個朋友今天已是拼多多的優質用戶,幾個月時間里,貢獻了近三萬元的GMV。

          打開拼多多APP,限時秒殺、斷碼清倉、XX特賣、9塊9特賣……不要小看這樣的戰陣:因為大量的特價版塊,外加重頭推出的“百億補貼”,拼多多給用戶展示出的,可不就是天天雙11嘛?

          而其背后的玄機則在于:通過不斷上新的各種大促,拼多多對于品牌的露出與銷量拉動,早已遠超傳統電商“泛賣貨”模式,它一改小商家陪煉大玩家的傳統模式變成了“讓更多的商家可以雨露均沾”。

          如果非得去探尋一下拼多多的崛起路徑,吃瓜瓤的多半會說,沒有淘寶就沒有今天的拼多多,沒有微信也沒有今天的拼多多。

          這可以視為正確的廢話。

          當年抗美援朝的路上,也曾有不少志愿軍睡著了。

          移動互聯網大潮來臨的時候,互聯網的生態發生了全新的變化,拉長時間線,誰臨陣換了大將,誰展開了整風運動?

          江山代有才人出,丁磊的知音,段永平的弟子,黃崢當立。

          簡而言之,阿里為中國的電商事業立下了汗馬功勞,基本讓國人實現了在“消費互聯網”端的揚眉吐氣;而騰訊的QQ、微信,則讓國人實現了網絡“非主流意見市場”上聚集了最多的人。

          創業,天時、地利、人和。黃崢不會都得,但都掙得了。

          淘寶“開卷考試”帶來了最初的商家和貨品,微信“熱鬧人群”帶來了交易場景,砍價、拼單激發了社交流,拼多多,用了不到三年的時間,創造出了“新電商速度”。

          隨后是C2M新品牌計劃,百億補貼的大品牌計劃,而快速上市帶來的則不僅是高光,更是贏得了“黃金時間”。

          按照傳統電商資本套路,拼多多三季實現單季贏利之后,還有一年到一年半的“高增可虧損”黃金時間。換而言之,拼多多依然可以繼續實現補貼、營銷推動,而不必太在意贏利。

          這樣的時間窗口,縱觀天下電商,唯拼多多有之。

          有疑問的人,不妨多看看拼多多今年的前二季財報的營銷費用率,答案擺在那兒呢。

          恐怖的是,黃崢的野心并非只在“實物電商”,據說,在拼多多,更多的大殺器正在路上。

          上天并非偏心,了解黃崢的人,知道,他只是大器晚成,而非天縱其才。

          賣菜

          并非拼多多不重視雙11,而是黃崢不重視,一是因為拼多多已上了軌道;二是因為黃崢最近只關注另一件事——賣菜。這便是多多買菜。

          疫情期間,拼多多便推出了線下團購工具“快團團”,協助各地商家收集社區需求,從而實現在線下單。

          此前8月,多多買菜正式上線,開始與興盛優選、美團買菜展開直接競爭,先是APP端出現多多買菜頻道,更是迅速推出同名小程序與“多多買菜門店端”服務號:采取的是與本地商超合作,線上賣菜、線下提菜的路徑。

          與別家合作前置倉自建供應鏈模式不同的是,多多買菜采取了只幫“合作商家”在線賣菜的方式,換而言之,多多買菜把實惠送給了合作商家,而它想要的似乎只是“用戶”。

          在這一邏輯下,拼多多采取了極為激進的補貼方式,以更高方式補貼團長,打出的旗幟是10億量級,除此之外,還采取了“三高”戰術:高補貼拉新、高頻率回訪、率入駐。

          賣菜熱不熱?

          阿里、騰訊、美團、滴滴、字節跳動盡數入局,而當前跑得最猛的是拼多多——多多買菜。

          多位競品人士告訴阿德哥,多多買菜團隊更加年輕,除了在品控方面并未實現良好管控之外,其犀利程度、其執行力,遠超阿里鐵軍。

          騰訊陣營拉出了興盛優選、食享會;而阿里系除了為十薈團、你我您合并之后的新十薈團打通阿里供應鏈之外,更是在近期有了新動作:菜鳥驛站團購接入了大潤發的商超,盒馬推出了盒馬mini和盒粉群,據傳零售通事業部亦正在籌備新的社區團購部門。

          實際上,今年的互聯網,除了5G軟硬概念之外,最大的賽道是賣菜,它超過了前幾年前輩造出的“新零售”概念。

          今年,以賣菜為核心的生鮮賽道上,目前已宣布和匯聚的資金已超過200億元。

          黃崢似乎看準了這條賽道,而現在的增量搏殺,僅僅是開始。

          “此一時”的策略,是黃崢鐵了心要拿下僅比外賣吃飯稍弱的剛需——買菜,既高頻,又具備想像力。

          要知道,首先撬動農村及五環外的,是拼多多。而拼多多C2M端的大成,其實在農產品,賣空一個地方的農產品,早已在拼多多持續實現。

          而在未來嫁接進自己的供應鏈,顯然在邏輯上已是必須。而當務之急,是拿下更大規模的“增量”用戶。

          黃崢絕非魏延,僅僅是有反骨,他也更不會是鄧艾、鐘會,他是司馬一族。

          黃崢如是說,我認為最好的利用營收的方式就是投資R&D、基礎設施、用戶認可度、品牌知名度。重要的是,

          培養人們的消費習慣,讓人們以拼多多為最主要的消費平臺。

          黃崢之野心,蒼天可鑒,近在咫尺的數據是:年活躍買家已增至7.313億人,第三季度平均月活躍用戶為6.434億人。

          與之對應的是,阿里最近的數據是:年活躍買家7.57億,2020年9月,中國零售市場移動月活躍用戶8.81億人。

          有人在意ARPU值、GMV,但拼多多似乎更在意客單量、復購率和用戶數。

          依阿德哥判斷,電商格局正在乾坤大挪移。

          嗯,了不起的蓋茨比,摁不住的拼多多。




          文章來源:人人都是產品經理           作者:韓志鵬


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合