<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>

          首頁

          頁面設計中的信息組織策略探索-言之有序

          ui設計分享達人

          人們是如何組織信息的?

          在 Ant Design 的界面設計中,會包含大量的信息組織和編排工作,我們常常會遇到這樣的問題:

          • 一個詳情頁面里應該包含哪些信息?

          • 什么樣的信息應該放在卡片里,什么樣的信息應該平鋪顯示?

          • 一個頁面內的信息該怎么讓用戶快速找到重點?

          • ···


          信息組織是我們在日常生活中經常會遇到的問題,商場里的樓層導航、機場車站的標志指引、餐桌上的菜單、手機里的通訊錄等等,各式各樣的信息是如何被組織編排到一起,又是以何種方式把信息呈現給用戶呢?


          在解答這些關于頁面設計的問題之前,我想先給大家講一個生活中的小案例:


          動線設計

          逛過宜家的人,應該會注意到宜家類似迷宮的動線設計,這種動線設計能夠讓消費者不知不覺逛完商場的各個角落。踏入宜家門口時,就會被一條隱形“向導”默默地引導著向前走:一條曲折宛轉的主線依次引導至客廳家具、客廳儲物室、臥室、書房等各個主區域,直到一個不落地走完才抵達出口。但在這個主線之外,為了確保一些消費者在購物中,能夠快速離開或快速去往感興趣的區域,每個主區域間都有一些較隱蔽的捷徑作為輔動線。


          這種動線設計一方面能夠把所有商品按照路徑有效的串聯起來,另一方面又能讓消費者不知不覺的沿著這個路徑去了解商品。


          商品布局

          動線布局是宜家的隱形骨架,而真正讓宜家賣場豐富起來的,還是琳瑯滿目的商品。宜家的賣場和大部分零售賣場不一樣,它不會把同類型產品進行大集合,而是根據人們的正常生活場景來分類,不同類型的產品在同一區域組合陳設,構成生活中的一個小場景,一方面能達到對各個商品功能的完美詮釋,另一方面,一個產品盡量不會重復出現,盡可能減少商品展示的復雜性。


          在整體商品布局上,有兩個很有意思的地方:第一,在居家體驗中心,樣板間的陳列順序完全是按照消費者回家后的場景而布置:客廳、餐廳、廚房、書房、臥室、衛生間......,第二,在家居用品中心,則會根據消費者在家的日常起居行為進行擺放:做飯、休息、讀書、收納......


          現實生活中的這些例子,對我們的界面信息組織有什么啟發呢?


          關于動線和布局的思考

          在宜家的案例中,關于動線,映射到人的行為上,有一個比較專業的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最優體驗心理學》中對“流”的定義:當人們全身心投入到某個活動中時,會對周邊干擾視而不見,這種狀態被稱為“流”。宜家的動線設計很好的營造了這種狀態,讓消費者完全沉浸于商品瀏覽,并且盡量不去打斷這種行為流。


          經過研究發現,構成“流”的行為動作,其前后必然存在某種連續性或者關聯性,例如回家的行為動線,日常起居的行為關聯等。這個概念在界面設計中依然適用,很多界面設計都在有意無意的去創造“流”的狀態,帶給你用戶沉浸式體驗,例如各類短視頻應用會根據用戶瀏覽習慣推薦相關聯的視頻內容,讓用戶沉浸其中無法自拔。


          關于商品布局,映射到信息組織上,《韋氏大詞典》 中提到一個詞“編配”(orchestration),對應的解釋為“和諧的組織”。這個詞能比較好的表達信息組織的含義,宜家的商品和諧的組織構成一個場景,它向消費者傳遞的不僅僅是商品本身的功用性,更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費者對信息篩選的復雜程度。而在界面設計上,表單頁的和諧組織能夠幫助用戶快速完成信息錄入,詳情頁的和諧組織能夠幫助用戶快速理解一個描述對象......


          各種各樣的信息總能以某種關系組織到一起,而如何根據這種流為用戶去組織和呈現信息呢?


          “流”的本質其實是一系列具有關聯性的行為動作串聯,而“編配”的目的則是為了降低串聯信息呈現的復雜程度。有了這兩個基礎的概念之后,我們可以做一個初步假定:所有的信息是否都可以通過關聯性和復雜度來進行組織編排?針對著這兩個維度,我們又進行了更深層次的研究和驗證,并得到基本定義:

          • 信息復雜度:信息量的大小,包括種類、數量等。

          • 信息關聯性:信息之間的潛在關聯或者相互影響。


          我們設想,這兩個維度能否運用到界面設計上的信息組織呢?


          頁面信息的組織方式

          信息關聯性

          界面信息之間的潛在關聯或者相互影響,通常體現在「邏輯關聯」和「視覺關聯」兩個層面。


          邏輯關聯

          顧名思義是指一個事件中的所有信息之間的關系,在界面設計中,無論什么樣的信息,總能以某種方式進行分類和編排在一起,例如手機通訊錄中的人名,可以按照字母順序從 a 到 z 進行排列,電商網站的商品導航會根據類別進行分組,待辦事項可以根據時間進行排序等。


          如何找出信息之間的邏輯關聯性呢?

          被稱之為信息架構之父的 Richard saul wurman 在《信息焦慮》一書中將信息組織方式用“五頂帽架”來概括:

          • 地點(Location)

          • 字母(Alphabet)

          • 時間(Time)

          • 類別(Category)

          • 層級(Hierarchy)

          簡稱LATCH。這五種方式基本可以涵蓋所有的信息組織策略,信息是無限的,但是信息組織方式卻是有限的。



          視覺關聯

          任何一個界面呈現給用戶的時候,用戶都會下意識的去判斷界面上什么信息是最重要的,接著會去關注這些信息都有什么關聯,因此,除了按照邏輯去組織信息之外,還應該合理的去呈現信息的視覺層級關系。


          視覺層級關系有幾種常見的區分方式:

          • 強調:使用基本視覺元素(顏色、形狀、大小等)區分層級

          • 親密性:位置接近的元素通常是有關系的,而且位置越近,關系越強

          • 圖勝于言:視覺符號和對象關聯,例如:齒輪或扳手=設置,垃圾桶=刪除

          • 瀏覽順序:根據瀏覽順序,從左到右(部分地區)或從上到下信息重要程度依次減弱

          • ···


          如何驗證界面元素的視覺關聯性是否合理呢?


          瞇眼測試

          《About Face 4: 交互設計精髓》 中提到了一個很有意思的測試,為了確保界面視覺信息有效的拉開層次關系,圖形設計師經常會用到一個方法“瞇眼測試”(squint test)。閉上一只眼睛,瞇著另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成組,哪些元素看上去零散。從多個角度去觀察,總能夠發現之前沒有注意到的布局和構成問題。


          信息復雜度

          通常以信息量的大小或樣式多少來衡量,這兩個維度實際決定了信息的瀏覽時長。例如一個詳情頁面內都是純文本信息,但是信息量較大(超過三屏),則認為這個頁面的復雜度較高,或者一個詳情頁面內同時包括文本、表格、代碼展示、圖表等元素,也會認為這個頁面的復雜度較高。

          信息的復雜度和關聯性并不是兩個完全獨立的維度,根據關聯性去組織信息,本身就是為了降低信息呈現出的復雜程度。而對復雜度的研究,可以幫助我們如何選擇合適的方式把信息呈現給用戶。


          頁面信息組織實踐 - 詳情頁設計

          具體到界面設計層面,信息體量大、復雜度高常常是中后臺界面設計的難題之一。以詳情頁為例,詳情頁內的信息該如何合理的組織信息并有效的傳達給用戶呢?


          根據關聯性和復雜度的概念,我們抽象出一個簡單的「復雜度模型」,用來判斷信息復雜程度和關聯性對頁面結構的影響。


          橫坐標表示頁面信息之間的關聯性,縱坐標表示信息的復雜程度,兩者交叉組成的色塊代表不同的信息等級??拷c最淺的色塊,代表復雜程度低且關聯性強的內容,例如一段純文本的產品描述信息;遠離原點顏色最深的色塊,代表復雜程度高且相互獨立的信息,例如一個發布流程中的集成測、預發環境測試、灰度測試、上線等各個階段信息展示。


          與之對應的,我們對信息展示方式也進行了維度劃分,用來解決在復雜的企業級產品界面設計中,何時使用卡片區分,何時拆分為 tab 等布局問題。


          根據承載信息復雜程度的不同,我們對容器組件也進行復雜度劃分,用來解決在不同頁面布局中,不同類型的信息用何種方式呈現的問題。


          這個模型可以幫助設計者在決策布局組件時,有章可循。最終讓用戶感知,當用戶來到一個頁面時,即可對頁面的信息量、信息的搜尋方式有統一的預期。我們嘗試將復雜度和關聯性模型在界面布局中落地:


          關于以上的模型在實際設計中該如何操作,這里提供一個推薦步驟可以參考:

          • 「復雜度判斷」明確設計對象信息量的大小

          • 「關聯性判斷」判斷各個信息之間的關聯性,并合理分組

          • 「組件選擇」選擇合適的容器組件來呈現信息

          • 「模板選擇」選擇合適的頁面模板,組織編排信息

          • 「瞇眼測試」檢查整體布局是否合理(僅參考)



          結語

          大到一個系統,小到一個按鈕,背后的每一條規則既要從人的角度去思考設計的易用性,同時也要從信息本身去推敲組織的合理性。作為設計規范的制定者,不能憑感覺簡單了事,而是需要找到一套通用的模式,幫助用戶快速找到并理解信息幫助用戶提效,同時提升用戶的瀏覽體驗,是我們一直在探索的課題。

          虛擬界面的信息組織和現實世界一樣,既需要符合人們對事物的認知,也需要遵循人們的行為習慣,這些認知和行為習慣,構成了自然交互的基礎,這也是我們一直在探索方向。當然,信息組織除了以上這種思路,還有更多的思路和方向等待挖掘,期待大家的反饋和建議,幫助我們一起完善。


          優秀網站設計賞析

          前端達人

          很多網站仍然在使用老舊的頁面設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。

          接下來是精彩的UI設計賞析

          WechatIMG2092.jpegWechatIMG2093.jpegWechatIMG2094.jpegWechatIMG2095.jpegWechatIMG2096.jpegWechatIMG2097.jpegWechatIMG2100.jpegWechatIMG2099.jpegWechatIMG2098.jpeg


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

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



            更多精彩文章:

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

                 超贊的創意頁面排版設計,打造“視”不可擋的網頁設計

                超贊的網頁設計+精美流程圖賞析

                 超贊的網站設計賞析



          table td的寬度詳解

          前端達人

          前言:一直總覺得td的寬度好難駕馭,但萬事萬物總是有規律的。就像亮劍說的:不用因為怕八路就敬而遠之,應該靠上去,熟悉他們,了解他們。

          正文:

          • Table只有Table的寬度是可以設置的,并且各個瀏覽器理解一致

          • 1.原則上應該講table的寬度設置成一個固定的值,而不應該設置成一個根據屏幕變化的值
            Table的寬度為600px,Table的td所有寬度總和不到600px,瀏覽器會自動按照td的寬度的比例算出寬度

            <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 200px;">我是200px</td> <td style="width: 200px;">我也是200px</td> </tr> </table>  
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6

            運行結果:兩個td都是300px;

          • 2.Table的寬度為600px,前兩個td的寬度已經為600px,那么第三個td的寬度沒有指定,這樣的話第三個td的寬度是根據內容出現寬度的,然后前兩個再按照比列計算、
            前兩個td小于table寬度,那么最后一個td就起到補全的作用

             <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 300px;">我是200px</td> <td style="width: 300px;">我也是200px</td> <td >我是根據內容的</td> </tr> </table>  
                    
            • 1
            • 2
            • 3
            • 4
            • 5
            • 6
            • 7
          • 3.Table中的td內,如果放置塊狀元素超過td的寬度,并且table的table-layout: fixed;(fixed表示td的寬度是定長的,不隨td內容變化而變化)。
            這樣盡量不要再td里寫overflow: auto; 因為這樣在IE6,7不會出現滾動條的,最好的辦法是套一個div,寬度設置成100%

            <table style="width: 600px;border-collapse: collapse;table-layout: fixed;" > <tr> <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td> <td >我是自由寬度</td> </tr> </table>
                    

            藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

            截屏2021-05-13 上午11.41.03.png


            轉自:csdn 

            分享此文一切功德,皆悉回向給文章原作者及眾讀者.

            免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          小數據里的大秘密

          資深UI設計者

          本次活動中,嘉賓通過眾多豐富、有趣的案例介紹了數據可視化的概念、作用和設計方法,信息量滿滿。

          分享框架:

          嘉賓首先分享了2個數據可視化案例:

          1. 設計師把閱讀困難癥患者普遍能看到的東西進行實體化、視覺化,讓別人能進入他們的世界。
          2. Aaron Koblin的作品《Flight Patterns》,讓人眼突破視域的界限,以“鳥瞰視角”來看北美居民的遷徙過程。

           

          活動筆記:

          1. 什么是數據視覺化?

          其實它就是把不可見的數據轉化為可間接被觀察數據的過程。它不提供回答,只是提供一種觀察的新方式。

          舉例一個來自小數據觀察的自我探索項目:太極。

          將太極拳的動作進行數據采集完成了第一張數字國畫,有人質疑說好看但無用,嘉賓解釋由于好看吸引了人群,從人群的行為進行觀察可能會有意想不到的發現。

          數據視覺化的初衷并不是為了解決問題,而是為了探索。

          前田約翰(John Maeda)曾經說過:“好藝術的使命是喚起思考,好設計則是讓事物變得清晰,并能解決實際的問題!”

           

          2. 數據視覺化有什么用?

          介紹兩張數據視覺化歷史上教科書級別的神圖:

          1. 《拿破侖東征》誕生于1861年,由法國工程師查理·米蘭德繪制,描述了1812年拿破侖東征俄羅斯的失敗戰役。圖中透過2個維度呈現了6類資料:拿破侖軍的人數、距離、溫度、經緯度、移動方向,讓人在一個靜態的平面上同時觀察多種數據變成可能。
          2. 另一位南丁格爾女士,是一名護士。作為軍醫,她清楚地知道大部分士兵都不是戰死沙場,而是死在醫療環境極差的軍營里,她自己懂,可是怎樣才能影響國會呢?她發明了玫瑰圖,用以表達軍醫院季節性的死亡率,對象是那些不太能理解傳統統計報表的公務人員。她的方法打動了當時的軍官統領和維多利亞女王本人,于是醫事改良的提案才得到大力支持。為了紀念她的貢獻,后來她的頭像被印在了英鎊上。

          數據可視化研究的不僅僅是“數據如何能被看清”,還有“數據如何能被看懂”。

           

          2.1 數據如何被看清?

          可以通過顏色,大小,方向去提高數據的差異性。最簡單的例子就是報表中的標紅。

          1. 有效標紅的第一步:去顏色干擾,第二步:去分隔線干擾;
          2. 去掉沒有用的東西,例如框框、加粗;
          3. 對齊很重要:數據右對齊、信息左對齊,注意表頭對齊;
          4. 間隔和行距也很重要;
          5. 單位很重要,盡量減少數字本身的長度,不超過4位;
          6. 去重非常重要(盡可能減少畫面里的重復信息,可以讓重要的信息更突出);
          7. 字體修正(看個人喜好)。

           

          2.2 數據如何被看懂?

          嘉賓介紹了4個項目:

          項目1:國內外藝術院校的數據可視化展示。

          由于經常會有同學問各大美院或藝術類院校之間的區別。嘉賓抓取了17所國內國外院校的數據來做展示,藍色是代表“設計類”,白色代表“純藝術類”。從中也可以看到院校的結構是否扁平。

           

          項目2:嘉賓基于wikidata數據庫編寫的小工具。

          最初只是用來快速查找藝術家的基礎信息,后來加入視覺化功能,把所有查詢到的人排列到一根時間軸上,橫向觀察她所關注的藝術家的生活年代及壽命。

          通過可視化的展示,她發現自己關注的都是集中在某一個時期的藝術家,除了看到自己的喜好之余還很有效地發現自己的知識盲區(只有看到了自己知道什么,才能知道自己還不知道些什么)

          我們可以發現在人類歷史上,很多人物在時間即便在空間上沒有交集,卻在時間上相遇了。

          比如Jackson Pollock,藝術史上動態藝術里面用身體的律動去做油畫的一個非常重要的藝術家,他和計算機之父圖靈原來都是同一年出生的,酒鬼Jackson Pollock居然比圖靈還多活了兩年。

          我們還能八卦一些愛情故事,原來搖滾界的神話列儂跟小野洋子是姐弟戀,而且列儂只陪伴了洋子生命的一小段時間。

          我們可以清楚地看到“看得見”的魅力。

          很多信息的缺失并不是不存在,而是無法被看見,被觀察。

          因為看不見,很多信息甚至是完全錯誤的。在測試代碼的過程中作者更意外地發現愛迪生的生日被錯寫為2016。

           

          項目3:紐約大都會藝術博物館做的Unfinished項目。

          Unfinished是大都會藝術博物館別館在首次開幕時的處女展,Unfinished討論的是“藝術很重要”的話題:在藝術的世界里,什么是未完成,展期為半年。嘉賓認為這個線下展展期太短非常可惜,希望可以通過技術的手段延長展期,更希望能降低門檻,讓更多世界各地無法前來觀展的人可以有機會參與討論。

          于是嘉賓將Unfinished展做成了Google的插件,安裝插件之后,當新打開空白頁的時候,空白頁會自動被Unfinished的作品填滿,把一個簡單的空白窗口變成藝術之窗,同時讓人不需要任何搜索便進入展覽。

          此外嘉賓賦予了這次改造更多的交互空間,讓人可以實現在傳統線下博物館沒有的體驗,讓他們自由地在“未完成”的作品上進行創作并分享,延長了作品的壽命,讓藝術品重回人們的生活中,賦予其新的價值和靈魂。

           

          項目4:通過整理全國美展的數據總結的一些獲獎規律

          得到的3個有趣的結論是:

          1. 高亮的紅色、黃色很受歡迎
          2. 1999年,30多、40多的藝術家容易獲獎
          3. 畫一張少數民族在沙發上抱著一頭牛的作品在數據上是很可能獲獎的

           

          3. 數據如何被視覺化?

          在實際工作里,大部分人會接觸到的數據視覺化實際上是信息圖表,關于信息圖表的一些規范和小技巧嘉賓也有提及到:

          在做圖表時,動機往往比較重要。

          下圖是為了說明布什總統下臺的話,居民稅收會增長多少,其實只有不足5%的區別,但對圖表做了去零線處理,使得看起來差異很大。

          作圖的時候要先說明結論。

          比如下面的表格是員工為了向老板說明自從少了兩位員工之后,單子處理不過來了,意思就是說老板你得給我加人。

          千萬不要出現彩虹柱狀圖,折線圖在多周數據對比的時候會非常實用。

           

          最后是一些推薦的網站和資源:

          最后釋疑:

          五步提升你的版面精致度

          資深UI設計者


          首先,我們怎么去理解在作品集版面中的“精致度”。我覺得可以將其轉化為“質感”,“細節”,“細膩”這樣的詞匯。其實“精致度”不足這個問題大部分同學也是能有所感知的,只是不知道哪里出了問題,也就無從下手。當然還有一小部分同學,可能并不覺得自己有什么問題,也無法體會修改前后的差別,這樣的同學,我建議你平時應該多看一些優秀的設計作品,多沉淀一下,這樣的方式對你幫助更大。


          很多同學經常把“精致度”理解為形式感不夠,或者是不夠酷炫,這么理解是不準確的。這就好像一個產品,它的精致和它的外觀設計并沒有什么直接聯系,而是更多的取決于這個產品的做工和材質。做工體現在接縫的處理,邊角的打磨等等,而材質決定了其質感的好壞。那么同理,版面的“精致度”實際上和你的設計感也是沒有直接聯系。那么從哪些方面體現版面中的“精致度”呢?我結合自己的經驗總結了以下幾個方面:

          1.舒適的間距。一個合適的,讓人舒適的間距特別重要。無論是文字與的,或者說認為不重要的事情?;靵y的,不統一的,不舒適的間距會讓版面變的排布變的無章,這就好像一個產品各個部件的拼接接縫大小不一,會導致“精致度”下降。

          2.大小比例。版面中所有元素的互相之間,以及相對于整個版面的大小比例問題。這個也是非常重要的一個體現“精致度”的地方。所有內容都過于傻大粗,無疑會讓版面看起來非常粗糙。

          3.層次感。層次感實際上是一個非常好的提升質感從而體現出“精致感”的手段。缺乏層次感的版面會顯得非常的寡淡,以及在內容較多時可能會在視覺上造成較亂的感覺。那么如何提升層次感,主要是靠對比的強弱。比如:深與淺,粗與細,大與小,疏與密等等。

          4.字體。選擇一個精致好看的字體,對版面的精致度有一定的提升,不過還是要注意,字體的與版面之間的大小比例要注意。


          5.配圖。配圖的質量也一定程度上影響了版面的精致度。無論是你自己做的圖,比如分析圖,效果圖等,還是你網上找的圖,如參考圖等,都很大程度上決定了你這一頁的精致度。


          通過以上幾點的提升,我相信你的版面“精致度”一定會有較為顯著的提升,而版面效果也會看上去更為高級。不過這里還是要再次提醒,精致度和設計感是兩回事兒,如果只有精致度,而設計感較差,那也是不行的。希望本期的內容對你的版面有所幫助。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:馬克筆留學設計

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          2021年設計師們最值得做的練習TOP3

          seo達人


          日常的設計需求需要設計師們準確、快速的解決問題,這也代表著我們很難在日常的工作中嘗試新鮮或更具挑戰的設計風格,所以設計練習就成為了設計師們提高自己技能水平的重要途徑!新的軟件、風格或者配色,總讓人躍躍欲,今天我們就一起看一下,2021年全世界最受設計師們歡迎的練習方式TOP3

           

          01.3D自畫像

          自古以來,自畫像始終深受各種藝術家的喜愛。從油畫、雕塑,到現在的數字插畫,設計師們也用五花八門的方式展示著自己獨特的性格和審美。這兩年最火爆的形式毫無疑問是3D風格,3D自畫像也成了越來越多設計師們表達自我、提升能力的重要途徑!如果你想做些3D練習,自畫像一定是很不錯的選擇。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.抽象幾何

          方、圓、三角…這些基本的形狀也是整個設計殿堂根基的重要組成部分。過去的一年中,越來越多的設計師用這些基本的幾何形狀,來挑戰排版設計。大道至簡,簡單的色彩和圖形更加考驗設計師們對元素的控制能力,看似隨意擺放的圖形,其實都由設計師們精心布局和修飾!

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          03.暗色設計

          黑色場景雖然較少,但是不可或缺。隨著暗色模式的普及,設計師們隨時會面對黑色場景的設計需求,在練習中熟悉其設計規范就變得尤為重要。如何進行色彩搭配,如何整理層級關系,如何兼顧亮暗雙模式,這些問題對設計師來說都是不小的挑戰,提前練習自己對暗色設計的熟練度吧,在黑暗中也能散發光芒!

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》2021年設計師們最值得做的練習TOP3

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          產品細節剖析,提升用戶體驗就差這一點!

          seo達人



          在體驗優秀的作品時,我們需要站在用戶的角度去發現好設計細節及交互解決方案,思考能給企業或用戶帶來價值并記錄下來,久而久之,就能提高自己的語言組織以及總結能力,再通過不斷的練習,以達到質變效果。

           

          151.「keep」設置身高/體重-模擬現實生活中的固有認知

          152.「網易蝸牛讀書」找人共讀-堅持讀書的動力

          153.「keep」隱私模式-一鍵隱藏跑步軌跡

          154.「京東」刪除搜索記錄-決策思考

          155.「嗶哩嗶哩」動效IP結合操作特性-提升品牌曝光度

          156.「高德地圖」返回-貼心的交互手勢反饋

          157.「騰訊視頻」只看TA-滿足“追星”用戶沉浸式體驗

          158.「京東讀書」你用過橫屏時分欄閱讀嗎?

          159.「ETC車寶」如何在較少的空間展示更多的內容?

          160.「盒馬」金剛區-引導用戶直達目標、快速轉化

          161.「美團」酒店住宿-評價功能的重要性

          162.「今日頭條」內容與評論區-高速直達

          163.「MONO」TAB欄圖標-植入品牌記憶

          164.「高德地圖」屏幕常亮-減少不必要的操作

          165.「嗶哩嗶哩」生日-通過閃屏給自己一個暖心的祝福

           

          151.「keep」設置身高/體重-模擬現實生活中的固有認知

          產品體驗:

          在keep設置身高/體重時,頁面效果采用了現實生活中的尺子/稱的刻度,通過左右滑動,跟隨刻度變化調整出準確的身高/體重數值。

           

          設計思考:

          早期的互聯網產品界面,很多都通過擬物化的設計來描繪現實世界中的產品,其便于用戶對功能進行感知,模擬物理世界中的交互,幫助輕松掌握界面的使用方式,最大程度的降低用戶學習成本。雖然后來逐漸過渡到扁平設計風格,但很多方面,依然保留了擬物的特征。擬物化風格會不會再次來臨也不得而知,但從設計趨勢的不但變化可以看出,如2020年火爆的新擬態設計(基本撲街)、C4D、2.5D設計等表現手法,都是在朝著貼近現實世界的認知方向延展。

          在keep設置身高/體重時,通過模擬現實世界用戶對生活中事物的認知,將頁面設計成尺子/稱的刻度樣式,左右滑動即可設置完成,很符合用戶的直覺。模擬現實的設計可以幫助用戶輕松掌握界面的使用方式,更快的跟產品之間建立連接,根據模仿學習的基礎,有利于初次接觸的用戶,降低學習成本、提高效率以及出錯概率。

           

          152.「網易蝸牛讀書」找人共讀-堅持讀書的動力

          產品體驗:

          進入網易蝸牛讀書的介紹頁面,通過“找人共讀”邀請喜歡讀書的伙伴加入,為堅持下去提供動力。

           

          設計思考:

          說起線上讀書,一開始必定給自己定下各種計劃,還會下定決心,從明天開始就……??捎媱澓茇S滿、現實很骨感,當你不想再看書時,可以找到上百個說法來掩蓋自己堅持不下去的理由,且聽上去合情合理。很多內/外因素的存在,當正在看書時收到朋友的吃燒烤邀請、網友的開黑4缺一、前男/女朋友的微信等都是放棄計劃的開始,即便可以抵擋這些誘惑,但面對看到的精彩無處表達喜悅、疑惑之處無地訴說等,無法交流的痛可能是壓倒你堅持的最后一根稻草。

          網易蝸牛讀書可以邀請喜歡看書的網友一起學習,通過交流互動、相互鼓勵提升學習氛圍,雖然在虛擬的網絡世界,但相比一個人讀書更有看書的儀式感,精彩之處相互分享、不懂之處相互交流,擺脫一個人的孤獨,為堅持讀書提供源源不斷的動力。另外,第一次共讀的用戶,還可以免費得書,且后面能獲得翻倍的蝸牛殼用于換書,正所謂免費東西不要白不要,以此增加用戶的使用粘性,提升用戶在此平臺讀書的頻率,為后面的轉化提供條件。

          (一個人在電影院就算看著喜劇也可能睡著,但一群人在場很可能讓你笑的岔氣;一個人靜悄悄的在手機追劇跟開著彈幕相比,也是兩種不同的心情)

           

          153.「keep」隱私模式-一鍵隱藏跑步軌跡

          產品體驗:

          在keep跑步完成后,進入跑步記錄頁面,開啟隱私模式,系統會屏蔽跑步軌跡地圖上的部分文字信息,避免用戶在分享后暴露自己的位置隱私。

           

          設計思考:

          跑步是受大家喜歡的運動之一,沒有健身房里的復雜訓練和費用成本,且時間靈活自由,經常跑步可以減肥、改善視力、改善失眠狀況、釋放壓力/舒緩情緒等諸多好處。堅持跑步需要極強的自制力,如果光靠自律來讓自己堅持,很少人能做到,其外在條件不可或缺,比如多人約定一起跑,相互鼓勵;給自己制造必須跑步的條件和理由;打卡朋友圈,獲得他人認可和鼓勵等。打卡朋友圈是很多人使用的一種方法,一方面礙于面子心理,通過營造努力的人設,在他人那里博得面子和形象,給自己帶來心理上的滿足感;另一方面,可以通過其他人的點贊、評論獲得對自己的肯定,增強自己對跑步的興趣,以提供堅持下去的動力。

          keep為了讓用戶更安心分享自己的跑步記錄,在跑步軌跡地圖設置了隱私模式,點擊“小眼睛”開啟后,軌跡地圖上去掉了位置及信息標記,只能看到大概的輪廓。隱私模式能有效避免用戶的位置信息泄露,以最安全的方式使用產品帶來的服務,給用戶更容易掌控的感覺,帶去安全保障的同事,還能提升用戶對產品的信任度。

           

          154.「京東」刪除搜索記錄-決策思考

          產品體驗:

          在京東搜索頁面刪除歷史記錄時,會自動展開所有搜索記錄,不打斷用戶瀏覽的情況下再次提醒是否全部刪除。

           

          設計思考:

          應用將用戶的搜索行為記錄下來,其主要目的是方便用戶下次使用時再次展現,可直接點擊快速找到自己所需的商品。雖然保存搜索記錄是在給用戶提供方便,但也可能將用戶較為私密的關鍵詞暴露給其他人,如果被自己的朋友或親人看到,就有些尷尬了,刪除歷史搜索記錄無疑是最有效的方法。在用戶刪除歷史記錄的過程中,其不同的交互方式給用戶不一樣的體驗,且還能提醒用戶思考、是否需要放棄這一操作行為。

          在京東APP刪除搜索記錄的過程中,系統將所有記錄展開供用戶瀏覽,且右上角出現“全部刪除”的弱提示。通過展示的歷史記錄給用戶足夠的時間,以延長用戶下一步操作決策的思考,降低刪除成功的可能。眾所周知,用戶在操作刪除時,其主行動目標就是刪除成功,雖然在中途不太可能改變用戶的想法,但每給用戶多一份思考(所有歷史記錄),用戶改變想法的可能性就會增加;每增加一定的難度(弱化刪除操作,降低視覺傳播速度),用戶放棄下一步操作的可能性也會增加,而且應用需要通過用戶多次重復的搜索記錄來計算,確定是否增加該關鍵詞對應產品的曝光頻率,以達到更多的轉化,用戶的歷史記錄一旦刪除成功,就會增大二次搜索關鍵變化的范圍及不穩定性,不利于系統更精確的定向推薦產品及服務內容。

          常見刪除歷史搜索記錄的交互方式無非三種,雖然不敢說哪一種最好,但可以根據應用的實際需求酌情利用:

          ①、無提示:操作刪除即刪除成功,路徑最短、效率最高,但極容易造成不可挽回的誤操作(如:美團);

          ②、弱提示:操作刪除,再次提示是否刪除,弱化主操作,不影響頁面瀏覽,給予足夠的思考空間,但容易混淆原本的想法并通過信息錯覺給用戶“洗腦”,促使用戶放棄下一步操作或引導其誤操作(如:京東);

          ③、強提示:操作刪除,通過彈窗提示用戶快速做出決策,效率較高,但用戶無法瀏覽頁面內容,沒有太大的思考空間,只停留在“是/否”的層面上(如:淘寶、餓了么)。

           

          155.「嗶哩嗶哩」動效IP結合操作特性-提升品牌曝光度

          產品體驗:

          在嗶哩嗶哩視頻下方點贊時,或出現IP豎起大拇指的動效,生動有趣,點贊成功的同時,還傳播了品牌形象。

           

          設計思考:

          大拇指點贊是出現過最多的一種圖形表現方式,其誕生于2000年后,逐漸在全球各種應用中出現并被人們接受且成為一種潛在的點贊認知,通過自己對產品/內容的態度和認知傾向,用支持、贊同、偏愛等表達主觀情緒感受。知名產品對點贊的視覺表現、交互效果都非常嚴格,因為它會影響所有用戶的使用體驗及品牌價值。

          嗶哩嗶哩的點贊除了常規的大拇指圖標交替出現外,還融入了動效品牌基因及激勵性質的文案。點贊成功時,圖標上方會出現一個豎起大拇指的動效IP形象,2秒后消失,利用點贊的特性結合IP強化品牌,為用戶在操作過程中增強記憶,提高品牌的曝光度,且動效IP樣式更具產品靈魂和趣味性。

           

          156.「高德地圖」返回-貼心的交互手勢反饋

          產品體驗:

          在高德地圖頁面返回時,使用右滑交互手勢,所接觸的位置會出現水滴狀的返回圖標,對用戶做出交互反饋。

           

          設計思考:

          針對移動端界面的返回,第一印象是左上角的返回圖標,但在全面屏手機普及后,大屏幕尺寸也又開始占據市場,屏幕大意味著內容可以更大限度地得到展示,但也會增加單手操作的難度,尤其是頂部,幾乎成為單手操作的盲區,于是,很多應用開始將重要的功能往下方移動以及增加了很多隱藏的交互手勢,如上/下/左/右滑動、雙擊、長按、多指并行等一系列便捷的操作。

          其實很多交互手勢,用戶已經見怪不怪,基本都有接觸,但是在地圖類型的應用中,80%以上的用戶操作各方向滑動時,思維還停留在移動地圖的認知上,很少有右滑返回的概念。高德地圖增加了右滑返的交互,且在人機交互的接觸位置出現水滴狀的返回圖標,給予用戶明確的反饋,便于用戶快速區分對應的下一步變化是返回還是滑動地圖,極大方便用戶使用,簡單的設計細節十分友好貼心,不知道的童鞋趕緊試試吧!

           

          157.「騰訊視頻」只看TA-滿足“追星”用戶沉浸式體驗

          產品體驗:

          在騰訊視頻橫屏觀看影片時,點擊“只看TA”,選擇只想看到的明星片段,后續在看片過程中,系統會自動屏蔽與該明星無關的片段。

           

          設計思考:

          所謂“蘿卜青菜、各有所愛”,針對喜歡追劇/看片的人群,其目的是各不相同,比如喜歡歷史的,所關注的是故事的情節、改編程度及連貫性;喜歡科幻的,關注的是動感和特效。但說起青春偶像劇,喜歡看的,大部分用戶都是片中某些明星鐵粉,因“鮮肉”云集,打開彈幕就不難看出,鋪天蓋地的都是“好帥啊”“老公”“摸了女孩的手、我好傷心……愛死了”等一系列的花癡語錄,什么演技、劇情都不重要,重要的是“TA”別消失,不然的話就算是通過快進、跳集也要找到(抱歉、曝光了那一類人看劇的“貓病”)。

          騰訊視頻APP的“只看TA”功能,解決了看片專為偶像而來用戶的需求,選中“只看xxx片段”,后續會自動屏蔽與該明星無關的內容。因為感性的成分較多,“只看TA”功能對于單純追星的用戶來說,再也不用通過快進、跳集的方式去尋找相關片段,可無需任何操作沉浸式看片,給用戶帶來較強愉悅感和滿足感。

           

          158.「京東讀書」你用過橫屏時分欄閱讀嗎?

          產品體驗:

          在京東讀書的高級設置中,打開“橫屏時雙頁”開關,在橫屏閱讀時會變成左右雙頁的樣式,給用戶多一個選擇。

           

          設計思考:

          在報紙、刊物、出版物中,我們經??吹綄⒋罅康奈淖诌M行了分欄展示,其目的主要是便于快速閱讀。人們在閱讀大量的文字時基本都是不斷地從左到右-返回-從左到右……如此循環下去,當一行文字較長時,頭部和視線需要跟隨文字大幅度的移動,看完一行后,再用相反的動作返回下一行的開頭,費時費力費精神。而較小的行寬能讓一行文字在大部分情況下始終保持在目光范圍內,保證閱讀的完整性,提升閱讀速度。

          使用京東閱讀APP,在高級設置中開啟橫屏時雙頁(分欄),其實在用戶看書時并沒有多大作用,但根據少數用戶的視覺瀏覽喜好多提供了一種選擇。針對習慣、感觸各異的互聯網用戶,在不影響功能、視覺體驗的情況下,讓他們去選擇最適合自己方式,是滿足用戶需求的最佳之舉。

           

          159.「ETC車寶」如何在較少的空間展示更多的內容?

          產品體驗:

          進入ETC車寶“我的”頁面,會員版塊會出現抖動的效果,下滑可展開會員權益,上滑即再次隱藏還原。

           

          設計思考:

          用戶開通會員/購買增值服務是企業盈利非常重要的一大版塊,其固定入口大部分在“我的”頁面,為了引導用戶轉化的需要,也會合適的穿插在其他頁面、狀態、功能之中。因“我的”頁面需要給用戶提供常用的跟個人相關的功能,固會員版塊展示區域,基本上不能超出自己的那“一畝三分地”,也間接導致了因展示內容較少、吸引力不夠、轉換率較低的情況。

          ETC車寶的會員版塊展示區域同樣較小,但卻合理利用不同的交互方式在不占用太多頁面資源的情況下,展示了更多會員權益。進入“我的”頁面,會員版塊會出現抖動的動畫效果,其最主要作用在于動態比靜態更加吸引眼球,增加視覺關注度,利用輕交互動效來吸引用戶視覺焦點,增加點擊欲望。

          一般來說,除非用戶在目標非常明確的情況下,才會主動進入會員頁面,因為這關系著用戶的經濟成本。ETC車寶“我的”的下滑可展開會員權益,上滑即隱藏,既做到了不占用頁面空間,又額外給用戶展示了比較有誘惑力的會員權益,吸引用戶參與,勾起開通會員的欲望,同時也能在減少用戶操作的情況下,了解更多會員內容,最終達到增加轉化率的目的。

           

          160.「盒馬」金剛區-引導用戶直達目標、快速轉化

          產品體驗:

          盒馬APP將金剛區的入口直接做成了產品一級分類,用戶進入首頁,即可根據對應的需求快速到達指定位置,少了各種常規功能的彎彎繞繞。

           

          設計思考:

          常見的電商應用,大部分都是直接在底部標簽欄設計一個分類入口,而金剛區是一個頁面中頭部的重要位置,也是核心功能區域,其聚合了各類子板塊的入口,為各個子版塊分發內容引導流量,所以其重要性不言而喻。

          盒馬APP直接將金剛區設計成產品類型入口,其最主要的目的是引導用戶在最短的時間內找到目標,快速解決用戶需求,少了常規的套路和彎彎繞繞,多了一份效率。相比tab上的分類入口,更能促進用戶快速決策,避免用戶被其他內容吸引而產生新的想法,影響轉化。

           

          161.「美團」酒店住宿-評價功能的重要性

          產品體驗:

          美團酒店住宿詳情頁主圖的右下角,會特別突出該酒店的綜合評分和其中一條好評,點擊后可進入評論頁面,依然突出酒店評分,以及大數據下的住客偏好。

           

          設計思考:

          評價的目的更多是為了表達個人對于某問題或現象的看法以及思考,也會作為后來者是否購買該產品的重要依據,直接關系著店鋪的綜合評分。不難看出,用戶在購買某個產品時,除了價格之外,買家秀就是決定用戶是否轉化的關鍵因素(不是唯一),商家也會使用各種方法來提高好評率,其中就包括收到快遞后好評返現券、商家電話提示等??v然如此,評論功能也都只是提供一個的簡單入口或介紹完產品后象征性的展示最近兩條最新評論,還沒有上升到超級重要的程度。

          美團APP酒店住宿版塊則把評論(綜合評分)的重要程度提升了一個等級,將綜合評分和其中一條好評顯示在詳情頁主圖的右下角,用戶進入即可被快速吸引。住客都是以自身位置為中心,因距離的因素限制了諸多選擇條件,相比其他電商產品,評價似乎成了除價格之外的唯一決策條件,提高評價功能的等級,也是為了將對應的信息快速傳達給用戶,減少其思考時間,提升決策效率。

           

          162.「今日頭條」內容與評論區-高速直達

          產品體驗:

          在今日頭條的新聞詳情頁,點擊小氣泡圖標,頁面會自動跳到底部評論區,以供隨時查看、參與評論,再次點擊圖標,可回到之前未看的位置。

           

          設計思考:

          在擁擠的公交/地鐵上、忙里偷閑的上班時間里,我們偶爾會打開新聞APP來了解一些社會熱點資訊,增加知識視野及“吹水”能力,偶爾還會跟隨大流調侃一番。當被新聞中某個有趣的點刺激著自己的腦細胞時,會不自覺的進入評論區表達自己的想法或看看別人見解,很簡單,點一下底部(大部分底部懸?。┑臍馀輬D標就能直達。一番操作之后,要再次回到頁面剛才沒有看的位置就難搞了,因大部分新聞內容較長,靠下拉去查找基本不現實,且查找的時間越長,記憶力就會逐漸減弱,浪費更多的時間成本。

          今日頭條APP的新聞詳情頁面,在點擊圖標去到底部后,若想回到文中原來的位置,只需再次點擊圖標即可,避免通過調取大腦記憶滑動頁面查找而浪費大量的時間,還能防止用時過長而“斷片”,為用戶提供了便捷的路徑,減少不必要的誤操作,增加產品的易用性。

           

          163.「MONO」TAB欄圖標-植入品牌記憶

          產品體驗:

          MONO(貓弄)APP,底部tab欄圖標直接用名稱中的四個字母替代,以達到最大化品牌傳播的目的。

           

          設計思考:

          一個應用是否好用,其視覺(交互效果/任務流程/操作方式)占據很大的作用。tab欄作為整個應用結構的入口,也不例外,不管是精致的圖標、趣味的動效還是優秀的交互方式,其目的都是為了通過美觀的視覺,將產品想表達的內容清晰發反饋給用戶。

          MONO打破了以往其他應用tab欄的常規表現方式,將名稱拆解,即M、O、N、O以圖標的方式至于tab欄,用最直接的方式進行品牌傳播,讓用戶記住的并非APP里的某個功能,而是品牌記憶。雖然跟用戶所需要的美觀、親和力、趣味性等,似乎是反其道而行,但存在即為合理,通過品牌基因的融入,能讓產品帶有靈魂, 延伸品牌價值觀以及突出圖標特征來提高品牌曝光度,讓用戶看到產品的第一印象,就知道當前使用的是什么,當品牌元素在產品的各個層面合理復用時,也能增強用戶記憶,變相提升用戶粘性。

           

          164.「高德地圖」屏幕常亮-減少不必要的操作

          產品體驗:

          在高德的地圖設置中,開啟“開啟屏幕常亮”功能,即可在導航過程中保持設備屏幕常亮,避免猝不及防的息屏帶來安全不必要的麻煩和安全隱患。

           

          設計思考:

          平時我們在導航的過程中,如果長時間沒有觸碰手機會出現自動鎖屏的情況,因事發突然,若行駛在交通復雜且不熟悉的道路口,慌忙之中選擇解鎖手機查看、剎車減速靠邊或隨便駛入其中一個路口,不管何種選擇,都可能來不必要的麻煩及安全隱患。

          使用高德導航時,在設置中開啟屏幕常亮后,導航過程中能有效防止設備自動變暗或鎖屏,避免用戶在駕駛過程中手動調整設備或考慮突發事件造成大腦“開小差”,影響駕駛安全。屏幕常亮可以幫助用戶將更多的注意力放在安全駕駛方面,不會因出現息屏受到影響,從而提升安全系數。

           

          165.「嗶哩嗶哩」生日-通過閃屏給自己一個暖心的祝福

          產品體驗:

          在生日當天進入嗶哩嗶哩,啟動頁之后會出現一個暖心生日祝福+溫馨的閃屏,利用情感化的表現方式讓用戶在進入應用之前就能感受到友好的祝福,幾秒鐘后,自動進入首頁。

           

          設計思考:

          “生”是來到這個美好世界的一種方式,“日”是紀念降臨人間的日子。很多人都想在自己生日這天得到好友的祝福,只有在這一天才感覺到自己是真正的主角,聽到一聲“生日快樂”是對自己最好的期盼,被習慣性地祝福,即使這一天自己天犯了什么錯,也會被不同程度地原諒,因為我們知道,還有人記著、愛著自己。

          在智能設備普及的今天,我們身邊少了很多的朋友,但卻多了一個鐵友-智能手機,最初給我印象最深的就是在生日這一天,從早上開始,QQ的生日祝福消息就沒有斷過,雖然都是虛擬的禮物,但至少是自己的朋友(Q友)親手送出,還是無比的開心。而如今的微信、抖音、視頻等平臺成了手機必備,履行著我們可以沒有朋友,但不能沒有手機的原則。表面上看,我們似乎在和冷冰冰的機器交流,實則應用早已通過親和、情感、趣味化的方式成為了自己最忠實的朋友。

          在生日當天進入B站,系統會通過閃屏的方式給我們送上最真摯的祝福,溫馨的畫面+暖心的祝福語,再結合產品的特性融入情感化的設計,為用戶打造了一個有歸屬感且溫暖的“家”,為產品設計增添了人情味,并通過祝福的方式拉近用戶與產品間的距離感。如果自己的生日被所有人遺忘,多少會有些失落感,而B站用溫暖的方式傳遞愛與力量,也能撫慰每一個被情緒傷害過的靈魂,這也是鞏固用戶粘性與忠誠度十分巧妙的方式,一個小小的細節,就能感受到產品的溫度與團隊的用心,很大程度上提升了用戶對產品的好感度。

           

          結語:

          設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結能力,也為日后輸出優秀的作品當鋪墊,對自己的能力提升以及未來的職業發展帶來便利。

          本期產品設計細節分享結束,我們下期再見。

           

          原文地址:能量眼球

          作者:大漠飛鷹CYSJ

          轉載請注明:學UI網》產品細節剖析,提升用戶體驗就差這一點!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          量化設計價值(三) 如何創建體系化的監控系統

          seo達人



          隨著用戶體驗設計的發展,我們已經過了僅依賴需求和直覺就可以完成產品設計決策的階段了。數據對用戶體驗設計師的價值可以總結為兩點:1. 數據可以在「產品設計決策階段」提供了更多元的參考意見;2. 數據可以在「產品設計復盤階段」提供更客觀的評價標準。

           

          數據使用的場景

          無論所處哪一種設計階段,總的來說設計師的數據需求主要可以分為兩大類:

          圖片

           

          1.探索事物間關系的“內因/外因”:

          是什么東西影響了用戶的購買決策 ?我的新版網站首頁的改版是否為產品提升了注冊的轉化率 ?這類需求的本質是探究一種事物間的歡喜和因果性,常用「推論性統計」、「相關&非參數校驗」進行分析。對于這類需求,往往會有專業的數據分析師,用戶研究設計師,數據產品經理承接。

           

          2.發現數據中的“模式/異?!保?/strong>

          在一天之中隨著時間的變化,用戶的訪問量有什么規律 ?這類需求的本質是在對已經發生的事物規律做一種總結 ,使用的統計方法更多的是「描述性統計」。對于絕大多數設計師而言,能夠做到發現數據中的 “模式/異?!?基本可以覆蓋絕大多數日常工作的需求。

          本文主要關注解決設計師的第二類使用場景——發現數據中的“模式/異?!?。目前各大互聯網企業內部都會提供自研或者第三方的BI工具,因此筆者建議設計師可以通過建立一個包含關鍵的體驗指標的數據看板系統,對自己負責的業務進行系統的總結和復盤。

          以我曾經的工作內容為例,我們的產品是服務商家進行“前后端對接生產”的訂單審核系統。【效率】是制造業至關重要的關注面,在一個企業用戶的付費決策中也起到了相當重要的分量,客戶使用我們的工具進行訂單審核和流轉的效率是整個用戶體驗模型中的重要部分。

          因此我們需要構建一系列合理的指標來判斷訂單系統的處理效率。除【效率】外,【用戶行為】【用戶特征】等都是設計師關系的信息。以【效率】為起點,最終我們構建了一個籠統的包含設計師所有要監測的信息看板系統

          圖片

           

          關鍵概念

          本質上互聯網產品中的看板(kanban)與自然科學領域研究人員的用 R 或者 Seaborn繪制的精美圖表沒有本質上的區別,差異點可能在于看板更加關注時效性,同時更加具備可交互性。

          隨著儀表盤工具和各種BI軟件產品在人群中的普及,人們對儀表盤,指標(Metric)和關鍵績效指標(KPI)的組成有不同的理解。為了確保我們都說相同的語言,我將定義一組術語,這些術語將構成我們討論的基礎:

          • 度量(Measure):度量是一段數字上可量化的數據。銷售額、利潤、留存率,都是具體衡量的例子。
          • 維度(Dimension):維度表示給定指標的不同方面屬性。例如,時間通常被用作分析不同度量的維度。其他一些常見的維度包括地區、產品、部門、細分市場等。
          • 層次結構(Hierarchy):維度可以進一步分解為層次結構。例如,時間維度還可以形成層次結構,例如 年>季度>月>日。
          • 粒度(Grain):層次結構中的每個級別都稱為維度的粒度。例如,年 > 季度 > 月 > 日 ,中的“年”是一個特定的粒度。
          • 指標(Metric):指標是我們經常在儀表板中顯示的數據類型,它表示一個度量Measure)的數據段與一個或多個特定維度(Dimension)和相關粒度(Grain)的關系。

          圖片

          上圖是在Tableau中一個標準的指標示例-“每周銷售總額” 的構建方式。在這個指標中,我們需要量化的“”是美元——即總銷售額,用來觀察量化數據的“維度”— 即時間,而時間維度可以被進一步分解為“年>季度>周”的層級結構“每周銷售總額”需要關聯的維度中的特定“粒度 ——即周。

          • 看板(Cards or KanBan): 觀察一個或多個指標(Metric)運行情況的圖表
          • 儀表板(Dashboard): 儀表板是多個圖形,圖表,量表或其他直觀表示的集合。多個看板可組成一個儀表板
          • 報告(Report): 報告可以是對應圖表和其他可視化的表示,也可以是可能直接相關或不直接相關的大量圖表和可視化。多個儀表盤可組成一個報告。

          圖片

          “實時、受眾群體、流量獲取、行為……” 上圖為Google Analytics 中提供的多種類型的數據分析報告,報告可以非常廣泛地涵蓋廣泛的相關信息。每一種特定報告內包含了若干個回答特定問題的dashboard,一個dashboard內可以包含多個相互關聯的指標的看板。

          一個可分析、可追蹤的數據系統中,最原子的構成單位理解成一個“看板”。如何從0-1構建一個客觀有效的數據看板系統?我們可以類比【一個人學習做菜】的過程,做菜的過程可以總結為三個階段:

          1. 學習菜譜&列一個采購清單
          2. 采購食材&烹飪食材
          3. 擺盤料理&品嘗美食

          對應到數據看板系統的創建,我們亦可以總結為三個階段:

          1. 了解數據的特性、明確自己需要哪些數據
          2. 通過技術手段獲取數據、將粗數據加工成意義明確的指標
          3. 將指標數據可視化,觀察數據并嘗試分析現象

          圖片

           

          度量Measure & 維度Dimension

          “ Data is more than numbers, and to visualize it, you must know what it represents. ”

          數據不僅僅是數字,數字、數組、表格、都可以被稱之為數據。要將數據形象化,你必須知道它代表什么。為了構建有效的效率指標,第一步是:明確為了解決當前的問題,要觀察的【度量】是哪些,以及這些度量又需要從哪些【維度】進行觀察。

           

          了解數據類型

          一個線上的項目每天都在收集成百上千種數據,怎樣確定自己需要什么數據作為 度量(Measure)呢?首先值得注意的是,不是所有類型的數據都適合作為度量Measure)被加工成指標。
          不同學科,不同課程,不同領域,對于數據類型的定義基本一樣,但稱呼并不完全一樣。統計學中,數據類型分為四種:定類,定序,定距,和定比。這四種類型是從低到高的遞進關系,高級的類型可以用低級類型的分析方法來分析,而反過來卻不行。

          圖片

          定性數據與定量數據

           

          從宏觀角度分析,數據類型分為 定性 和 定量 兩種。一個通俗的例子,以自身為例:例如衣服的顏色,頭發的類型和鼻子的形狀這些標識標識的是定性數據;例如身高,體重,年齡和鞋子的尺碼,這些可測量的是定量數據。

          1.定量數據

          定量數據是統計數據,通常具有自然結構性意味著它更加嚴格和明確,可再細分為連續/離散兩種。此類數據使用數字和值進行測量,這使其更適合進行數據分析??梢酝ㄟ^以下方式獲取定量數據:

          • 測量
          • 實驗
          • 調查
          • 市場報告
          • ……

          2.定性數據

          定性數據是非統計數據,本質上通常是非結構化或半結構化的。定性數據可以用來問“為什么”的問題。它是調查性的,在進行進一步研究之前通常是開放性的。從定性研究中生成的數據用于理論化,解釋,發展假設和初步理解??梢酝ㄟ^以下方法獲取定性數據:

          • 文字和文件
          • 音頻和視頻記錄
          • 圖片和符號
          • 訪談筆錄和焦點小組
          • ……

          想要了解訂單流轉的效率是怎樣,最簡單的方法是通過和我們的客戶進行面聊一下使用情況并記錄一下反饋,但這樣的產物并不方便進行統計分析和展示。盡管有一些對定性數據“結構化”的方法,比如對定類數據進行的非參數校驗,但實施起來成本較高。定量數據因為本身結構化的特點更適合分析,因此在這里建議設計師在構建自己的dashboard系統時,需要跟蹤分析的數據盡量選擇定量數據。

           

          確定需要觀察的度量&維度

          明確需要觀察的度量有哪些,首先需要從要解決的問題出發。但是沒有一個整體的分析模型,往往會導致我們的分析遺漏很多信息和細節,導致數據分析師無法理解彼此的需求,最終導致最后產出的看板難產或答非所問:

          使用的問題分析工具—— KPI wheel

          在這里介紹一種名為KPI Wheel的簡單工具,可用于收集將用于定義和可視化指標的前期必備信息。您可以將 KPI wheel 的圖片打印在紙上,然后開始嘗試依次思考這四個方面:

          1. “ 要解決的問題是什么”
          2. “誰在關心這個問題?”
          3. “我需要去哪里獲取這些數據?”
          4. “為什么這個數據很重要?”

          在解答的上述的幾個問題的過程中隨手記錄:

          (1)可能引發什么進一步的疑問

          (2)使用此信息可以采取什么行動或決定。

          不斷的提出問題并進行進一步分析,這么做的目的是讓用戶不斷分解問題,直到他們有足夠的信息來采取行動或做出決定。經過幾輪完整的分析后,用戶就可以大致確定指標的「度量」和 所需要的「維度」。

          圖片

          以我曾經的工作內容為例:我們的產品是服務商家進行“前后端對接生產”的訂單審核系統,我們需要構建一系列合理的指標來判斷訂單系統的處理效率。以下是與產品經理討論過程中的具體流程:

           

          第一輪 KPI Wheel ——

          1.Answer KPI Wheel:“ WHAT?WHO? WHERE? WHY? 

          • what:我們需要一種途徑了解用戶進行訂單審核的效率如何

          針對這個問題我們聯想到:

          1.想要了解訂單處理效率,首先需要定義什么叫訂單的效率;在行業中有一種叫做「訂單生命周期」的專有名詞來表示訂單從創建到結束的時長,是一個可借鑒的概念

          2.針對我們的業務,一個工單的生命周期經歷了從創建-流轉&審核-通過,一個工單從創建到通過所經歷的時間是我們需要記錄的【度量】

           

          • who:產品/運營/設計 三個業務方都關注訂單的效率

          針對這個問題我們聯想到:

          1.對于不同的角色,在檢測數據的時候都關注哪些維度?

          2.訂單類型分審核單&生產單這兩種,兩種類型的訂單,訂單類型是一個必要維度

          3.時間是上述三個相關方都需要關注的維度,一個訂單在通過審核時的時間,是一種重要的分析維度;而“時間”維度,我們可以繼續拆分為: 年-月-周-日 的層次結構

          4.對于運營,了解不同行業的商家的訂單效率對進行深入運營是必要的。而”行業”維度根據分類方式的不同,又可以歸類為一級行業(軟裝設計/板式家具/…),二級行業(整木定制/辦公家具定制/暖通/地板/瓷磚……)

          4.對于產品,為了更好的維護客情,對于特定的大客戶的數據需要重點關注。因此商家賬號的ID,也是重要的分析維度。

           

          • where:我們需要的數據要在哪里獲???

          針對這個問題我們聯想到:

          1.與一般的用戶行為數據不同,訂單的數據都儲存在后臺的操作日志中

          2.需要的”行業”維度,可以復用其它團隊已經制定好的標簽

           

          • why:效率是企業的生命,制造業中存在各種效率指標,如“人效”/“屏效”等。糟糕的使用效率會造成我們的產品在根本上是不可接受的,因此效率指標非常重要

          針對這個問題我們聯想到:

          1.通過【訂單生命周期】統計的時間,可以在整體上評估訂單系統的流轉效率。但是僅僅依靠一個這樣的指標,缺少一些更細致的視角??梢栽黾訉Ψ桨福ㄓ唵蔚妮d體)的停留時長的統計,來計算審核在整個生命周期中所耗時間的占比。

          2.The Rising Questions & Action:“ 根據問題1的答案,這還會引發什么其他問題,或者您將采取什么行動?”

           

          在回答上面的4W的過程中,會引發其它衍生問題,例如 “訂單審核周期的時間的最小單位是什么?”  等等。針對上述的其中衍生問題,可以再進行一輪kpi wheel的自問自答。比較簡單的衍生問題,不需要4個方面都進行問題分析。

           

          最終 

          在多次重復上述的兩個過程后,最終我們確定了要在產品中量化哪些 度量(Measure),以及這些度量需要哪些分析維度,并將所有需要的度量和相關的維度都用表格的形式記錄下來。

          例如,‘訂單從創建到最終通過的時長(h)’,是一個需要被量化的度量。它需要關聯的維度(Dimension)有時間、商家ID、一級行業、二級行業。

          圖片

           

          指標Metric

          研究完成菜譜,記錄采購清單后,接下來的帶班過程就是準備食材并進行烹飪。當你已經明確了要觀察的 度量(Measure)、和需要關聯的維度(Dimension),下一步就是通過數據建設獲取這些度量,然后將度量加工成指標。

           

          建設埋點

          獲取度量的過程就是取數’的過程。想要創建看板,數據分析師需要通過各種方式獲取一張包含所有你需要的信息的寬表。如何獲得這張包含一切關鍵信息的表格?我們需要借助埋點獲取數據。

          所謂埋點就是在應用中特定的流程收集一些信息,用來跟蹤應用使用的狀況。您可以把用戶在與您的網站或應用互動時觸發交互行為理解為一個 “ 事件 ”,一個時間存在一個觸發的條件,當達到這個觸發條件后就會上傳請求,請求中會攜帶需要的 “ 參數 ”。

          例如“用戶點擊按鈕將商品加購到購物車”這個行為,每次用戶觸發這個行為后都會發送一個請求,而這個請求中會記錄:1.加購商品的金額/2.加購商品的類型/3.加購商品的商品ID…等信息。這些結構化的信息構成了我們需要的度量(Measure)與 維度(Dimension)。

          在完成了最基礎的埋點后,我們就獲得了最基礎的數據。

          圖片

           

          如何建立有效指標建議

          “指標”是量化衡量標準,未經加工的數據不具備可觀察的價值。通過埋點,我們單純只是得到了若干張包含所有用戶信息的巨型表格,我們是分析不出什么有用信息的。為了更有效的去觀察和分析作為度量Measure)的數據,就需要對埋點數據進行一定的加工,變得更加易于理解和表達。

          當一個度量Measure)的數據段與一個或多個特定維度(Dimension)之間互相聯系了起來,度量就成為了指標。例如,同樣的一份關于【訪問用戶人數】這一度量,可以根據關聯的時間維度的不同,創建 DUV 和 MUV 等多個不同的指標。

          如何創建一個有效的指標,結合筆者的工作經驗,下面給出三點建議:

           

          (1)為一個指標設想一個高級概念:

          • 首先指標的名稱需要客觀,要讓人乍一聽就能大概會意,例如:「加購商品操作每日點擊次數」。而如果您定義的是類似:“軟件上手度”,這種概念比較晦澀、在業內又沒有約定俗成的定義的指標,可能需要重新考慮概念是否恰當。
          • 每周訪問站點的用戶總數/ 每日訪問站點的用戶數/ 每日訪問站點的新手用戶數…,這些指標即相互獨立,但反應的又是同一件事的客觀熟悉的時候,我們可以把這些詳細的指標統一用一個高級的指標概念來做一個歸納,例如“站點訪問用戶數”

          圖片

           

          (2)檢查并確定定義指標的細節:

          • 確定了指標的基礎概念后,需要檢查一遍指標的細節。
          • 例如,“訂單生命周期”這個指標的定義中,生命周期是指一個訂單從創建到最后通過審核耗時,而與其關聯的維度有時間,訂單類型等。需要強調的是,一個訂單可能會存在:創建時間、通過時間,這兩種不同的時間戳。而在“訂單生命周期”這個指標我們需要關聯的時間維度是【通過時間】。如果關聯是【創建時間】,則會得到另外一種完全不同的生命周期計算方式。

          圖片

           

          (3)將測量到的度量數據,通過計算總結為一個指標:

          • 通過埋點收集到的是大量的數據,是一個巨大的整體,而指標則是描述總體特性的參數。而把原始數據組織并總結成更易處理的形式的技術叫做描述性統計,一種最常見的方法是通過計算平均數的方法總結一組數據。
          • 這些描述總體特性的參數中又存在不同的用途,有的用來描述頻數分布,有的用來描述集中趨勢:平均數,眾數、中位數,有的用來描述變異性:四分衛距、方差。我們需要根據自己的用途選擇合適的統計方式來構建指標。

          圖片

           

          根據統計方法的不同,常見的指標類型有以下幾種,他們擁有不同的分布類型和方差的計算公式

          • 【 計數 Count 】
          • 【 概率 Probability 
          • 【 平均數 Average 】
          • 【 中位數(或其它位數)Percentile
          • 【 比率 Rate 】
          • 【 一般比例 Ratio 】

          圖片

           

          可視化 Visualize

          烹飪好食材之后,接下來的工作就是擺盤與上菜。優秀的擺盤可以讓料理更加精致和高級,優秀的數據可視化可以幫助我們更好的觀察與分析數據,反之糟糕的數據可視化可能會讓我們丟失很多重要信息。

           

          Why visual ?

          為什么一定要使用看板(圖表)來觀察和分析數據?僅關注幾個關鍵指標的數據是否就已經足夠?

          使用看板對指標進行觀察和分析的意義在于:相比單純的數字,圖表可以攜帶更多的展示維度(大小、長度、顏色、面積…),能幫助我們多維度的觀察數據、避免疏漏。

          例如,安斯庫姆四重奏(Anscombe’s quartet)是四組基本的統計特性一致的數據,但由它們繪制出的圖表則截然不同。如果僅依靠基本的統計特性來觀察數據,我們很容易忽略一些重要信息。

          圖片

           

          選擇合適的圖表類型

          BI工具中支持多種圖表類型,比如展示瀏覽路徑的“?;鶊D”、展示轉化率的“漏斗圖”,甘特圖、散點圖等。如何選擇合適的圖表來展示并分析你的數據可以參考下圖:

          圖片

          圖表種類繁多,但只要掌握其中的一小部分就能滿足絕大多數需求。對于大部分設計師,以下3種最基礎的圖表類型是最常用的:

          1. 條形圖:是最常用的圖表類型。條形圖易于閱讀,我們用眼睛比較條形圖的末端,很容易快速得出結論:哪一類最大、哪一類最小以及類別之間的增減區別。
          2. 線圖:最常用于繪制連續的數據。因為線連接了點,這就暗示了點與點之 間存在著離散數據(一系列數據分隔成不同的類別)間沒有的聯系。通常,連續性數據都以時間為單位:天、月、季度和年度。
          3. 餅圖:在總量間各部分的占比時比較高效

          最后,當我們創建了許多看板后如何進行歸納?我們可以將關注相同的問題的看板歸納在一起,就形成了一個關注同一類問題的Dashboard;對不同的 Dashboard 提取共性,將同一個業務的不同Dashboard組織起來,就形成了一個Report。一個Report內可以籠統的包含當前業務需要關注的所有信息。

          圖片

          例如:【訂單生命周期】關注的是企業的訂單效率問題,但并不是唯一關注效率的指標。另外還有諸如:“審單員平均審核時長”這樣的人效指標的看板,這些看板同樣反饋的是訂單的效率。我們將關注相同的問題的看板歸納在一起,就形成了一個Dashboard,Dashboard內的看板與指標都有關注同樣的問題—效率。

          除了效率,身為設計師的我們還需要關注很多其他的問題:比如使用的用戶的特征、流量的來源、用戶發起的行為等等,這些問題都可以擁有自己獨立的Dashboard。最后這些Dashboard組織在一起,就成為了一個支持系統的觀察分析當前業務的體驗指標的完整報告。

           

          觀察與分析數據

          “ 我們需要的不是數據 , 而是數據告訴我們的實事 ”。通過建立一個系統的監測體系的目的主要是為了從數據中探索:模式/ 異常。不管圖表的形式是什么,我們都需要留心觀察這兩者。

           

          1.何為「模式」:

          模式即數據中的某項規律。比如機場每月的旅客人數,雖然隨著時間推移變化不定,但是通過幾年的數據對比,我們可能發現旅客人數存在著季節性或周期性的變化,某些月份的旅客數量一致偏低/某些月份則一直偏高。

          圖片

          根據數據畫像我們可得知某個產品的成熟期用戶占絕對多數的現狀,

          了解了這個「模式」就可以更好的制定符合絕大多數用戶心智的設計策略

           

          2.何為「異?!梗?/strong>

          異常即問題數據。異常數據并非是錯誤數據,也有可能是設備記錄或人工錄入數據時,出現的問題。我們通過異常異常分析,一方面可以分析異常原因;一方面可以發現現有系統的漏洞。

          圖片

          蘋果公司通過監控異常值、發現了位于深圳的AppleCare灰色產業,

          進而改善了AppleCare的產品策略,避免了巨大的損失

          最后在觀察分析數據的過程中,有三個需要特別關注的數據的特性不要忘記:

          • (1) 數據具有可變性(VARIABILITY)

          數據的可變性這一重要的特性讓我們可以從數據中獲取規律和關系。如果您構建的指標本身并不具備可變性了,那您很可能需要嘗試其他指標進行跟蹤和分析。

          • (2)數據具有不確定性(UNCERTAINTY )

          很多數據都是只能提供一個估計而不是絕對準確的數量。例如:分析人員通常會通過樣本的數據,進而對整體的數據分布進行進行猜測。

          • (3)數據需要聯系上下文( CONTEXT )

          數據分析離不開情境。我們知道,數據的產生必然是有其情境的,不過統計數據時,我們通常都要剝離情境;而當我們進一步分析數據時,又必須回到具體的情境中去。

          例如:某個羽絨服經銷商發現某一年冬季的銷售額產生了明顯的下降,這本應該是一個異常的信號,但我們不能簡單粗暴的定義這是一個糟糕的數據。因為實際上,銷售額下滑的哪一年是一個暖冬,且和同類的競品相比自己的產品銷售額下滑趨勢的更低。結合情景分析數據,往往能得到意想不到的結論。

           

          本文參考文獻:

          文章:Dashboard Design: Key Performance Indicators and Metrics —— Thomas Gonzalez文章:【統計學】區分定類、定序、定距、定比變量——YYIverson書籍:Tableau:數據可視化之極速BI —— 沈浩書籍:Which chart or graph is right for you?——Tableau圖表白皮書

          書籍:Data Points:Visualization That Means Something  —— Nathan Yau

          書籍:Storytelling With Data —— Cole Nussbaumer Knaflic

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:曉虎

          轉載請注明:學UI網》量化設計價值(三) 如何創建體系化的監控系統

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          詳解|組件庫可以替代 B 端設計師么?

          seo達人


          有很多同學跟我說,自從 Ant Design 的組件變得越來越完善,自己也越來越不知道 B 端設計師的工作意義和價值是什么了。其實除了 Ant Design,還有很多常見的、優秀的組件庫,都為 B 端設計和開發的工作提供了便利。那么使用組件庫真的可以替代 B 端設計師么?當然不能。B 端設計師有其存在的獨特價值,本文就跟你聊聊組件和設計師之間的關系

           

          圖片

           

          1 . 組件是「效率」工具

          組件是工具,用來為設計師和開發提升工作效率。上文中所提到的 Ant Design 的初衷也并不是要做一款替代設計師的組件庫,其根本目的之一也是提高整個團隊的工作效率。使用組件可以從兩個方面提效:

          (1)工作內容上:可以將不必要的、重復性勞動的時間節省出來

          (2)工作流程上:便于設計師與前端開發做交接和協作,節省溝通成本

           

          2 . 組件是「質量」保障

          使用組件,可以在一定程度上保證設計工作的質量。組件規范了前端和設計師的工作方法,建立相對底層的系統,設定了設計和開發的質量底線。

          圖片

          基于組件規范,設計和開發的產品更容易具備:

          (1)一致性:具備相對一致的表現樣式,設計風格和交互體驗上均可保持統一

          (2)可用性:對于用戶操作,可以保證最基本的可理解性和可操作性

          (3)審美性:符合基本審美標準,雖不會很亮眼,但也不會很難看

           

          3 . 設計師要「沉淀」業務組件

          B 端設計師可以嘗試沉淀有針對性的業務組件。很多業務領域有其獨特性,比如金融類組件和政務類的產品頁面列表內容就有很大區別。單一的元素組件在應用的過程中是可以被再次組合和沉淀的。

          舉個例子,我在做業務需求設計時,相比于 Ant Design,其實更常用的是 TechUI —— 它是建立在 Ant Design 基礎上的、由我們螞蟻的設計師通過對業務需求的提煉、組合和封裝,做成的一套于螞蟻自己的【業務組件】。

          二者的區別是:

          • Ant Design:是所有人的,是通用的,是單一的原子級別的(比如一個輸入框)組件。
          • TechUI:是螞蟻自己的,是私有的,是組合的區塊級別的(比如一整個表單)組件,更具備螞蟻集團自己的業務屬性。

          圖片

          針對你公司不同業務類型,沉淀出不同種類的區塊級別的組件,這類組件使用起來也會更加得心應手、加倍提效。這也是 B 端設計師可以去學習和精進的一點。

           

          4 . 設計師要「洞察」業務訴求

          使用組件,可以讓設計師把節約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設計師之一,坦白的說,即使你的設計稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗上始終可以更進一步。

          B 端設計師應該更多去關注對用戶需求和業務邏輯的深入挖掘,不僅僅是在界面細節的表現手法上下功夫,還要學會站在全局,用系統性思維看待每一個項目,為整個產品的系統流程做優化,做更全面的產品體驗升級。

           

          5 . 設計師要「放眼」B 端未來

          隨著技術的發展和迭代,B 端產品的發展也呈現出多元化趨勢。我列舉以下幾個方面,用于思考和拓展設計師的邊界:

          (1)承載媒介:多端化設計需求增多

          B 端產品的應用領域日漸廣泛,各類終端設備普及,設計師需要更多的探索設備的應用場景。如點餐系統、收銀系統、AR、VR 應用等等,最近鴻蒙系統中演示的多端聯動,也可能是未來的趨勢之一。

          圖片

           

          (2)工作流程:中臺策略 / 組件化設計

          它是一種提效的工作方法。中臺策略適用于公司層面,我們上文提到的組件化設計更適用于團隊。

          圖片

           

          (3)用戶體驗:重視用戶個性化和體驗

          B 端設計越來越重視用戶體驗,提供個性化的配置方式,并考慮無障礙設計領域。很多 B 端的應用和業務也在逐步開放給 C 端。 例如企業微信在 2019 年打通了個人微信和企業微信的壁壘,釘釘從 2020 年也開始在 C 端發力。

          圖片

           

          (4)視覺表現:數據可視化設計

          需求多來源于政府、企業的定制化需求,更偏向于對數據呈現效果的打磨和優化,能夠展示和分析數據中的關鍵內容,形式與內容需要高度一致,才會達到良好的展示效果。

          圖片

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》組件庫可以替代 B 端設計師么?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          庫存領域的業務——庫存模塊

          資深UI設計者

          導語:近期公司需要把一個事業部的發貨及庫存相關業務實現線上化,在我們部門內部進行業務調研及充分討論后,庫存中心的產品規劃方案基本確定,本文把我們實戰過程中的方案分享給大家,期望能夠為讀者在設計庫存模塊時提供些許思路。


          01 場景說明

          XX事業部主要業務以化工貿易為主,在市場上對部分產品處于核心地位。XX事業部自己不進行產品生產,主要提供營銷服務,倉庫、物流均以整合社會資源為客戶提供服務為主。整體的業務流程如下:

          1. 客戶自己在平臺下單,或業務員代客戶下單,提交訂單時需要判斷發貨倉是否有足夠的貨物發出。
          2. 內勤確認訂單無誤后,進行發貨操作,業務要求后期需要進行自動發若客戶有特殊需求則需要指定具體批次貨物進行發貨。
          3. 根據發貨單,由倉庫人員處理出庫,并進行實際的庫存扣減。
          4. 物流人員根據發貨單中的收發貨信息安排承運商進行配送,并回收配送相關狀態。
          5. 在客戶需求變更或配送的貨物發生異常情況時能夠進行售后申請,把貨物進行相應處理。
          6. 對于庫存管理人員要求能夠定時進行庫存盤點,能夠及時發現庫存貨物由于一些管理上的異常情況而導致貨物數量異常的情況。
          7. 貨物需要定期進行存貨核算以及倉儲費用結算。

          在整體的業務模式中主要可分為以下三種貨物供應模式:

          1. 計劃性的向供應商采購貨物后進行備貨,再銷售給客戶。
          2. 在客戶下單時若除常規備貨的商品外還有其它貨物需求,可由銷售反饋給采購后進行零采。
          3. 向兄弟公司調貨銷售給客戶(具體可分為對方公司直接發貨給客戶和由銷售公司發貨給客戶兩種方式)。

          在庫存管理的業務中,事業部相關人員要求需要及時知道有多少貨能夠進行銷售,其中有多少是已經在倉庫可以隨時發貨,有多少可能是已經采購但貨還在配送過程中,還有一些可能是產品管理人員能夠預測未來會到貨的貨物數量。

          02 業務分析

          通過對上述場景進行分析后,我們能夠把和庫存配送相關的業務進行如下分類:發貨業務、出庫業務、到貨計劃、入庫業務、庫存管理業務、調撥業務、售后處理、其它出入庫業務。

          整體的業務架構圖如下:

          產品設計:庫存模塊

          在整體的業務架構中,各個部分具體的使用角色以及所需要負責的業務具體如下:

          發貨:一般由銷售助理/內勤人員完成,其主要任務是執行銷售訂單,在客戶沒有特定要求下,可以設置為系統自動生成,按先進先出的規則進行批次匹配,在客戶對批次有特殊要求下需要人工干預,選擇對應批次的貨物發給客戶。

          注:在化工行業不同批次貨物其性質會有所差異,故客戶會有一些特殊要求。而發貨單也是事業部對接倉庫、承運商的單據,倉庫根據發貨單進行貨物分揀并以發貨單與提貨司機進行匹配,防止貨物錯發,同時物流調度人員也會把發貨單分配給具體的承運商,承運商下的司機根據發貨單到對應的倉庫進行提貨,并配送到對應的收貨地址。

          出庫:公司以出庫單為依據影響庫存,同時也根據出庫單生成實際發生的應收。主要分為銷售出庫、退貨出庫、調撥出庫、其它出庫。銷售出庫主要為根據發貨的實際情況進行庫存扣減,是記錄貨物從真實的從對應的倉庫中已經發出的憑證;退貨出庫主要為記錄售后需要進行退貨處理的記錄憑證,把退貨業務放在出庫單中進行記錄有一個好處就是能夠直接通過負數的單據關聯原有單據進行沖銷,而根據出庫單生成應收后也能直接進行應收沖銷,由此不會改變財務核算的邏輯;調撥出主要記錄跨組織調撥、轉庫調撥等情況,能夠記錄清楚該出庫時由哪家公司發起調撥而產生的,最終能夠反映在內部結算上;其它出則包含了盤虧出、報損出等不同的情況。

          退貨質檢:主要記錄在客戶把貨物發回到指定地點后到貨物再次入庫之間的業務信息。能夠在該單據上記錄貨物異常的情況以及責任所屬。

          到貨計劃:主要用于記錄計劃性采購訂單貨物接收計劃,能對在途可售庫存進行管理。到貨計劃需要記錄貨物是否可售,到貨具體的時間、數量、位置等信息。

          入庫:入庫單能夠直接影響庫存,同時能夠根據入庫單生成實際發生的應付;主要分為采購入庫、退貨入庫、調撥入庫和其它入庫,具體邏輯和出庫類似。

          庫存邏輯:主要分為庫存設置、明細、庫存量和庫存報表。庫存量的定義和具體邏輯是該部分最為復雜的業務,在討論庫存量前我們需要明確幾個定義:

          • 現存量:指倉庫(可以是虛擬倉)中實際存放的貨物數量,理論上能夠進行實際出庫的貨物數量,有些文檔中也稱之為物理庫存、賬面庫存。
          • 在途可售:指貨物未在倉庫,當時也能夠銷售的庫存,支持外部采購在途、內部調撥在途。
          • 待發貨量:指已經下單需要進行發貨的貨物數量,支持銷售待發、調撥待發。

          以上三個庫存量均有實際單據進行對應,由于我們需要管控到批次基本,所以我們需要同時在SKU和批次兩個維度進行庫存量的記錄,在途可售不需要在批次維度進行記錄。

          基于此我們通過計算得出我們能夠用于銷售的可售量,再通過一些庫存分配策略我們就能實現很好的庫存管理,例如:可設置預留量20%,各個渠道設置不同的數量,各個渠道可售數量之和可以大于總庫存,但每個渠道的庫存則不能大于最大可售量。我們也能夠設置相應的庫存預警機制,在庫存低于一定比例是能夠進行預警或者是限售。

          03 功能設計

          通過對具體的業務進行分析后,我們即可對產品功能進行詳細設計,根據業務的實際情況,整體的功能結構如下圖:

          產品設計:庫存模塊

          從業務分析中我們可發現主要涉及兩個領域的業務:物流配送領域和庫存領域,物流配送領域我們暫且不做具體的功能設計說明,對庫存中心整體分為四個大的模塊:出庫管理、入庫管理、庫存管理、其它管理。

          出庫管理主要滿足庫存扣減相關的業務場景,例如:銷售出庫、調撥出庫或其他出庫,但有一種特殊情況就是售后退貨也是放在出庫模塊,主要是出于財務核算邏輯考慮,如果公司財務核算是應收和收款核銷,應付和付款核銷,沒有應收和應付核銷的模式,那么售后退貨就應該用出庫模塊解決,如果公司由應收和應付核銷的模式則也可以把售后退貨放在入庫模塊;但第二種模式會增加財務核算的難度,同時在進行庫存統計是也會造成入庫數據虛高,實際出庫不足,主要還是看具體業務的模式。

          由于我們服務的事業部暫沒有做應收和應付核銷的模式所以我們就采用了第一種方式,而對于出庫單之前是否一定需要有發貨單也是要根據具體業務進行規劃,如果倉庫管理、物流配送都是自己公司內部完成,也可以使用出庫單+配送單的模式進行處理。

          由于我們的業務是物流配送和倉庫管理都是外包給第三方所以對外是以發貨單為標準單據進行管理,所以出庫單只是發貨單的具體執行情況的記錄。

          入庫管理主要滿足庫存增加的相關業務場景,例如:采購入庫、調撥入庫和其它入庫,同出庫一樣在采購發生退貨時也是以入庫單的形式進行處理,如此設計的理由和銷售側是一樣的。

          對于庫存管理,則屬于庫存中心最為核心的業務模塊,根據業務分析中的相關概念,我們把單據對庫存的影響整理一張圖:

          產品設計:庫存模塊

          上圖中有一個核心公式:可用量=現存量+在途可售-待發貨量,由于化工行業的產品有分批次的特性故需要考慮SKU級的庫存結構設計和SKU+批次級的庫存結構,批次級的現存量合計一定要等于SKU級的現存量,而待發貨量則不一定相等;在提交訂單時(提交或支付)以SKU級的庫存(不考慮庫存分配規則)進行校驗即可,在進行發貨時則需要同時滿足訂單上的可發貨量和SKU+批次及的可用量以防止超發或者超賣。

          在SKU級的可用量的基礎上我們可以根據具體的業務設計庫存分配策略,庫存策略以可分為預留和可售,預留則表示不對外進行銷售,可售又可按渠道、活動級其它邏輯進行分配,各個方式之間的總和可超總可售量,但每種方式不可超總可售量,通過如此設計我們可以最大限度利用庫存,而避免出現超賣現象。

          庫存的核心計算邏輯主要在圖示藍色部分,基本上把各種單據對庫存的影響都羅列進去了,但以上的整體邏輯還是基于有貨(或在途)的情況下開展的,但還有一種特殊情況是該邏輯不能覆蓋的即預售/期貨模式,預售/期貨模式是以銷定采的模式,是在確定了銷量的情況下再去進行集中采購;所以對于預售/期貨模式 我們需要單獨設計一個虛擬庫存的模塊,而該模塊根據實際經營可以輕量級的方式在商品中心進行實現,最終在進行貨物交付的時候在通過出庫單進行管理即可。

          在庫存中心還有庫存預警、盤點、期初處理等功能,在此不一一展開說明,大家可根據自己的實際情況進行產品功能設計。

          04 總結

          庫存領域的業務是一個相對比較專業和復雜的領域,市場上也有十分之多的傳統軟件或SaaS,在很多企業認為通過采購的方式去部署一套軟件性價比會比自建庫存中心要高。

          但筆者認為在數字化轉型的浪潮之下,通過數字化的工具提升供應鏈的效率、降低供應鏈管理的成本一定是一個十分之重要的目的之一,營銷測的數字化轉型大多數企業已經通過消費互聯網認識到了其價值,我想供應鏈測的數字化轉型在接下來的這幾年也一定會逐漸顯現其寶貴的價值。

          傳統的庫存管理軟件不管其架構還是對業務的實現都有其弊端,很難實現和營銷側的互聯網架構的系統進行完美對接;所以自建基于互聯網架構的庫存中心,并培養懂庫存業務知識的互聯網人員是大多數要做數字化轉型或產業互聯網的企業必須要完成的任務之一。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:人人都是產品經理   作者:不可分類者

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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






          日歷

          鏈接

          個人資料

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

          存檔

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