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

          首頁

          設計師需要掌握的思維模型

          杰睿

          關于設計思維你了解多少?

          設計思維模型對于互聯人來說非常重要,經常我們在評價一個候選人時候會說,這個同學系統思考差了點,或者說用戶和商業思維不夠。那么到底什么是系統思考,設計師該如何學會系統思考,系統思考到底能幫助我們在做設計時候有什么幫助,今天希望我的這個分享能讓你了解什么是系統思考,以及它的思考模型是什么。

           

          設計思維模型的重要性

          設計做久了你會發現離不開流程和思維,之前支付寶一位大佬總結下來叫“左手藝術,右手科學”,藝術大家都明白,設計師是感性動物,對于美的追求是大家都是擅長的也非常有發言權,那么科學指的是我們需要通過科學的方法流程,系統的思考問題方式,讓設計不止好看,同時也應該符合用戶,商業訴求,滿足好這3者的平衡點。

           

          所以設計師,除了關注「左手」藝術的部分,同時也需要關注「右手」科學的部分。

           

          設計思維模型有哪幾種

          設計思維模型不止是一個單一的思維模型,它包含三種思維模型,設計思維,用戶思維,產品思維。今天這篇文章,我們先來了解第一個思維,設計思維到底是什么,我們該如何提升設計師的設計思維。

           

          設計思維包含哪些

          第一個設計思維也是最基礎的,就是作為設計師,我們必須了解各大平臺的設計規范,這是做任何設計的基礎,如果你了解你負責的這個平臺規則,那么你的設計就無法邁出第一步,所以對于剛做設計不久的同學,基礎思維規范需要去死記硬背背下來,沒有這個基礎后面都是無用功。

           

          1.知道基礎設計規范

          常用的設計規范,比如蘋果的設計規范,里面詳細講述了,常用的蘋果導航欄高度是多少,蘋果的表格視圖高度多大,頁面中常用的設計字體字號多少,如何去適配不同分辨率,這些基礎的設計原則,都統稱為設計思維。

           

          谷歌的material規范,也是設計師必須了解的規范,特別是需要了解它在系統層面和iOS的差異化。

           

          2.知道常用設計原則

          設計思維很重要一點,就是要了解基礎的審美,以及用戶心理學,其中排版運用比較多的格式塔原理,是做設計排版的基礎。

           

          相似性原則:我們會潛意識把更緊密的事物歸屬一組。

           

          相似性原則運用:淘寶網導航菜單就是運用這種原則,根據產品類別一致,進行同類分類,這個就是運用的格式塔緊密設計原則。

           

          封閉性原則:視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

           

          封閉性原則運用:我們會自動將這些不完整的圖形在腦海中封閉起來,形成一個整體圖形。如圖中海報,雖然文字被遮擋了一部分,或者被一些圖形分割了,但是我們腦海中還是會自動腦補出設計畫面。

           

          連續性原則:我們的視覺感知系統傾向于連續性,視覺系統傾向于感知連續的形式而不是離散的碎片。

           

          連續性原則運用:Pinterest和ins雖然卡片被下面截斷了,但是我們還是會認為它和下面內容是一組的。

           

          焦點原則:一個一面只有一個核心,一個眼睛,引導用戶去關注你想表達的重點。

           

          焦點原則運用:少即是多,蘋果的很多產品就是運用一個焦點,做到畫龍點睛的作業。

           

          地面原則:我們的大腦將視覺區域分為主體和背景,主體包括一個場景中占據注意力的元素,其余都為背景。

           

          地面原則運用:如上圖案例中,我們視覺會自動將紅色,綠色,藍色當做背景,頁面的幾何圖形會當為主體,用戶的注意力也在上面,在平時做設計時候需要去營造這種空間和層次感。

           

          格式塔是設計很重要基礎之一,來源于20世紀的德國,也是作為設計師必須掌握的設計原則,也是你做設計的第一個需要掌握的設計基礎。

           

          3.知道設計是用來用的,而不是藝術

          很多同學剛做設計,很容易在頁面中為了體現自己掌握的某種技法,而做過了,或者設計的頁面太偏向于個人喜好。這是不對的,我們的設計最終一定要是用戶使用的,否則再漂亮華麗的設計都會是曇花一現。

           

          Path的設計在剛出來時候,簡直是業內交互和視覺標桿性產品,創新的交互細節,精致的頁面表現。都很完美,但是最終也逃不過曇花不現,很大部分原因是產品定位不準,商業思考不夠,沒有很好解決好用戶訴求,最終導致失敗。所以在一個成熟的設計中,設計好用比好看更重要,我們要做的就是在這個過程中不斷尋找合適的平衡點。

           

          當年Facebook 出品的paper這款產品,也是業內關注度極高,把手勢運用到了極致。但最后也逃不過這種命運,幾乎移動市場上,沒有一個產品是因為好看而活下來的,幾乎最后的那些被人們每天使用的產品,都不是因為好看,而是因為好用,滿足人們痛點需求。

           

          所以,剛工作的設計師,在設計思維這個層面,一定要明確我們的每一個頁面,一定是滿足用戶完成任務為第一優先級,其次考慮產品整體和品牌,公司大的設計方向掛鉤。

           

          4.知道設計不止是效果圖,對落地負責

          工作幾年后,作為一個漂亮的設計效果圖都不難,很多時候參考下競品,在競品基礎上去找一些差異化創新,甚至做出一個超越競品的設計效果圖,加上真實動效,好看的圖片,精心排版的文案。這些很多設計師都可以做到。但是很多設計師忽略了真正上線后的效果。

           


          上面那個情況,我想大家都經歷過,我們效果圖做的很好,干凈的商品圖,標簽也很規范。但是實際上線后就是右邊效果,各種圖上放牛皮癬,以及各種標簽。

           

          從業務層面來說,沒有錯,因為放牛皮癬可能銷量更好。但是設計時候,我們是不是可以再往前一步,幫用戶思考如果圖片上房廣告該在展示,如果文案很多時候,標簽很復雜的展示規則。

           

          優秀設計師不僅僅能做出漂亮設計圖,同時他們也能對內容進行負責,定義好詳細是內容規范。

           

          之前淘寶的同事,定完一個電商的KV風格后,還會出一個詳細的風格指南,里面會去定義配色,文案話術,字數,以及頁面圖片的展示規范,這些的目的都是對內容進行控制。

           

          5.知道主流設計趨勢和手法

          目前很多設計師以為做UI就只有扁平化,以為大公司設計流程都是痛點分析、人群畫像、旅程地圖、用戶調研、方案呈現。各種一堆推導,然后最終的方案簡簡單單收尾,同時還暴露一個很大問題,風格單一。其實UI真的不止是只有扁平化。

           

          手法一:手繪簡筆風格

          如果你是設計日記的忠實讀者,你一定看過我之前寫過一些大廠的設計手法。手繪簡筆就是其中一個風格之一,整體風格都是手繪線條配以低飽和度顏色,有很多趣味性和故事融合在里面。

           

          Facebook改版之前的風格就是運用的這套風格,整個頁面也更加年輕和時尚。

           

          手法二:分形藝術風格

           

          利用簡單的幾何圖形,不斷重復,形成一種新的形式,在一些背景上,一些圖形和海報上經常被大量運用,只不過很多設計師并沒有關注到這些風格。

           

          Uber之前的規范中,對于全球的各個國家的設計,都是定義了一個國家的基礎圖形,然后圍繞基礎圖形做出了一系列擴展,這其實就運用到了這個分形重復設計手法。

           

          包括我們熟知是蘋果相冊圖標,chrome瀏覽器和谷歌相冊圖標,都是運用這種手法,一個基礎圖形有規律的變化。

           

          手法三:柔光風格

           

           

          很多設計師做東西風格比較單一局限,UI發展到今天其實有很多新的風格出現,柔光風格就是其中之一,整體風格呈現出光的折射特征,顏色層次豐富,有明顯的光的流動感和方向性。在設計上常用漸變,光斑,流動透明疊加手法,是目前大公司比較主流的一種風格。

          整個畫面有色彩流動感,背景一般是多色融合,有層次,有流動液體變化。

           

          像這個案例就是色彩上跨度比較大的一個漸變,同時運用白色透明疊加方式處理,細節簡單細膩。

           

          支付寶之前芝麻信用的風格我很喜歡,其中就是運用的這套設計手法,背景運用這種虛實,光斑作為層次。

           

          在很多可視化場景中也會運用,比如左圖就是運用波浪透明疊加線條作為頁面核心焦點,右邊頁面背景底部運用有層次的漸變和光暈。

           

          手法四 :紋理風格

          這個風格很多人都有印象,特別是韓國設計中大量運用了這種設計,國內電商中也會運用比較多,這種風格就是紋理風格。

           

           

          淘寶的88會員,我們能看見會員頁面輔助元素這些紋理效果作為背景出現在這些頁面中,能很好將視覺層次豐富起來。

           

          雙11的宣傳海報,也是運用這種幾何紋理作為視覺層次的裝飾。

           

          考拉當年的改版設計,很核心的元素就是這個圓形,以及他的底紋運用效果。

           

          這種底紋效果,很多時候也可以傳遞出品牌的氣質,品牌的調性,左側音樂播放默認圖片,特別有品質感,右側電商主頁面的背景,清晰感覺,后面線條恰到好處。

           

          當然,設計趨勢并不止我今天說的這些,其實有很多,作為設計師,設計思維中很重要的點,就是關注趨勢,并將他運用到你設計中去,這是必不可少的一項技能。

           

          6.了解設計只是整體體驗的一部分

          從這張經典的圖中我們可以看出,設計只是一個產品其中很小的一部分,很多設計師以為我們看見的就是一切,其實不是,就像冰山一樣,表現層是最上面的一部分,冰山下面其實有很多的內容。

           

          我們來看個案例,比如支付寶:

           

          表現層:

          視覺設計師比較容易關注的,圓潤的圖標,卡片的設計,扁平的風格,2.5D的插畫風格,小螞蟻的微動效,支付寶品牌藍色,以及一些卡片的動畫效果。

           

          框架層/結構層:

          頂部的4個金剛設計,也是用戶最常用的4個功能,下面14個宮格導航,代表不同的服務入口,小螞蟻卡片是通知入口,下面營銷廣告資源位,下面是千人千面或者推薦的服務卡片等等。理財頁面也是如此,頭部用戶數錢,下面業務入口下面不同理財服務。

           

          范圍層:

          根據用戶的訴求,中間的宮格導航是動態變化的,用戶也可以去根據內容需要去定義,小螞蟻通知入口也是如此,一個小喇叭的功能,把所有支付寶的通知都收在這個地方,底部卡片根據用戶習慣去展示,比如你經常點外賣那么推送你美食卡片,你比較關注疫情推薦你疫情卡片等等。

           

          戰略層:

          顧名思義,那就是公司整體戰略,從支付寶品牌升級更加年輕化,強化生活服務心智,首頁新增外賣到家、果蔬商超醫藥等便民生活版塊,并基于智能算法為用戶推薦喜歡的服務,讓每個用戶擁有更貼心專屬的支付寶。

           

          所以其實所有產品都是圍繞這樣邏輯去設計,我們設計師要明白設計那種趨勢手法,只是一部分。我們要不斷的去了解最頂層,才能理解產品設計背后的規則邏輯。

           

          最后

          今天分享的是設計師需要掌握的思維模型,其中關于設計思維的,我們再來回顧下,設計思維包括哪些:

           

          1.了解基礎的設計規范;

          2.知道常用設計原則;

          3.知道設計是用來用的,而不是藝術;

          4.知道設計不止是效果圖,對落地負責;

          5.知道主流設計趨勢和手法;

           

           

           

          作者:我們的設計日記
          鏈接:https://www.zcool.com.cn/article/ZMTE5NDc1Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          提升設計細節的一些技巧(2)

          杰睿

          簡單的細節調整就能加強設計品質。

          簡單的細節調整就能加強設計品質,昨天沒想到幾個小時寫的一篇小文章很受大家歡迎,后續我多寫一些類似使用技巧,大家多給我點贊一些,支持我繼續寫下去,那今天再給大家分享幾個設計小技巧。希望能幫助到大家。

           

          小輪廓能讓設計更精致

          電商設計中,白色商品圖非常多,很多時候如果細節處理不好,就會體驗非常糟糕,如上圖就是大家經常用到的一個場景。列表中有一個商品圖,這個設計有一個很大的問題,就是列表是灰色,商品圖是白色,白色和app的底色白色融為一體了,看起來非常缺乏平衡感。

           

          仔細分析,你會發現問題是商品圖頂部有些白色部分和背景頁面的白色融合在一起了,同時卡片背景是灰色,所以色彩白色和灰色非常突兀,那么如何解決。其實有一個很小的方法就能解決這個問題。

           

          我們直接在商品圖片周邊留出2px的邊框,就能很好的解決這個問題,因為背景是灰色的,留出的邊框剛好讓白色圖片看著有一個輪廓,整體更加和諧。

           

          前后效果圖對比,加了一個淺淺的邊框就解決了白色圖片的問題,是不是頁面一下子精致起來。

           

          同樣的原理,在大的商品圖上,留下小的邊框也很好的解決了白色地圖和背景的問題,這個小技巧希望大家能掌握。

           

          善用色彩疊加讓頁面效果更潮

          上圖這個場景我想是很多同學每天工作都在用的,圖片上需要去放一些文字,我們一般處理方式就是在上面疊加一個黑色,給一個透明度,這樣文字就能看清楚。這是一個設計手法。

           

          還一種設計手法就是在圖片頂部,加一個黑色到透明的一個蒙版,這個大家都會。

           

          但是這兩個設計如果對于一些比較年輕,比較潮流的頁面處理,可能就會感覺少點什么,那么這個時候就需要我們大膽一點,用一個色彩疊加的方式去設計,效果就會完全不一樣。

           

           

          直接在圖片上根據你產品調性,疊加一個彩色,然后講顏色模式改為線性光,那么整體的感覺就瞬間不一樣,畫面潮了很多。

           

          我們來看看效果對比,是不是瞬間一個普通的設計就潮起來了,當然這個效果也需要看你頁面實際場景去使用。如果你頁面就是一個傳統的設計,用戶就是普通用戶,那么可以就上面2個方法去設計,如果你的產品調性需要傳遞出很潮流,很時尚,那么就可以試試這個方法。

           

          當然你也可以在局部去疊加色彩,效果一樣很棒,我最喜歡的音樂軟件Spotify在頁面中就大量使用這種手法在設計,有興趣同學可以下載看看。

           

          善用空格和留白

          有的時候負空間非常重要,很多同學的設計稿,非常的擁擠,頁面都像要溢出屏幕了。如上圖,文字和圖片過于緊湊,圖片下面的圖標,熱區不夠,看起來非常擁擠。

           

          大家都太吝嗇運用空格了,但是留白和空隙是提升設計中非常重要的點。能讓你頁面呼吸感更強,是優化設計,讓設計更精致非常重要的一個小技巧。

           

          簡單優化下,把信息分成3部分,然后加大留白,讓信息留白更多,增強設計呼吸感。

           

          最后來看下效果,是不是看起來舒服多了,節奏感和呼吸感更強了,也有例如我們理解信息內容。

           

          最后

          今天就和大家分享這么幾個小點,希望大家都成為一個關注細節的設計師。



          作者:我們的設計日記
          鏈接:https://www.zcool.com.cn/article/ZMTE4ODY2MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          耍好控件 | 如何做好「按鈕」的用戶體驗?

          杰睿

          對于按鈕控件,Material Design 在規范中寫下了“突出一個按鈕”原則:布局中應包含一個視覺突出按鈕,以使其他按鈕在層次結構中的重要性降低,讓此高強調按鈕吸引用戶最多的關注。

           

          依據用戶體驗設計的宗旨,把這么長一段話說直白一些,其實就是:讓按鈕幫助用戶做出最優選擇。

          越是權威的設計團隊,對自家所探尋出來的核心原則越是從一而終。Google 產品線的按鈕設計,始終遵循著MD規范這一個標準。我想就這一標準,來展開對于「按鈕」設計的探索。

          一、在層級上「幫用戶做出最優選擇」

          Material Design 按照視覺強調程度將按鈕分為了四個類型:

          1. 文字按鈕(低強調):通常用于次要操作;

          2. 輪廓按鈕(中等強調):描邊讓輪廓按鈕比文本按鈕更突出一些;

          3. 填充按鈕(重點強調):填充按鈕具有視覺重點,因為它們使用了顏色填充和陰影;

          4. 切換按鈕(按鈕組):使用布局將同類按鈕分組。與其他按鈕類型相比,它們的使用頻率較低。

           

          MD規范之所以如此定義按鈕類型,其實就是為了滿足設計原則中的「對比」原則,足夠差異化的對比才能讓用戶視線有明確的著陸點。

          你可以用“較高視覺級+較低視覺級”的按鈕搭配,來引導用戶在當前場景做出更重要的操作。

          這一手法示例在許多產品中屢見不鮮。例如在一些功能性場景中,出于用戶體驗,用“較高視覺級”按鈕來輔助用戶進行正確操作。

          而在一些非功能性場景中,許多產品還使用這個手法來突出重要操作,為業務引流。甚至你可以從中去摸索到競品當前對哪一塊業務更具有側重點。

           

          例如信用消費類金融產品常常用“較高視覺級”按鈕引導用戶對賬單進行分期。而京東白條在賬單還款時,也用“較高視覺級”按鈕引導用戶進行“小金庫還款”,為自家的金融業務引流。

           

           

          這些案例都是在視覺上幫用戶做出選擇。

           

          但反其道而行之,我們也可以推敲出,當當前場景的敏感度較高時,我們也可以降低按鈕的視覺對比,不要對用戶進行引導,讓用戶自行謹慎操作,做出選擇。一般在協議、隱私條款場景這樣的設計會更為常見。

          二、在尺寸上「幫用戶做出最優選擇」

          按鈕尺寸是設計界老生常談的一個問題了,想必最經典的按鈕尺寸標準就是 iOS人機設計規范提到的“44pt”。除此之外還有MD規范對安卓按鈕定義的“36dp”、“56dp”等等。

          但你是不是也疑惑,為什么我們常??吹桨粹o五花八門的設計尺寸?“44pt”真的是按鈕尺寸的標準嗎?

          這個回答可以在設計師 Scott Hurff 曾寫過一篇關于按鈕可行性的博文中找到答案。

          Scott Hurff 在使用 iOS 9 鎖屏狀態下的 Apple Music 時,遇到了問題:

           

          在我想切歌時,我常常無法一次就點中切歌按鈕,我需要一而再再而三地嘗試。我甚至會因誤操作而調高音量,或是按到暫停。

           

          而 iOS 9 在這里所用到的按鈕尺寸就是經典的44pt。

           

          等到 iOS 10 更新了這一設計之后,上述情況改善了許多。同時也提起了 Scott Hurff 對于按鈕設計尺寸研究的興趣,并展開了一系列科學性的論證。

           

           

           

          Scott Hurff 搬出了2006年芬蘭奧盧大學和馬里蘭大學帕克分校的研究人員合作進行的實驗。研究人員測試了兩個場景:

           

           

          • 執行單個任務場景(如激活按鈕、點選復選框或單選按鈕)

          • 執行連續任務場景(如輸入電話號碼)

           

          在研究過程中,研究人員在每個場景下都測試了一系列不同大小的按鈕。他們發現,當按鈕小于9.2毫米時,單個任務場景的錯誤率顯著增加;當按鈕小于9.6毫米時,連續任務場景的錯誤率顯著增加。

           

           

           

          當時這個實驗只確定了按鈕尺寸的合適區間。但五年后,兩所德國大學的研究人員又進行了另一項研究。這一次他們的目標是:確定觸摸屏按鈕的最佳觸摸目標尺寸。

           

          這一次研究人員發布了一個Android游戲,該游戲被下載約10萬次,記錄了約1億2千萬次點擊事件。游戲的玩法很簡單:玩家要點擊各種大小、可能出現在屏幕任何地方的浮動圓圈來通關。

           

           

           

          分析游戲中的點擊事件后,研究人員發現當圓圈尺寸小于15毫米,玩家的錯誤率逐步增加;當圓圈小于12毫米左右時急劇上升;當點擊目標小于8毫米時,玩家沒點中圓圈的概率超過40%。

           

          但圓圈的尺寸大于 12毫米時,玩家的正確率也沒有顯著的數據變化。即 12毫米 就像一個按鈕尺寸用戶體驗的最大臨界點。

           

           

           

          通過兩個實驗印證了按鈕尺寸設計的科學性后,提煉出了4個關鍵數據:9.2毫米、9.6毫米、12毫米與15毫米。

           

          而通過換算之后經過換算可以發現,iOS 的按鈕建議尺寸約為 7毫米;Android 約為 9毫米。但微軟所給到的按鈕規范建議則直接是以“毫米”為單位的,定義為 13毫米。

          經過數據的換算總結可以得出以下結論:

          1.Android 所定義的 36pt 按鈕高度約為5.5毫米,在設計按鈕時,盡量不要低于這個高度(文字按鈕也應該盡量把可點擊熱區擴展到這個高度);

          2.36pt、44 pt、56 pt,這些規范參考數據在具體的頁面中需具體分析運用,目前各大規范已放開了按鈕高度的指導建議,并不是一定要讓按鈕保持一個固定的尺寸,只要在合適的可點擊范圍內,均是合理的;

          3.根據以上的實驗結論,按鈕尺寸的最大臨界值 12毫米(約為 82pt),大于 82pt后并不能增加用戶可點擊概率,更多是視覺方面的考慮。

          合理科學的按鈕尺寸可以讓用戶準確地點擊并進行操作,能夠避免發生類似 iOS 9 Apple Music 所遇到的狀況。

          三、在狀態上「幫用戶做出最優選擇」

          我發現當下許多 APP 好像或多或少會忽略按鈕的狀態樣式設計。似乎許多人認為移動端按鈕狀態并沒有 Web 端重要,可能是因為移動端按鈕沒有 hover(懸?。?態,認為按鈕在移動端只有常態與點擊態,狀態較少,覺得用戶本身就易于區分。

          但實際上MD規范提到按鈕狀態,不但沒有簡單地一筆帶過,還展開了一個專題進行了深入研究,可見把UI控件的“狀態”準確地反饋給用戶,是多么重要的一件事。

          按照MD規范,按鈕的狀態,一般會發現有:

           

          • Enabled - 激活狀態(按鈕常規狀態)

          • Hover-懸浮狀態(Web場景下的鼠標懸浮狀態)

          • Focused-聚焦狀態(長按聚焦狀態,如長按語音輸入)

          • Pressed-點擊狀態(按鈕被點擊按下的狀態)

          • Disable-禁用狀態(按鈕不可用的狀態)

          • Loading-加載狀態(我自行添加進來的,當下較為流行的多態按鈕)

           

           

          正確地在前期規范中定義按鈕的狀態交互及樣式,對按鈕的合理設計與用戶體驗而言其實十分重要。按鈕狀態可以有效地傳達給用戶當前操作狀態,如發生失誤操作時可以及時止損,減少撤銷/返回操作的成本。

           

          狀態樣式定義的過程其實并沒有想象中那么麻煩,一般視覺上可以高度與顏色來營造效果。

          · 高度 :界面中往往使用陰影來營造高度視覺差,例如常態時的陰影能夠營造懸浮、可點擊的效果;禁用狀態取消陰影,可以營造按鈕觸底,無法點擊的效果。

          · 顏色 :顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩,這樣可以確保適量的底色可見性,并且針對每種不同的狀態,應調整顏色遮罩不同的透明度值。MD有一套現成的透明度指導建議,可以進行參考。

           

           

           

          四、結語

           

          “幫用戶做出最優選擇”說起來很容易,做起來卻容易被忽視或令產品設計者糾結頭疼,不然 Steve Krug 也不會寫一整本《Don’t Make Me Think》來教大家如何揣摩用戶思想的書了。

          我盡量從我能考慮得到的方面,聊了關于按鈕交互的設計點,可能不太全面,也歡迎補充與校正。至于按鈕的視覺設計,因為過于個性化,且篇幅原因,我就不再展開討論了。

          希望這篇文章能夠幫助到你對按鈕有新的認識。我是耍家,我們下期再見。



          作者:UCD耍家
          鏈接:https://www.zcool.com.cn/article/ZMTE4MDc2NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          如何以點、線、面為界面設計尋求規則

          杰睿

          點線面在用戶界面中的應用貌似很少有人寫,我挑業余時間進行了大量案例的翻閱分析,發現其中確有規則。

           

          首篇萬字長文獻給你。

           

           

           

          前言

           

          用戶界面的本質是資源的互換。

           

          用戶為產品提供時間和注意力,產品為用戶提供單位時間內最大價值的內容。

           

          當視覺設計師介入其中后,他們的關系可以用這樣一幅圖表示。

           

           

           

          表現層作為用戶體驗五要素的最具象層面,解決的是產品視覺效果的呈現問題。視覺設計師需要借以合理的版式和視覺手段來保障用戶在單位時間內獲取最多的內容資源,即實現信息的高效獲取

           

          信息的高效獲取來自合理的視覺引導(信息閱讀的優先級安排)。我們一直在說的層次清晰、低信噪比、沉浸感等視覺體驗在本質上其實都屬于合理的視覺引導。

          借以實現的手段包括我們熟知的卡片、留白、配色、字體層級、圖標等等。這些手段龐雜繁多,體系化的建設必不可少,但是漫長的積累沉淀中很容易被其淹沒,而且每種手段背后又是什么樣的底層邏輯和依據?

           

          為什么卡片讓頁面層次清晰?為什么面性圖標擁有較高的辨識度?為什么步驟條會有橫縱之分?...

           

          而點、線、面解決的就是這些內在邏輯問題,在你熟知它們的特性后,絕大多數的設計手段都可以被其解釋和串聯起來,并且讓你的設計決策和設計推導更加有據可依,而不是簡單的“憑感覺”。

           

          如果我們將各種設計手段比喻為各類武學外功招式,那么點線面理論就好像吐納內功,雖為最基礎的入門心法,但其對內息的作用影響著所有招式的發揮。

           

           

           

          點、線、面與康定斯基

           

           

           

           

          點、線、面理論最早由瓦西里·康定斯基提出,他所著的《點、線、面》一書最早曾作為包豪斯學院的形式課程進行教學。他將所有藝術的形式都歸結于點、線和面三種元素的關系。

           

           

           

          康定斯基對于點、線、面的獨到思想為設計領域產生了極為深遠的影響。我們目前最熟知運用到它的的一個領域就是平面設計領域。通過這個理論,平面中所有的元素都可以看作點、線、面三類形態,并且每類形態的存在、變化和結合,都可以為畫面傳達出不同的樣式和風格。

           

          雖然用戶界面設計和平面設計分屬于兩個完全不同的設計行業,但點、線、面理論是相通的。

           

           

           

          點、線、面淺談

           

          點、線、面具有普適性、相對性。前文已經講過,點、線、面這三種形態存在于所有的元素中。不論是哪種元素都可以用點、線、面來表示。并且,點、線、面之間是相對的,并非對元素的純粹定義。

           

          比如一個界面中的面性圖標,我們可以將其看作一個點,當相對于線性圖標時,我們又可以將其看作面。如果這個圖標和其他圖標一起組成標簽欄,那這串圖標也可看作線。

           

           

           

          下面,我將分為點、線和面三大板塊,來講述每類形態基于自身維度所擁有的特性,并如何通過存在、變化來在界面中發揮著各自的作用,實現合理高效的視覺引導。

           

           

          正文開始。

           

           

           

           

           

           

           

          萬物自一點始。

           

          正如宇宙大爆炸源自一個引力奇點那樣,點是萬物之源,也是所有元素的基礎。點從維度上來說屬于零維,它沒有辦法像線、面那樣延伸,這決定了點本身的向心性和自由性。

           

           

           

          康定斯基將點描述為“雄辯與沉默”,這句話的意思就是,當點獨立存在于一個畫面中時,它便開始“雄辯”自己的存在,讓自己成為焦點;而當它的數量增加時,點便傾向于“沉默”,并且根據它的排列方式傾向于對應形態的特性。

           

           

           

          向心性

           

          當一個點獨立存在時,點的向心性協助它成為視覺焦點。此時點主要起到定位的作用。

           

          以支付寶首頁為例。在以往的界面設計中,我們往往在每個模塊標題旁添加一個小小的短線,而這個小短線便是作為定位點引導用戶迅速注意到標題,實現不同內容的快速定位。并且作品包裝中也常會用到它。

           

           

           

          不過在Complexion Reduction去形式化的浪潮洗禮下,這種方式已成為過去式,現在我們會直接用標題本身作為點進行定位。

           

           

           

          但是,在其他更多的場景下,僅靠文字其實并不能很好得發揮點的向心性,尤其是一些信息較多、需要迅速辨識的場景下。這時候,我們通常會引入另一種要素——圖標來指代它。

           

          圖標本身可以用來表意,而獨立、精致的特性讓它很適合作為點元素來處理。

           

          比如app中的標簽欄中的圖標就可看作點元素,每個圖標以其所具備的向心性幫助我們迅速得聚焦到它所在的位置。列表頁的每個字段前也會加入對應含義的圖標來幫助用戶迅速錨定當前欄目,并且由于圖標擁有更高的辨識性,這讓閱讀變得輕快而富有節奏。

           

           

           

           

          下圖所示為Google日歷中的活動頁表單,當我們將字段前的圖標去除時,閱讀沒有了強定位元素將會缺失節奏,信息獲取變得困難和緩慢,影響用戶表單的填寫。

           

           

           

           

           

          聚集性

           

          點是自由、精致的,它不會像線那樣有向兩端延伸的特性,這意味著它可以進行各種形式、規則的排列組合以契合版面。

           

          點化線

          在這種分布形式下,點通常以圖標的形式進行橫向及縱向的排列,并且傾向于線的引導性進行視線引導。

           

          點的橫向排列通常見于標簽導航欄、單行的金剛區入口等。點的縱向排列通常見于列表布局中。由于點本身對用戶注意力的聚焦,點沿著什么方向進行排列時,用戶視線便傾向于朝對應的方向移動。

           

           

           

          上面所舉的Google日歷就是這樣,單個圖標方便定位,而多個線性排布的圖標則具備了線的引導性,便于用戶的由上至下得快速瀏覽。ios自帶的音樂app和QQ音樂的歌單也同樣利用了點化線引導瀏覽,只是圖片和阿拉伯數字的區別而已。

           

           

           

           

          點化面

          在這種分布形式下,點常常橫向排列在界面中(一排內通常不超過5個),作為一個個快捷入口存在,形成網格式布局。

           

           

           

          比如金剛區業務入口、書籍等類型的布局都屬于網格式。這個布局下的點集合傾向于面元素,界面在這個布局下呈現出富有觀賞性的視覺張力,吸引用戶眼球,而且網格式的布局引導用戶視線均勻遷移,便于視覺區分。

           

           

           

           

           

          網格與列表

           

          既然講到這了,不得不提下上面兩種形態各自所在的版式——網格布局和列表布局。

           

           

           

          通常來說,靜態頁面中的內容大致可分為圖、文兩大類。

           

          形態上看,文本本身具有線那樣不斷延伸的特點,因此列表的橫向版面更適合長文本的展示。而圖片、圖標通常以固定尺寸的img獨立存在,可看作點元素,像上一節所講的,它既可存在于列表又可存在于網格。

           

          視覺動線上看,列表布局的動線屬于尼爾森等老前輩所提出的F型瀏覽模式。即用戶首先落點于左側的定位點,再由左向右進行閱讀,接著再垂直掃視,當定位到興趣點后繼續由左至右得閱讀。這種動線符合人類自然的閱讀模式。

           

           

           

          并且在由上至下的視線遷移中,用戶的注意力勢必隨著路徑的拉長而逐步遞減。

           

           

           

          而這種遞減效應讓列表式布局更適合基于產品及用戶習慣以某種規律排序

           

          郵件訊息以時間進行排序,這是基于用戶查看最新消息的習慣;電商商品則默認以相關性、銷量等因素綜合排序(同時買家可以根據價格、銷量等進行自定義排序),這是基于用戶的購物喜好習慣;直播平臺以熱度進行排序,這是基于羊群效應制造引流點,同時也刺激用戶發布優質內容。并且在特定的排序規律下可以引導用戶帶有目的的、更迅速得掃視。

           

          但是如果界面變為網格布局,掃視效率將大打折扣,較高的圖版率也導致文字信息被過度弱化。

           

          如下圖,健身環大冒險并不屬于外觀型產品,用戶更關心的是價格、好評等文字信息,當其變為網格視圖時,一方面用戶無法根據排序結果迅速垂直掃視,另一方面文字信息被重量級的圖片壓制,用戶無法迅速獲取它們。

           

           

           

           

           

           

          網格布局通過犧牲寬度來將界面等分為一個個格子,從形態上直接限制了長文本的存在,這讓它更適合放置一個個獨立的點,比如圖片、圖標。而文本則落于底部淪為一介輔助。

           

          從視覺動線上看,網格布局傾向于Z型瀏覽模式。用戶視覺動線通常由左至右、再由上至下得進行,并可以“雨露均沾”得在數個點上均勻遷移,注意力遞減效應不會像列表布局那么強烈。因此,網格布局非常適合進行不同信息的辨識和區分。

           

           

           

          界面中常見的功能業務入口、專輯或者電影的布局、單獨店鋪中的商品,它們不需要明顯的排序處理,并且用戶初始行為都是通過圖片、圖標進行迅速得辨別區分,繼而進行交互決策。如果將其列表化處理,不同信息的辨識區分效率將受到影響。

           

          如下圖,服裝屬于典型的外觀型商品,當變為列表視圖時,商品之間將難以辨識區分。

           

           

           

          由此,我們大致可以梳理出兩種布局適用情況:

           

           

          列表:適用于文本為主要展示,或者按照某種規律排序的信息。

          網格:適用于圖片為主要展示,或者沒有排序規則,需要用戶通過圖片、圖標辨識區分的信息。

           

          當然了,這兩種布局并非只能選其一,淘寶、京東這類體量龐大的電商平臺便為了方便用戶習慣,提供了兩種布局視圖便于用戶隨時切換以降低決策成本。

           

           

           

          另外,它常被作為一類豐富畫面層次的手段。當點不再按照橫縱方向排列分布時,便可作為圖案被用在特定場景的背景中,以降低背景過平過空的感覺。

           

          比如美食杰封面的加載占位圖就以與產品相關的各種食材圖標隨機得組合為圖案,飽滿的畫面減少了用戶等待時的枯燥無味。而QQ的群發布功能,在首個卡片背景中便加入了各種學習類的圖標隨機分布在卡片上,烘托出熱鬧趣味的氛圍,和下面的三個次要功能從卡片背景上迅速拉開層級。

           

           

           

           

           

           

           

          線條是一種簡單、輕盈的存在,可以看作是點受外驅力作用下的運動軌跡。它從維度上來說屬于一維,不同的外驅力結合使得線可以沿著任意方向自由得延伸,從而讓它擁有了高效的引導性、分割性和造型性。

           

           

           

          康定斯基在書中以溫度去定義線的情感,他將水平線定義為無限冷能的表現形式,將垂直線定義為無限暖能的表現形式??此苹逎y懂,但聯系到現實生活就相對容易理解一點。

           

          現實生活中的水平線通常存在于地平線中,因此給人的感覺是穩定、平和,類似非啟動時的“”態;而垂直線常見于那些從基線建造、生長的事物,比如高樓大廈、參天巨木,它們都通過能量來實現垂直方向的高低變化,因此給人的感覺是上升、下落、變化等感覺,類似啟動后的“”態。

           

           

           

          而線具備的冷暖態決定了水平和垂直線發揮各自作用時所傳達的感受。

           

           

           

          引導性

          線可沿任意方向延伸的特點讓它具備了很強的引導性。界面中最常見的就是跑步、地圖類app中的路線顯示,就是通過線的引導性來顯示起點到終點所行進的軌跡。

           

           

           

          如果我們將起點和終點對齊歸于一條線上時,便可以通過降維的方式將其縮減至單個維度。

           

          時間維度可以引申到界面中的時間軸、步驟條、加載條和音視頻中的進度條等,這類維度通常需要加入點元素,通過點的向心性輔助定位。空間維度則引申到滑動頁面時出現的滾動條等。

           

           

           

          如上文對溫度的解釋,“暖”態的垂直線象征變化。當我們希望用戶能夠感知到時間的變化,或者流程需要花費較長時間時,垂直線相對來說是個更好的選擇。

           

          比如外賣、快遞的訂單進度,火車的??空军c時間,timeline,到賬時間等信息,要么需要傳達變化感,要么費時較長,因此適合以象征變化的垂直線來進行引導,給予用戶變化感、產生需要等待的心理預期。

           

           

           

          “冷”態的水平線象征靜止。當我們希望用戶能夠沉浸在這個流程中,感知不到時間的變化,或者流程時間極短時,那就更適合用水平線。

           

          比如airbnb申請成為房東時,會有個需要用戶即時填寫的分頁表單,為了讓用戶沉浸在填寫中,同樣以水平線作為它的進度反饋,降低時間變化感。

           

          比如美團買藥后的審方頁,藥師的審方進度是即時性的,通常只需等待十幾秒即可。水平的靜止感能夠讓用戶產生“當前正在發生”的感覺,避免讓用戶產生需要等待較長時間的心理預期而離開當前頁面。

           

           

           

          但是,如果我們將美團審方的進度條改為縱向(去除文案提示),給用戶帶來的感覺也就大不相同。

           

           

           

          下文講到的分割性也可以以冷暖態來解釋。我們希望用戶能夠專心閱讀信息,因此會盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到,也會盡量降低它的明度和長度。

           

          另外,界面中往往也存在著一條無形的線,它同樣也是起著重要的引導作用,只是這類線不僅僅作用于某個特定模塊,它還可以作用于整個界面。這條線通常被稱作 視覺動線。視覺動線在網格與列表那一節中簡單提了下,只是這部分體系太過龐大,后面有時間我會單獨寫一篇。

           

           

           

          分割性

           

          很多時候,界面中僅僅以留白進行分隔時,很容易造成信息無法被明確得劃分。這時我們往往需要引入額外的形式進行輔助。比如分割線。

           

          分割線通常運用在模塊內部信息的分割,雖簡單粗暴,但并不能應付更高層級的模塊分割。而模塊之間的分割通常以面性(分割條)來進行。留白、分割線和分割條三者的分割層級由低到高,通常需要在頁面中結合使用。

           

          需要注意的是,線面的分割形式需要盡可能得輕量化,一旦擁有了視覺重量很容易成為噪音,我們需要盡量避免信噪比過低對用戶閱讀體驗的破壞。

           

           

           

          為了增加頁面的呼吸感,我們很多時候會用留白這種最為輕量的分割方式代替所有的線、面。

           

          這類大留白的特點往往與Complexion Reduction風格相結合,視覺上不僅制造一種舒適的簡約感和呼吸感,也減少了頁面中線面分割形成的視覺噪音。

           

          Complexion Reduction最早源自Airbnb、Instagram、Medium等產品的頁面改版,而后被UX設計師Michael Horton所總結出的設計趨勢。蘋果在17年所發布的ios11同屬于這個風格,這類風格最突出的三個特征就是大標題、面性圖標和克制用色。

           

          但是,這種去形式化的分割方法并非適用于全部頁面,一般只有在頁面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁面才適合使用。

           

          比如ikea和airbnb的首頁,它們并不像京東、支付寶有龐大的體量和業務需求,所以很適合全留白的方式。這讓它們的首頁看上去非常干凈清爽,富有呼吸感。

           

           

           

          不過,在其他字段信息繁多的界面中,分割線依然是一種高效的分割方式。

           

          我們可以看到,IKEA和airbnb的詳情頁依舊選擇了分割線的分割方式以應對繁多的字段信息,避免全留白帶來的層級混亂。

           

           

           

           

           

          造型性

          線本身可以沿任意方向自由延伸,形成一條曲線、折線、螺旋線等等。而當線的首尾相連時,便可以勾畫出面。

           

           

           

          但是,線的閉合性所形成的面僅僅是一具沒有量感的空殼。但同時線條本身輕盈的特性讓其更加輕量、通透,因此對于一些辨識要求較低、或者需要被弱化的元素來說往往是個不錯的選擇。

           

          界面中最常見的運用就是幽靈按鈕和線性圖標。

           

          相比于面性按鈕和圖標,量感的缺失讓其無法在辨識性上勝出,但是在其它地方也各有所長。

           

          幽靈按鈕常用于一些次按鈕、未選中態以及tag,線性圖標常被用于一些次要功能、未選中態以及裝飾。

           

           

           

          當然,線面也可以根據產品自身需求作類別區分。

           

          比如支付寶和美團這些產品,工具型圖標全部線性,而業務型圖標全部面性。并且線性圖標得益于背景主色色塊的反白加成讓它們并不會被過度弱化。

           

           

           

           

           

          虛線

           

          虛線是點化線的最簡易的表現。

           

          但是因為虛線本身斷開的地方太多了,并不適合用于常規信息的分割,它通常適用于一些特定的場景。

           

          比如一些產品中的票券、賬單這類特殊場景中,通常會加入虛線進行信息的分割,就是為了映射模擬現實世界中便于撕開的撕票線來增加代入感,減少認知負荷。

           

           

           

          虛線另一個特性是不可見性。

           

          這個特性最早可追溯至建筑、機械等行業的制圖規范中——以同等點元素所構成的虛線代表對象視覺盲區中的棱邊線及輪廓線。

           

           

           

          一些漫畫或動畫作品中當一個東西突然不翼而飛時,往往會留下一個虛線的輪廓。

           

          這種有意思的設定也被設計師引用到了用戶界面中。

           

          比如當我們想讓用戶去上傳一個圖片時,往往會采取一個虛線的矩形結合按鈕進行引導,便是為了告訴用戶:嗨這塊地還是空的,快來加點料!

           

          比如Pinterest、dribbble以及AntD的圖片類upload組件,都采用了這種設定。

           

           

           

          另外,這種形式也適用于空狀態的表示,比如dropbox。

           

           

           

           

           

           

           

           

           

          面可以看作是線的運動軌跡,可以由一個閉合的線生成,也可以由點、線強化自身而來。

           

          點線面的臨界問題

           

           

          康定斯基在書中曾講到,線的強化加粗,與點不斷增大面臨同樣的問題,即與面之間的臨界。

           

          這句話的意思就是,當點、線通過強化自身的面積、寬度后,和面的界限開始模糊,從而具備了面本身的性質。

           

          比如ios11中讓人印象深刻的大標題,便是由通過增加每個點的面積(增加每個字的字號),以及筆畫的線寬(增加每個字的字重)來趨向于面,以營造出飽滿、沖擊的視覺張力。

           

           

           

           

           

           

           

          辨識性

           

          二維的屬性讓它可以向四周無限得擴張自己的領土,這個優勢讓面可以輕松承載各類信息,并且也讓它具備了絕佳的視覺張力。

           

          在一個點線面同時存在的畫面中,人眼優先注意到的必定是擁有絕對視覺張力的面元素。這意味著面擁有著遠勝于前兩者的辨識性,或者說,在一部各類元素參演的戲劇里,面更擅長主角。

           

          比如在一個放置了文字的界面中,我們希望其中一段比較重要的文字完全和其他文字區分開,也就意味著這段文字需要進行對比。

           

           

           

          我們可以對這段文字加粗、加入顏色等等,這的確能做出一些明顯的變化。但是僅僅是對字體本身的強化,一旦界面需要劃分層級,就會顯得很“平”,造成信息關系的曖昧。

           

           

           

          不過,當加入一層淡淡的色塊充當文字背景后,便可以制造出極為明朗的層次關系。一方面,這段文字神奇得與其他信息迅速孤立開來,另外,有面作為“靠山”讓它變得稍微與眾不同,并且相比其他文字能被更快得注意到。

           

           

           

          當然,如果你覺得它很重要,那你可以增強文字與背景的顏色對比,給面加入各種各樣的顏色。

           

          而當顏色對信息可讀性造成影響時,為保證信息的順利辨識,我們不得不對文字進行反色處理,以此作為視覺落點來強制用戶迅速注意到它。這就是我們熟知的反白視覺手段。

           

           

           

          面的這種強力屬性被用到了界面的方方面面,比如按鈕和圖標。

           

           

           

           

          相比前面所講的線性圖標,面的辨識性讓面性圖標可以更快得被識別。因此,界面中一些重要的業務入口通常都以醒目的面性圖標存在,并且常以面性圖標代表激活、選中時的狀態,線性圖標代表未激活、未選中時的狀態。

           

           

           

          不過線性圖標薄弱的辨識性并非完全適合標簽欄狀態的切換。

           

          用戶在選中到當前頁時,并不代表其他頁面徹底弱化了,用戶同樣需要關注其他未選中的頁面。

           

          正因如此,ios11中所有未選中的icon全部由線性更改為了面性。同樣的,國內的簡書、天貓等產品也進行了圖標的改版以提升其他頁面的點擊率。

           

           

           

           

           

           

          對于按鈕,面的辨識性為它的層級使用提供了更多可能。

           

          如下圖,按鈕從樣式上來看大致有六種樣式,深色、淺色、淺灰色、幽靈、文字和圖標按鈕,其中面性按鈕就占了一半。相比幽靈、文字和圖標按鈕,三種面性按鈕都以面的強辨識性引導用戶迅速注意到它。因此面性按鈕相對對應更高的層級。

           

           

           

          當頁面中存在多個功能按鈕時,就需要以樣式進行主次之分。深色按鈕以強烈的顏色對比制造吸引力,因此常以深色表達層級最高的主按鈕,而次按鈕通常對應層級較低的淺色、淺灰色等樣式。

           

           

           

          當頁面中沒有主次功能之分時,按鈕的樣式通常取決于當前的用戶場景及業務需求。

           

          比如知乎的答案詳情頁面,答主關注按鈕是淺灰色樣式,就是為了引導用戶沉浸在內容中,避免深色樣式對閱讀造成干擾。而答主個人頁的關注變為深色,則是由于用戶點擊答主頭像的行為來自了解更多的動機,即用戶對其產生了特定興趣,在此場景下使用深色樣式便是為了引導用戶采取社交行為。

           

          另外按鈕圓角的轉化也是為了強化信息的聚焦。關于圓角的內容可以去我的前一篇文章《寫給設計師看的圓角背后的邏輯》,里面有更詳細的講解。

           

           

           

          app store同理。商品列表頁的按鈕一致以淺灰色樣式表達,而詳情頁使用了深色。

           

           

           

          我們在按鈕樣式的選擇上,務必需要考慮到當前的用戶場景,避免過低的信噪比而影響信息的傳達效率。

           

          比如app store列表頁中,用戶的場景是非特定的瀏覽行為,如果使用深色按鈕將會讓其成為視覺焦點,強制用戶不斷注意到它,致使其成為“噪音”,影響用戶對有效信息的獲取。

           

           

           

           

           

          承載性與分割性

          面無限延展的屬性讓它可以承載各類信息。包括文字、圖片或視頻元素,異或是元素自由組合所形成的信息單元。

           

          并且我們僅加深界面的背景色,就可以基于面的分割性,通過控制模塊間距實現區域的劃分。(這里的間距即我們熟知的分割條)

           

           

          但這種文字墻一般平鋪式的布局并不能更好得反映當前模塊所在的層次,或者從用戶認知上說它們傾向于一個層面上。而且直角矩形的四個頂角所形成的四個焦點,也讓用戶的視線傾向于發散而非聚焦。直到卡片的出現,問題得以順利解決。

           

           

          卡片式設計

           

          卡片在我們生活中隨處可見,信件、名片、便利貼、甚至是我們的手機屏幕,它們從形態來說都屬于面,并且都充分利用了面的承載性來充當一個收納信息的容器或載體。

           

          信件收納來信人的寄語,名片收納對方的個人信息、便利貼收納事項清單、屏幕收納用戶界面。而且它們方便攜帶,我們想要知道更多,打開它即可。

           

           

           

          2012年I/O開發者大會中,隨安卓4.1系統一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。

           

           

           

          這種后擬物時代的設計不僅一改Google以往混亂的信息展示問題,而且熟悉的擬物感收獲了足量用戶的喜愛。初嘗甜頭之后,Google將卡片應用到了所有的產品,并且將其作為基礎元素列入了一門偉大的設計語言中——material design。

           

          你可以在material design中更系統得看到,google通過為界面添加了z軸(海報高度),來擬物映射生活中的一張張卡片。并且通過陰影的濃淡反應卡片所在的高度,通過不同的高度實時反映當前元素的層級關系。

           

           

           

          而在ios11中,改版后的app store也使用了大量的卡片進行排列組合,形成格外的清晰的頁面層次引導用戶的視覺動線。

           

           

           

          相比原本平鋪直敘的信息,卡片式設計通過以下優點讓其風靡設計界——

           

           

          1.更高效得獲取信息

           

          每張卡片都是一個獨立的面。從面的辨識性上說,獨立和聚焦的特點讓卡片與其他內容形成天然的斷層,更易形成視覺焦點。

           

          從面的分割性上說,卡片通過犧牲屏幕空間(四周的塊外距)的方式讓區域的分割相較分割條更為明確,清晰的層次關系便于用戶迅速辨識和獲取信息。

           

          比如改版后的支付寶,通過引入圓角卡片來引導用戶更好得留意到下方的各類生活服務,以實現向生活服務數字平臺的轉型。

           

           

           

           

          2.更輕量的入口跳轉

           

          每個卡片除了承載信息外,都可以作為單獨的入口承載內頁的所有信息,并且卡片的屬性讓內頁的展示變為了展開而非跳轉。

           

          比如app store點擊卡片后,便以非線性的展開動畫呈現所有內頁信息,返回則只需下滑手勢即可,輕量而有趣。

           

           

           

           

          3.更多的交互手勢

           

          卡片獨立的特點讓它可排列也可堆疊,這為頁面帶來了更多的交互方式。

           

          我們可以通過左右滑動(scroll)解鎖橫向更多的空間,也可以左右輕劃(flick)形成類似tinder那樣新的產品機制。

           

          比如知乎的書架引入滑動手勢展示更多內容,輕劃手勢切換問題卡片。

           

           

           

           

          4.更舒適的視覺觀感

           

          卡片基于自身獨立的特征讓它成為網格布局的常用載體,富有觀賞性的視覺張力讓頁面更加吸引眼球。

           

           

           

          當然,卡片并不是通用的,原本可以靠留白或分割線分割的信息,如果為了視覺效果硬是卡片化處理,就會導致閱讀的低效,而且浪費空間。

           

          比如常見的一些feed流,相比卡片,這類同類的信息流更適合以列表來幫助用戶迅速得掃視,并節省頁面空間。

           

           

           

           

          卡片的嵌套和分割

          產品的功能并非完全互相剝離的,很多時候存在包含和平行的關系。

           

          這兩類關系分別可以以卡片的嵌套和分割進行處理。前者通過卡片堆砌表達信息的包含關系,而后者則通過視覺分割所形成的點擊域傳達信息的平行關系。

           

           

           

           

          比如天貓點評頁中的金香蕉好物推薦,每個卡片承載了商品信息以及點評信息,通過卡片的嵌套表示出兩者的包含關系。而單條推選理由及入口的引導屬于平行關系,因此采用了視覺分割來進行劃分。

           

          并且前者跳轉的是點評詳情,后者跳轉的頁面中包含了所有點評、商品推薦以及我要點評,因此在后者所屬的面中加入了淡淡的一層業務主色來強化它的地位。

           

           

           

           

          在支付寶改版后的卡包頁中同樣進行了一次嵌套處理,以更好得容納不同的業務并傳達各自所在的層級,并且以尺寸和顏色對比進行業務區分。

           

           

           

           

          京東金融的付費業務卡片中存在兩個平行關系的功能,因此以分割線形式進行了區域的劃分。

           

          同時,它利用了顏色進行了有效的視覺及情緒引導:黑色背景進行反白處理將其作為一個單獨的視覺落點,強制用戶注意到這里,并且又傳達了付費用戶所尊享的高級感。

           

           

           

           

           

          蘋果是如何改頭換面的

           

          自從ios7轉型扁平后,線元素在蘋果設計語言中一直占有重要地位,線自身的纖細、輕盈感可以迅速打造apple獨有的輕量調性,不僅是按鈕、圖標的樣式,字體本身也更加傾向纖細的字重。

           

          但是,這個僵局在ios11發布的那天被徹底打破。

           

          2017年6月6日,蘋果設計師喬納森仿佛和線有了隔夜仇一般,從解鎖頁面到原生應用中,原本ios10中曾經被大量使用的線元素基本全部被面元素取代。

           

          比如鎖屏頁面,所有撥號按鈕全部由幽靈樣式改為了面性樣式,而數字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識,并且降低了線圈所產生的視覺噪音。

           

           

           

          app store中也同樣發生著形態的易主。

           

          你可以在下圖中看到,原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。

           

          另外,11代中眾所周知的大標題同樣也可以看做化面的傾向(通過增加自身的面積),強烈的視覺張力引導用戶迅速得進行辨識。

           

          另外,所有的數字全部提至文字的前方,基于用戶由左至右的動線更突出產品自身,以點化線的形式更好得引導用戶進行掃視。

           

           

           

          追求極致的蘋果顯然不能容忍tab中未選中態下出現的線元素,你可以在ios13中看到,線元素得到了徹底的消除,并且顏色一并得到了克制,再次提升了閱讀內容的沉浸感。

           

           

           

          ios11中的商品詳情頁獲取按鈕也同樣使用了面性,深色的強調樣式更好得契合了頁面所在的用戶場景,召喚用戶對其感興趣的商品采取點擊行為。

           

           

           

          控制中心頁面,基于面元素的承載與分割性,所有的信號類功能獨立收納到了卡片中。

           

          亮度和音量的調節則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強了兩者的辨識力,另一方面,根據菲茨交互定律,面積的增大帶來了更好的點擊體驗。這一點在miui11的控件優化中也得到了應用。

           

           

           

          所有的未選中態圖標也進行了面性處理,大幅提升了10代中未選中頁標簽的辨識性。并且每個圖標對應的文字也進行了加粗。

           

           

           

          縱觀ios11中所有形態的變化,我們可以發現這次改版的最終目的是:促進內容的高效獲取。

           

          順從作為蘋果歷來遵循的設計法則之一,和包豪斯“形式追隨功能”設計理念不謀而合。

           

          ——設計永遠只幫助用戶理解內容,但永遠不與內容競爭。這一點在ios11的這次“改頭換面”中被徹底應用及實現,并且對設計圈影響至今。

           

           

           

           

          最后

           

          點、線、面理論并不像格式塔、尼爾森可用性法則等方法論那樣,為設計者提供切實可行的具體指導,它更類似一種內斂的全局觀,幫助設計師拋開顏色、質感等額外手段,從宏觀的角度以點、線和面的方式將所有的設計元素抽象化處理,讓原本雜亂無序的萬象有章可循。

           

          最后,以康定斯基的一句話結尾——

           

           

           

           

           

          此篇完。

           

           

           

           

           

           



          作者:設計師Andrew
          鏈接:https://www.zcool.com.cn/article/ZMTE3MjU3Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          設計小白必看|好設計的標準

          杰睿

          在設計實踐的廣闊天地里,設計師們常面臨一個核心挑戰:如何在領導與產品經理缺乏設計敏感度的環境中,持續產出高質量作品,并確立設計評價的統一標準。本文通過分析具體案例,探討視覺設計的構成要素與評估原則,旨在為設計師指明成長路徑,促進專業技能的精進。
           
          設計品質的界定與追求
          1. 獎項榮譽的光環:例如,無印良品憑借一組榮獲日本平面設計最高獎項——龜倉雄策獎的海報,展示了設計的卓越。該獎項被譽為設計界的“奧斯卡終身成就獎”,海報以簡練的色彩和幾何形狀,藝術化地再現了人與自然的和諧,特別之處在于全部采用廢紙板制作,既創新又環保,與品牌理念緊密相連,實現了藝術與商業的雙贏。
          2. 國際設計獎項的權威:德國紅點設計獎,作為全球設計領域的風向標,激發了全球設計師的熱情。像徠卡相機,不僅是高端攝影的代名詞,其設計也屢獲殊榮,融合了創新與傳統,成為設計與商業并重的典范。自2015年推出的Apple Watch,亦憑借不斷的創新設計,摘得了眾多設計桂冠,證明了設計在推動產品革新和市場接納中的關鍵作用。
          3. 設計公司的國際舞臺:提及韓國設計公司Plusx,其在紅點設計獎的頻繁亮相,顯示了設計跨界合作與國際化視野的重要性,為設計的多元化和國際競爭力提供了范例。
          設計小白必看|好設計的標準
           
           
           
          在評估設計作品,尤其是商業設計的價值時,獲得權威設計獎項的認可確實是衡量其優秀與否的重要標準之一。然而,好設計的定義遠不止于此,它還需在實用與美學間取得完美平衡。
           
          深澤直人的傘柄設計:一個典型的例子是日本設計大師深澤直人的雨傘設計,傘柄的微妙凹槽,既自然又貼心地解決了雨天攜帶購物袋的困擾,展現了設計的創新與人文關懷。這類設計以其細膩洞察和實用價值,贏得了廣泛贊譽。
           
          實用性與美感并重:產品的美學不應脫離其實用性而獨立存在。蘋果iMac的設計就是這一原則的杰出代表。從初代的半透明機身到如今的超薄設計,每一代產品都展現出極致的工藝美學,即便在沒有品牌標識的情況下,其設計的獨特性也能讓人一眼辨識,這正是精湛工藝與美學融合的典范。
           
          直觀性與普適性:好的設計應當易于理解,跨越年齡界限。無印良品的CD播放器設計便是一個典型,其簡潔直觀的操作界面,即便是老人和孩子也能輕松掌握,體現了設計的人性化和普及性。
           
          設計哲學的深度:以微信為例,其設計理念強調“克制”與“約束”,從簡潔的開屏界面到不刻意夸大產品價值,專注于核心功能,展現了一種對用戶尊重與誠實的態度。在眾多APP日益商業化的背景下,微信多年如一日的堅持,顯得尤為難能可貴。
           
          真誠與透明:反觀當前某些廣告宣傳,如電商平臺中常見的誤導性促銷信息,如所謂的“第二件0元”實則并未真正減免,這種做法違背了好設計的真誠原則,損害了消費者的信任。真正的優質設計,應當如同微信一樣,以真實的功能價值贏得用戶,而非依賴虛假營銷。
          設計小白必看|好設計的標準
           
           
           
          設計,無論是應用于APP還是工業產品,核心在于實用性,滿足用戶需求的同時,也不忘在細節處下功夫。正如無印良品的電飯煲,圓潤可愛的外表下,還細心設計了放置飯勺的凹槽,這些細微之處的關懷,成就了設計的卓越。優秀的設計作品,即便隨時間流逝,其設計理念與文化內涵仍歷久彌新,成為不朽的經典,如博朗和蘋果的早期設計,至今仍是設計史上的里程碑。
           
          設計的精髓在于全面性,避免在顯眼處過分雕琢,而忽視了不起眼的角落。正如商場中,若華麗的大堂與臟亂的洗手間形成鮮明對比,顧客的體驗將大打折扣,難以吸引回頭客。因此,卓越設計的標志是對每一個細節的精心打磨,確保整體體驗的完美無瑕。
          來自瑞典的品牌Freitag,巧妙利用回收卡車車篷制作背包,其獨特的二手質感、個性化圖案與顏色,不僅設計實用,更傳遞出強烈的環保理念,展示了設計與可持續發展的完美融合。
          設計小白必看|好設計的標準
           
           
           
          1.Good design is innovative
          好的設計是創新的
          2.Good design is aesthetic
          好的設計是美的
          3.Good design makes a product understandable
          好的設計是易懂的
          4.Good design is unobtrusive
          好的設計是克制的
          5.Good design is honest
          好的設計是誠實的
          6.Good design makes a product useful
          好的設計是實用的
          7.Good design is long-lasting
          好的設計是經得起歲月的考驗
          8.Good design is thorough down to the last
          detail
          好的設計是考慮周到并且不放過每個細節的
          9.Good design is environmentally friendly
          好的設計是環保的
          10.Good design is as little design as possible
           
          設計領域的金科玉律,尤其是Dieter Rams提出的“好設計的10個原則”,深刻影響了德國博朗公司的產品哲學,這些原則成為了衡量設計作品的經典標尺。
           
          商業設計的卓越不僅體現在設計本身的美感與創新,更在于市場的積極反饋和用戶口碑。蘋果產品是這一理念的典型例證,不僅屢獲設計大獎,其市場表現和銷量同樣令人矚目。戴森公司則以創新技術為核心,如其吹風機、卷發棒等產品,憑借前沿科技與設計美學的結合,實現了商業上的巨大成功,再次證明了好的商業設計應是美觀性與市場性的雙重勝利。
          設計小白必看|好設計的標準
           
           
          視覺設計與UI設計的標準:
           
          視覺設計與UI設計的標準化對于維護品牌形象、提升用戶體驗至關重要。在大型企業中,確保設計的一致性尤為關鍵,以下是一些普遍認可的設計標準:
           
          1. 網格系統的應用:確保頁面布局有序,增強一致性。
          2. 比例與尺寸的合理性:維持視覺元素間的和諧比例。
          3. 文字的清晰可讀:選擇易讀性強的字體,合理設置字號、行距。
          4. 色彩的情感傳達:色彩運用需考慮文化寓意及情感影響。
          5. 圖片的精選與優化:高質量圖像與品牌調性相符,提升視覺吸引力。
          6. 圖標與圖形的規范:制定統一的圖標庫,確保圖標含義清晰一致。
          7. 按鈕設計的統一性:按鈕樣式、交互反饋需遵循統一標準。
          8. 視覺層次的構建:通過大小、顏色、位置等區分信息優先級。
          9. 對齊與平衡法則:確保頁面元素視覺上的平衡與協調。
          10. 視覺引導策略:明確的視覺路徑引導,幫助用戶高效完成任務。
          設計小白必看|好設計的標準
           
           
           
          產品設計的優質標準:
           
          遵循上述設計準則的同時,產品設計還需考慮以下幾個方面:
          - 用戶中心:深入理解用戶需求,以用戶為中心進行設計。
          - 功能性:確保產品功能的實用性和易用性,解決用戶痛點。
          - 創新性:在設計中融入新穎理念,區別于競爭對手。
          - 持續性:設計應考慮產品的生命周期,便于升級和維護。
          - 可持續性:關注環保材料與制造工藝,減少環境影響。
          設計小白必看|好設計的標準
           
           
           
          在設計實踐中,嚴格遵循這些準則,不僅能提升設計的專業度,還能確保產品在視覺與功能上的雙重卓越。
          網格系統作為設計領域的基石,其重要性已被谷歌、微軟、蘋果、Naver、阿里巴巴等巨頭公司廣泛認可,并將其納入設計規范之中。盡管網格并非僵化的規則,允許在基礎框架上靈活變化,但它在維持設計的一致性和提高工作效率方面扮演著至關重要的角色。
           
          Web設計中的12列網格標準:12列網格因其靈活性而備受歡迎,能夠輕松適應6列、4列、3列乃至2列的布局需求,使得頁面結構更加條理化和模塊化。在PC端設計中,采用12欄網格系統能夠顯著提升頁面的統一性和標準化程度,使設計過程遵循規律,簡化決策,從而達到高效而美觀的效果。響應式設計中,網格更是保證跨平臺一致性的關鍵工具。
           
          Reddit官網便是12列網格應用的典范,其頁面布局既有序又富有變化,充分展示了網格在網頁設計中的優勢。網格系統的運用,無疑為網頁或PC設計奠定了良好的基礎框架。
           
          移動設備上的6列網格:考慮到屏幕尺寸限制,移動端設計傾向于使用6列網格作為標準,它既能滿足大部分設計布局需求,又能方便地實現二等分或三等分布局。盡管如此,針對特定需求如淘寶等電商應用,由于信息密度高,可能會采用12列網格以容納更多內容。
           
          設計小白必看|好設計的標準
           
           
          海外產品中的網格應用示例,如Pinterest,其界面設計明顯遵循了一個6列網格系統,圖片與按鈕的布局均嚴格遵循這一規則,確保了界面的整潔與統一,每一頁的邊距處理也保持一致,進一步證明了網格在打造有序且視覺舒適界面中的核心作用。
           
          不論是PC還是移動平臺,網格系統都是設計中不可或缺的組成部分,它既是設計標準化的推手,也是提升用戶體驗的有效途徑。
           
          Airbnb的設計備受推崇,其背后的秘密在于一套有序的網格系統。他們采用的布局策略是左右邊距48像素,內容區域間隔24像素,這樣的設計增加了頁面的留白空間,營造出舒適愉悅的瀏覽體驗,使得Airbnb的設計呈現出獨特的秩序美感和視覺焦點。
           
          轉而觀之,谷歌作為設計規范的先行者,在其最新設計語言中首次詳盡闡述了網格系統的應用。谷歌的網格系統不僅涵蓋了傳統元素如邊距、間隔,還特別定義了四欄布局,以適應手機、Web及平板等多種平臺的產品設計,體現出其在跨平臺設計中對一致性和靈活性的重視。谷歌官網是深入了解其網格系統細節的寶貴資源。
          設計小白必看|好設計的標準
           
           
           
          合理比例的重要性:比例在設計中占據核心地位,合理的比例配置能夠顯著提升視覺效果。盡管存在爭議,黃金比例(約1.618:1)作為古老而經典的美學法則,自古希臘數學家歐幾里得時期起就被廣泛討論。盡管有人質疑將其作為絕對設計法則的適用性,但黃金比例不失為設計初期的一個有益參考框架,而非一成不變的規則。
          蘋果公司在其APP圖標設計中巧妙運用黃金比例,這一原則貫穿其眾多設計作品,證明了黃金比例在現代設計中的持續影響力。眾多知名互聯網品牌亦紛紛采納黃金比例,以提升視覺和諧與品牌識別度,再次驗證了比例設計在塑造高品質視覺體驗中的關鍵作用。
          Facebook在其官方網站的設計中同樣采納了接近黃金比例的原則,以此優化視覺布局,確保用戶界面既美觀又易于導航,進一步證實了黃金比例在現代數字設計中的廣泛應用與影響力。
           
          谷歌的Material Design規范,作為設計界的權威指南,詳細闡述了如何通過標準化的比例(如16:9, 3:2, 4:3, 1:1, 3:4, 2:3等)來構建界面布局,以實現設計的一致性和高效性。這一做法不僅統一了視覺語言,還提升了用戶體驗,強調了在設計中遵循規律比例的重要性,它是塑造流暢視覺流程和提升設計整體感的關鍵。
          設計小白必看|好設計的標準
           
           
          文字易讀性:設計中的核心要素
           
          在產品設計中,文字是傳達信息的橋梁,其易讀性直接關系到用戶體驗的質量。優化文字排版,確保信息傳遞的高效,是設計中的重要一環。通過精細控制對齊、字體選擇、行距、字間距等,可以顯著提升閱讀體驗。
           
          對齊的魔力:對齊方式對閱讀節奏有著直接影響?;靵y的對齊會導致閱讀效率下降,而合理的對齊能夠引導用戶的視線流動,提升閱讀體驗。如上圖所示,三種不同的對齊方式帶來了迥異的閱讀感受。良好的對齊不僅美觀,還能使信息層次分明,便于用戶快速抓取關鍵信息。
           
          間距的藝術:間距(包括行間距和字間距)是控制閱讀節奏的另一關鍵。過小的間距會使文字擁擠,閱讀時易產生視覺疲勞;反之,過大的間距則可能導致閱讀斷層,信息連貫性受損。找到合適的間距比例,是保障閱讀流暢性的關鍵。這要求設計師在設計過程中,根據內容的性質和閱讀場景,精心調整,以達到最佳的視覺舒適度和信息傳遞效率。
          設計小白必看|好設計的標準
           
           
          無論是遵循黃金比例的布局設計,還是遵循標準化比例的界面構建,亦或是通過精細調控實現的文字易讀性,都是設計中不可或缺的要素。它們共同作用,不僅提升了設計的美學價值,更深層次地,優化了用戶體驗,確保了信息的有效傳達。在數字化時代,把握這些設計原則,是每一位設計師通往卓越設計道路上的必修課。
           
          在提升設計的易用性方面,文字大小與字體的變化扮演著至關重要的角色。信息架構通常圍繞標題、副標題和正文構建,通過調整文字尺寸與粗細,可以有效引導用戶注意力,確保信息的層次分明。蘋果公司便巧妙地將黃金比例應用于字體設計,其字體大小對比通常維持在1.7:1或0.7:1,這與黃金比例的美學原則不謀而合,進而增強了視覺層次和閱讀流暢性。
           
          對比策略的運用,是另一提升設計易用性的有效手段。通過文字大小、顏色及透明度的對比,可以顯著提升內容的可識別度。然而,在追求視覺效果的同時,還需遵循Web內容無障礙指南,確保所有用戶都能無障礙獲取信息,推薦的對比度標準為至少4.5:1。蘋果官網便是這一原則的絕佳示范,巧妙利用文字的大小、顏色及透明度差異,使得信息傳遞既高效又具有吸引力。
          設計小白必看|好設計的標準
           
           
           
          色彩的情感傳達是設計中不可忽視的一環。色彩的選擇不僅關乎美觀,更直接影響用戶的情緒反應。每種色彩因其明度、飽和度的不同,能喚起截然不同的情感體驗。例如,紅色既可以表達個性與現代感,也能展現性感魅力。為了精準掌握色彩的情感語言,可以借助“色彩意象尺”這一工具,它能幫助設計師了解每種色彩所蘊含的情感傾向,是品牌塑造和色彩搭配的重要輔助工具。在品牌設計過程中,色彩意象尺能指導設計師選定符合品牌調性的色彩方案,確保色彩運用與品牌理念和諧統一。
           
          以定義品牌色彩為例,通過色彩意象尺分析,設計師可以深入理解不同色彩的情感寓意,從而在眾多顏色中作出明智選擇,不僅塑造品牌的獨特視覺形象,還能激發目標受眾的共鳴,進一步強化品牌識別度與市場影響力。正確運用色彩,不僅美化視覺界面,更能在情感層面與用戶建立連接,是設計中不可或缺的策略之一。
          設計小白必看|好設計的標準
           
           
           
          舉個例子
          在著手創建一個面向全球95后用戶的時尚社交產品時,色彩選擇尤為關鍵。假設我們的品牌定位趨向于青春活力與輕盈,首先需從色彩意象尺中挑選符合這一氣質的色彩基礎。在這個過程中,我們鎖定紅色和黃色作為潛在的候選色彩。
           
          分析競品色彩策略:調研發現,多數競品偏向使用紅色系,這為我們提供了差異化的機會。于是,我們決定避開紅色,轉而選取黃色作為品牌的核心色彩,以此在市場中脫穎而出。
           
          考慮用戶偏好:接下來,需分析目標用戶群的性別比例。假設男性用戶占比更多,且偏好較為大膽的色彩組合,我們基于黃色進行調整,提高其明度和飽和度,最終選定了一款接近糖果玉米的鮮明黃色,以滿足年輕男性群體的審美偏好。
           
          確定品牌色彩:通過這一系列步驟,我們的品牌色方向得以確立——鮮明而富有活力的黃色,既體現了品牌的時尚特性,又與目標用戶群體產生強烈共鳴。
          設計小白必看|好設計的標準
           
           
          理論應用與實踐:理解品牌個性維度、色彩情感及色相意向尺等概念,對于初學者可能略顯陌生,但通過本文的介紹,希望你能逐步掌握這些理論,并在實際項目中不斷實踐。隨著時間的積累,你將能自信地從零開始創造獨特且經典的色彩搭配方案。
           
          推薦資源:為了進一步提升你的色彩搭配能力,推薦訪問“BrandColors.net”(請注意,網站名稱為示例,實際網址應自行搜索確認),這是一個匯聚了全球知名企業的品牌色彩庫,你可以從中獲取靈感,學習如何高效地運用色彩來強化品牌形象。
          設計小白必看|好設計的標準
           
           
          上文提到的案例,展示了如何根據產品定位(如優雅與高級),利用色彩意向尺選擇中性色調,進而打造出既符合品牌調性又具視覺吸引力的設計實例,進一步證明了色彩選擇在品牌塑造中的重要性。
           
          通過這些步驟和工具的綜合運用,你將能夠更加系統和科學地定義屬于自己的品牌色彩,為產品注入獨特的靈魂與魅力。
           
          在設計領域,圖片作為傳達信息的強有力工具,其重要性不言而喻。它不僅直接且有效地表達設計意圖,還能瞬間提升作品的整體品質。當設計中需要傳達特定情感或概念,如安全,通過展示警察、保鏢、手機鎖屏、戴口罩的圖像,或是保險箱、指紋鎖等象征物,可以直觀地向觀眾傳遞安全的信號。進一步,圖片的選擇還能啟發設計風格,如保險箱的塊面感、穩重的字體和對稱構圖,都能為設計增添安全、可靠的氣息。
           
          圖片的運用不僅限于情緒板,它們在設計項目中發揮著舉足輕重的作用,能夠清晰地傳達信息,提升視覺效果。一張精心挑選的攝影照片與設計巧妙融合,如汽車與風景的和諧搭配,能極大提升作品的藝術感和吸引力,尤其是在電商設計中,優質的圖片與產品氣質相得益彰,能有效提升銷售額與設計美感。
          設計小白必看|好設計的標準
           
           
           
          圖標設計同樣不容忽視,它們不僅是功能的指示符號,更是設計語言的重要組成部分。圖標的設計風格,如圓角大小、質感選擇,都能深刻影響作品的氣質傳達。柔和的斷口與疊加色彩圖標,給人以輕松愉悅的感受,適合營造親切友好的氛圍;而線條硬朗、質感穩重的圖標,則更適合金融等領域,傳遞出專業與信賴感。圖標設計還需遵循用戶習慣,采用與日常生活緊密相關的隱喻,確保用戶能夠迅速理解和感知,從而提升用戶體驗。
           
          綜上所述,設計師應擅長運用圖片和圖標作為設計語言,通過精準的圖片選擇與富含隱喻的圖標設計,有效傳達設計概念,提升設計的整體品質與溝通效率。這不僅是提升設計作品美學價值的關鍵,更是連接用戶情感與理解的橋梁。
           
          在產品設計的復雜生態系統中,按鈕作為用戶交互的核心元素,其設計的精確性與合理性至關重要。每個按鈕都承載著特定的行動召喚,因此,制定明確的按鈕規則是設計中不可或缺的一環。設計中,按鈕樣式多樣,如填充型、線框型、色塊描邊型及純文字型,每種類型對應不同的應用場景。主行動按鈕通常采用品牌色彩填充,以增強點擊欲望,如“購買”、“下一步”等關鍵操作;輔助操作則傾向于采用白色邊框按鈕,以減輕視覺負擔。警告操作采用紅色,無效狀態則以灰色呈現,以此明確按鈕的功能和狀態,避免用戶混淆。
          設計小白必看|好設計的標準
           
           
          缺乏明確的按鈕設計指引,將導致設計混亂和功能混亂,影響用戶體驗。因此,建立一套詳細的按鈕使用規范,是設計團隊的必備工作。
           
          視覺對齊準則同樣影響著設計的精確性和美觀度。設計時,精確的數學對齊雖為基礎,但在特定情況下,視覺效果的和諧同樣重要。如NAVER的閃屏設計,通過輕微的視覺偏差調整,使界面看起來更為和諧自然。在處理文字排版時,粗細字體的搭配需注意視覺平衡,有時需對字體大小進行微調,以確保視覺上的等效性。同樣,中英文數字混排時,由于視覺感知差異,需適當調整數字大小,確保整體視覺的均衡。
          設計小白必看|好設計的標準
           
           
           
          按鈕設計的規范性與視覺對齊的精確性,是提升產品設計質量的關鍵。通過細致入微的調整,如遵循特定場景下的按鈕樣式規則、適時進行視覺矯正、以及在字體與數字混排中追求視覺平衡,設計師能夠確保用戶界面既符合邏輯,又美觀協調。這些細節的把握,是設計從“可用”走向“卓越”的必經之路。


          作者:啊糖糖att
          鏈接:https://www.zcool.com.cn/article/ZMTYxOTMzMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          UI 設計公司蘭亭妙微分享:臨床生物樣本大數據中心網站設計

          杰睿

          一、項目背景

          隨著精準醫療興起,實現個體化診療需大量生物樣本數據支撐 。然而現實中,生物樣本數據雖海量,卻無序且利用不充分,各醫療機構還面臨計算資源短缺、存儲共享難和安全風險高等問題。臨床生物樣本大數據中心網站為不同醫療機構、科研機構和企業之間的合作提供了一個平臺,促進了跨機構的生物樣本數據共享和合作研究,打破了數據孤島,實現了資源的優化配置和協同創新。

          接到設計需求后,藍藍團隊專門去客戶現場面對面交流,更好地捕捉客戶的細節要求。該網站是國內首個開放式生物樣本數據中心。在設計過程中參考了很多國外設計,整體風格國際化。首頁提案設計過程中藍藍團隊嘗試了不同的視覺風風格以及交互方式,整體以“美觀、簡潔、易用”為主要設計目標。

          二、項目概述

          (一)產品定位

          臨床生物樣本大數據中心網站是專業的醫學數據平臺。面向醫學科研人員、臨床醫生及生物醫藥企業,整合多源臨床生物樣本數據,涵蓋豐富疾病類型與人群特征。以嚴格的數據質量控制確保準確性與可靠性,提供強大數據分析工具。建立共享機制,促進合作交流。專注臨床數據領域,保障數據安全與良好用戶體驗,致力于成為醫學研究與臨床應用的有力支撐。

          (二)目標用戶

          臨床生物樣本大數據中心網站的目標用戶主要包括醫學科研人員、臨床醫生和生物醫藥企業。醫學科研人員可借助豐富的臨床樣本數據開展各類研究項目,提升研究效率與可靠性。臨床醫生能通過該網站獲取疾病信息,為診斷和治療決策提供參考,跟蹤最新研究進展以提高醫療水平。

          (三)設計風格

          網站主色調采用藍色,且與logo保持一致,藍色通常與專業、可靠、冷靜等特質聯系在一起。對于該網站來說,藍色的界面可以讓用戶(包括醫療專業人士、研究人員和患者等)感受到網站的專業性,仿佛在傳達 “我們是值得信賴的專業機構,能夠妥善處理和管理重要的生物樣本數據”。

          level2_img.png

          三、設計前后對比

          設計后:藍色,更加國際化,創新的報告布局動效,內容更加條理清晰

          后.png

          設計前,展示形式不夠清晰,沒有形成主題風

          前.png

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          常見的 10 大圖標設計風格

          杰睿

          圖標是產品中不可或缺的部分,隨著設計趨勢的不斷變化,圖標設計風格也在不斷豐富。在產品中會出現哪些常見的圖標設計風格呢?結合產品案例體驗,今天黑馬哥為大家簡單梳理一下,列舉出常見的 10 個圖標設計風格。
          常見的 10 大圖標設計風格
           
           
           
           
          1. 線性功能圖標
          線性功能圖標是產品中最常見的風格,設計時控制好圖標規范即可。常見的多為單色(無彩色系、品牌色等),也有用品牌色作為點綴色的案例。
          常見的 10 大圖標設計風格
           
           
           
           
          2. 面性功能圖標
          面性功能圖標與線性風一樣,也是產品中最常見的風格。有單色單圖形、多色疊加風、微漸變風格等表達形式。
          常見的 10 大圖標設計風格
           
           
           
           
          3. 磨砂玻璃質感圖標
          磨砂玻璃質感圖標是輕質感的表達形式之一,也是近些年較為流行的趨勢??梢员馄揭部梢晕①|感,在立體感圖標上面也可以運用這類效果。
          常見的 10 大圖標設計風格
           
           
           
           
          4. 微質感圖標
          微質感圖標相較于扁平化設計而言,更能突出細節的深入和真實感的體現。微質感圖標的層次感也更豐富,該技法也是設計師的必備技能。
          常見的 10 大圖標設計風格
           
           
           
           
          5. 晶白風圖標
          晶白風圖標常用于金剛區欄目,利用白色不透明度關系和背景色關系進行圖標設計,圖標質感、層次感、空間感等都能得以體現。
          常見的 10 大圖標設計風格
           
           
           
           
          6. 立體感圖標
          立體感圖標分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設計趨勢的普及,立體感圖標的運用也逐步普及,也可以利用 AI 工具完成該類型圖標。
          常見的 10 大圖標設計風格
           
           
           
           
          7. 插畫風圖標
          插畫風圖標是插畫風格的簡化融入,以此提升圖標設計的特征感,使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。
          常見的 10 大圖標設計風格
           
           
           
           
          8. 主題化圖標
          主題化圖標設計風格多樣,會結合活動主題或者節日慶典等內容,根據主題設計圖標更能體現產品溫度。
          常見的 10 大圖標設計風格
           
           
           
           
          9. 寫實類圖標
          寫實圖標是以技法表現實物特征,比較考驗質感表現、透視光影等技法能力。隨著扁平化趨勢,寫實類設計逐步被淡化,但是也有部分產品會局部性運用。
          常見的 10 大圖標設計風格
           
           
           
           
          10. 實物圖圖標
          直接將產品實物圖作為圖標相對較少,但是依然有產品會選擇使用,還原其內容表達的真實性。
          常見的 10 大圖標設計風格
           
           
           
          以上為產品中常見的圖標設計風格,根據不同需求采用。對于設計師而言,這也是首先需要掌握的圖標技能。
           
          本文由 @黑馬青年(heimaui)原創發布。未經許可,禁止轉載。

          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTYzMDg3Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          小卡片大布局-帶你掌握卡片設計攻略

          杰睿

          UI界面中的卡片設計是一種常見且有效的設計方式,它通過將內容以模塊化、層次化的形式呈現,提升了界面的可讀性和用戶體驗。通過分割特性,可以賦予界面更多的層次感,為用戶帶來視覺上的愉悅。然而,卡片式設計并不是無懈可擊的,由于其分割的特性可能會對用戶的沉浸式瀏覽體驗產生一定的影響,例如造成橫向和縱向空間的浪費等問題。因此,在決定是否使用卡片式設計時,我們需要根據實際場景和內容形式進行判斷,而不是刻意追求“卡片式”而設計。
          卡片在移動端設備上,運用的越來越多,然而,在選擇使用卡片設計、視覺呈現方式以及其優點和缺點等關鍵因素方面,仍然存在一些被忽視的細節。在進行卡片設計時,我們應該注意哪些細微之處呢?以下我們就一起來探討下如何設計卡片。
          一、卡片的概念
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          什么是卡片?
           
          在日常生活中,一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片,這些卡片主要是用來傳遞卡片本身的一些信息。例如使用者可以從銀行卡上獲取卡片的所屬銀行、卡號等信息;可以從名片中知道卡片所屬人以及此人的一些基本信息等。
          UI界面中的卡片設計是一種常見且有效的設計方式,它通過將內容以模塊化、層次化的形式呈現,提升了界面的可讀性和用戶體驗。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          卡片出現在了我們生活中的方方面面,如名片、不干膠標簽、便利貼、會員卡..等,不管是何種類型的卡片,它都將代表著我們現實生活中的某個特定信息。卡片,通常包含圖片或文本信息,是一種有效的信息承載方式。UI界面中的卡片設計是一種常見且有效的設計方式,它通過將內容以模塊化、層次化的形式呈現,提升了界面的可讀性和用戶體驗。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          卡片式設計是一種常見的UI組件,它能夠將不同的內容分層次組合在一起,從而讓頁面看起來更有秩序感??ㄆǔS蓸祟}、內容描述、圖像、按鈕等元素組成,自帶簡約和易用的屬性,方便用戶快速理解和操作。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          二、卡片的交互設計
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          當用戶與卡片進行交互時,卡片需要星現特定的視覺反饋。常見的卡片狀態包括默認、
          懸浮(pc端)、激活、選中
          等。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          為了更好的區分卡片和背景,可以用填充底色、措邊、添加陰影來讓卡片與背景有區分。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          卡片的可讀性主要取決于字體的選擇和字號的大小,例如,即使兩個卡片具有相同的布局,但如果選擇的字體和字號不同,它們的可讀性和視覺效果可能會有很大的差別。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          卡片上的文字間距最好有一定的規律,這里可以按網格法來規劃,比如8px網格,10px網格等等。網格的使用其實可以很靈活,比如我這里的卡片其實就用到了8px網格,各間距就會用8的倍數來做。大小比例就盡量用黃金比例來處理,這樣做目的一方面是為了讓界面有秩序,另一方面是提升決策效率。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          在設計卡片布局時,通常會將多個卡片以網格的形式排列在頁面上,以保持水平方向和垂直方向的對齊,這樣可以使頁面看起來更有序、更規范。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          當卡片中包含標題、內容、圖片和按鈕等多種元素時,需要考慮到標題與圈片的位置關系以及標題和內容的長短等因素。例如,如果卡片的頂部是標題,由于標題字數可能不確定,我們可以在卡片上方保留至少兩行的空間以容納標題,而保持卡片內的圖片和按鈕位置不變。
          三、常見的卡片樣式
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          邊距卡片,
          這種類型的卡片在UI設計中最為常見,柔和的固角、邊緣陰影以及四周很自然的留白,讓內容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          懸浮卡片
          并非模態彈窗,與模態彈窗相比,懸浮卡片無需主動操作觸發,可作為臨時控件或長期固定顯示。此外,懸浮卡片能承載更多信息內容,可通過伸縮來定義卡片中的信息數量,多則展示全部內容,少則僅顯示關鍵信息,非常靈活。
          通欄卡片
          具有更強的視覺阻斷,對區分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背最色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。
          四、卡片、列表、無框設計的區別
          什么是卡片設計
          卡片式設計借用了現實世界中的卡片的特征,就像一張信用卡或名片,它承載了圖片、文字、按鈕等元素,以一個縮略的形式提供了快速瀏覽信息的模塊。在視覺表現形式上,卡片式設計可以分為扁平式卡片和通欄式卡片,前者更像傳統意義上的卡片,上下左右都留有空隙:后者僅在上下留有空隙,甚至無空隙。
          卡片式設計的優點
          1.獨特的設計語言
          ,卡片本身是一種設計語言,就像面形圖標一樣具有矩形的形狀,帶著圓角或直角,甚至還有輕微的陰影。這種獨特的設計語言可以快速地從扁平化設計中區分出來,帶給用戶強烈的辨識度。例如 Google 將卡片作為 Material design 的設計語言,運用到 Android系統所有的移動設備上,形成了獨一無二的視覺風格。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          2.靈活的空間擴展
          ,相比傳統的列表式設計只能縱向滾動瀏覽,卡片式設計的空間擴展性更加靈活多變。由于每一個卡片都是獨立存在的因此既可以縱向滾動,也可以橫向滑動。例如馬蜂窩的卡片式設計通過橫向滑動在狹窄的屏幕上展示更多內容,花瓣的兩列卡片式設計也為界面空間提供了更多的展示內容,這些都大大提高用戶的瀏覽效率。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          3.清晰的視覺呈現。
          卡片化繁為簡,將不同類型的元素有效地組織!在一起,形成一個封閉式的視覺形式。每一個卡片之間都具有獨立性不會相互干擾,它們保持著一致的外觀,讓界面看上去干凈和簡潔。例如 App Store 和去哪兒賦予每一個卡片一個主題,以簡單明快的內容表現形式吸引用戶的注意力,簡潔、連貫的卡片也避免了因為內容太長讓用戶產生畏懼心理。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          4.易于的內容整理。
          卡片是一個容器,將不同緯度的內容進行區分或將相同緯度的內容歸納在一起,形成一個獨立的模塊,能有效地避免信息散亂和分類不清晰的狀況發生,讓界面的視覺層次變得清晰。例如途牛在一個界面中展示了多種不同形式的卡片式設計,通過卡片的大小顏色、圖文組合進行區分,視覺層次清晰明了。再例如騰訊視頻將相同功能的列表進行分組,有助于用戶快速獲取信息。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          5.特殊的功能屬性。
          卡片不僅是內容的容器,同樣也是操作和交與的載體,由于它的視覺表現是獨立存在的,因此可以用于背景之上的對話框設計,以強烈的視覺表現力尋求一次互動。例如進入后彈出一個對話框,請求用戶開啟通知。再例如滴滴出行和美團外賣將一次活動推廣展現在卡片上,以此快速吸引用戶的注意力。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          什么是列表式設計
          列表式設計是 App 中最常見的表現形式,它使用分割線對不同的元素進行有效的組織,幫助用戶理解界面的視覺層次。在視覺表現形式上,列表式設計根據分割線的不同長度可以分為半分割線式列表、縮進分割線式列表和通欄分割線式列表。
          列表式設計的優點
          1.輕量化的設計。
          列表式設計是真正意義上的扁平化設計,不像卡片式設計那樣有著清晰的視覺層次,它讓所有的信息內容處于同一個平面。這樣的好處是干凈的界面可以減少對用戶的視覺干擾,以便用戶順暢的進行瀏覽。親切和友好的用戶體驗是列表式設計的最大優點,它非常適合于形式簡單的信息內容。例如網易云音樂和今日頭條的每一條動態都有著相似的形式,輕量化的列表式設計讓用戶的瀏覽變得輕松和優雅。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          2.提升瀏覽效率。
          列表式設計沒有寬厚的空隙作為信息內容的區分而是使用一條細窄的分割線。它非常適合于非常多的同類的信息內容、可以極大地節省界面的空間,讓狹小的屏幕顯示更多內容,在無形中就提升了用戶的瀏覽效率。例如 微博 和騰訊新聞的商品都是左圖右文的結構,使用簡單的列表式設計,有助于用戶快建地進行瀏覽。
          我們再來試看分析微博動態為什么使用卡片式設計,而不是列表式設計。首先,微博強調每一個動志的豐富內容和獨特個性,希望用戶進行分事、評論和點贊操作,卡片式設計有效地將用戶的注意力停量在當前的卡片上;其次,五花八門的內容形式使用卡片式設計易于整理,可以保持清晰的視覺層次。
          什么是無框式設計
          無框式設計是一種去形式化的設計,它強調化繁為簡,去除一切與內容無類的裝飾性元素,旨在突出內容本身、好讓重要的信息及功能更容易被關注,讓用戶更加清晰和直觀地進行瀏覽。在無框式設計中,你幾乎看不到區分內容的分割線,它通過大間距就完成了視覺層次的劃分留白是它的最大武器。
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          無框式設計的優點
          1.極簡主義風格。
          相比卡片式設計追求“多”,無框式設計則追求“少”,即用最簡單的形式和最理性的設計創造最深入人的藝術感受例如余音使用白色的背景,左小右大的邊距和大量的留白,呈現出一種獨特的產品氣質。列表設計去掉分割線,干凈到一塵不染的界面讓用戶產生極為深刻的印象。
          2.掌控注意力
          。無框式設計最顯著的特征就是去除裝飾性的分割線通過間距的親密和疏遠對比進行視覺層次的劃分。大量的留白設計把空間留給內容,把內容留給用戶。使用了無框式設計沒有了那些分割線的干擾,有效地掌控了用戶的注意力,讓用戶把目光集中在內容本身。
          3.保持界面整潔。
          設計是連貫、統一的,沒有了邊框可以讓界面保持干凈、整潔的畫面。而一旦有了邊框,這種簡潔的設計就會被打部精王德商處可見那些細碎的分副線或描邊,使得界面變的擁擠不堪。大部分用戶都喜愛干凈、整潔的畫面,微博和騰訊新聞就是這樣的設計。
          五、卡片的應用場景
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          瀑布流
          瀑布流主要正針對圖片較多、或以圖片為主的內容設計,它最大的優點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。
          信息流
          信息流主要通過文字、圖片或視頻等媒介來展示較長的內容,這需要用戶花費一定的時間進行滑動和瀏覽,才能篩選出對自己有用的信息。
          左右滑動
          在音樂、視頻等以圖片為主要內容的產品中,卡片式左右滑動的設計最為常見。這是因為卡片式設計能夠更好地展現內容的層次感和吸引力,尤其對于以圖片為主的產品來說,卡片式設計可以提供更豐富的視覺效果,增強用戶的瀏覽體驗。
          頁面頭部
          卡片式設計是一種有效的布局方式,它可以在個人中心、個人主頁、會員等頁面中,將關鍵信息進行整合和概括,從而形成清晰、連貫的視覺結構。
           
          六、卡片的設計原則
          在UI界面中,卡片設計是一種重要的布局方式,它以其簡潔性、模塊化和可自定義特性而備受設計師與使用者青睞。以下是卡片設計時需要遵循的一些關鍵原則:
          小卡片大布局-帶你掌握卡片設計攻略
           
           
          一、簡潔清晰原則
          信息精煉:每張卡片應僅展示關鍵信息或功能,防止信息負荷過大,確保用戶能夠快速獲取所需內容。
          視覺元素簡潔:避免在卡片上添加過多的裝飾性元素,保持設計的簡潔性。
          二、一致性原則
          視覺風格統一:不同卡片之間應保持一致的視覺風格,包括顏色、字體、圖標等,以提高用戶識別及使用效率。
          布局規范:卡片的布局應遵循一定的規范,如邊距、圓角大小等,以保持整體的一致性。
          三、層次性原則
          信息層級明確:通過字體大小、顏色、圖標等方式明確信息的層級關系,引導用戶按照重要性順序瀏覽信息。
          視覺空間感:利用投影、前后顏色設定等手段提升整體設計層次感,使卡片看起來更加立體和自然。
          四、交互體驗原則
          操作便捷:為用戶提供充足的操作空間與方式,如點擊、滑動等,鼓勵用戶深度參與信息生成與傳播過程。
          反饋及時:在用戶與卡片進行交互時,應提供及時的反饋效果,如顏色變化、動畫等,以增強用戶的交互體驗。
          五、適應性原則
          響應式設計:卡片設計應能夠適應不同屏幕尺寸和設備類型,確保在各種環境下都能保持良好的顯示效果。
          內容靈活:卡片的內容應具有一定的靈活性,可以根據實際需求進行調整和更新。
          六、設計細節原則
          圓角設計:圓角的設定應符合整體的風格調性,大圓角表達柔和,小圓角表達硬朗。
          邊距與留白:合理的邊距和留白可以提升整體設計的層次感,使內容更加突出且易于閱讀。
          標題與正文:標題應簡短明了,用于說明卡片的內容;正文部分則應簡潔精煉,避免冗余信息。
          卡片設計在UI界面中扮演著重要角色,它不僅能夠提升用戶體驗,還能增強信息的可讀性和可理解性。因此,在進行卡片設計時,應遵循簡潔清晰、一致性、層次性、交互體驗、適應性以及設計細節等原則,以確保卡片設計的質量和效果。
          總結
          隨著科技的不斷進步和用戶需求的變化,卡片設計也在不斷發展和創新。未來,卡片設計將更加注重個性化和智能化。通過用戶行為分析和機器學習等先進技術手段,可以為用戶提供更加精確和個性化的推薦和服務。同時,虛擬現實(VR)和增強現實(AR)等新技術的發展也將為卡片設計帶來更多元化的應用場景和更豐富的用戶體驗。
          綜上所述,UI界面中的卡片設計是一種重要且有效的設計方式。通過遵循設計原則、掌握設計技巧并借鑒優秀案例,可以設計出既美觀又實用的卡片界面。


          作者:蘑菇小象117
          鏈接:https://www.zcool.com.cn/article/ZMTYzNjU2MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          數據圖表:多領域信息可視化的核心工具

          ui設計分享達人

           
           
          PART 1 ——————
          數據圖表的概述
          數據圖表是將復雜的數據集轉換為圖形或圖像的過程,旨在通過視覺化的方式簡化信息的理解和分析。它不僅是一種技術手段,更是一種溝通工具,能夠幫助人們更有效地解釋數據、發現模式、做出決策并傳達見解。
          數據圖表:多領域信息可視化的核心工具
           
           
          「核心價值」
          ·  簡化復雜信息:數據圖表通過圖形化的手段簡化了大量數字或文本信息,使讀者能夠迅速抓住關鍵點。
          ·  促進理解與學習:利用人類大腦對圖形和色彩的敏感性,數據圖表加速了信息處理過程,支持教育和培訓。
          ·  輔助決策制定:數據圖表為管理層或其他決策者提供了有價值的商業智能,支持快速決策。
          ·  提升溝通效果:促進了跨部門協作和公眾傳播的效果。
           
          「核心要素」
          ·  數據:來源可以是數據庫、API或文件,類型包括定量和定性數據。
          ·  圖表類型:根據數據特性和分析目的選擇最恰當的圖表類型。
          ·  設計原則:確保圖表清晰易讀、準確無誤、風格一致且具備視覺吸引力。
           
          「核心目標」
          ·  簡化復雜信息:使大量數字或文本信息變得直觀易懂。
          ·  促進理解與學習:加速信息處理過程,支持教育和培訓。
          ·  輔助決策制定:提供有價值的商業智能,支持快速決策。
          ·  提升溝通效果:增強跨部門協作和公眾傳播的效果。
          ·  探索數據關系:發現隱藏模式,驗證假設。
          ·  監測與跟蹤進展:實時監控關鍵指標,規劃項目管理。
           
          ?? 
          PART 2
           ——————
          應用標準指南
          數據圖表:多領域信息可視化的核心工具
           
           
          設計有效的數據圖表不僅需要選擇合適的圖表類型,還需要遵循一系列設計要點以確保圖表既美觀又實用。以下是應用數據圖表時需要注意的標準指南:
           
          1. 明確目標與受眾
          ·  理解需求:明確你希望通過圖表傳達的信息是什么。
          ·  考慮受眾:了解你的目標受眾是誰,他們的知識水平和興趣點在哪里。
          2. 簡潔性與清晰度
          ·  去除冗余:避免不必要的裝飾元素,保持圖表簡單明了。
          ·  突出重點:通過顏色、字體大小等方式強調最重要的信息。
          ·  易于解讀:確保圖表中的每個元素都有其明確的意義,并且容易被理解。
          3. 數據準確性
          ·  精確無誤:保證所使用的數據是最新且經過驗證的。
          ·  透明度:注明數據來源,增加可信度;如果適用,提供數據獲取方法或計算公式。
          4. 合理使用顏色
          ·  色彩心理學:根據情感聯想選用顏色,例如綠色通常關聯增長,紅色常用來警示。
          ·  對比度:使用足夠的顏色對比來區分不同的數據系列或類別,同時考慮到色盲用戶的需要。
          ·  一致性:在多個圖表中保持顏色方案的一致性,以便于比較。
          5. 標簽與注釋
          ·  完整標簽:為所有軸、圖例和其他重要元素添加清晰的標簽。
          ·  必要注釋:對于特別重要的數據點或異常情況進行說明,幫助用戶更好地理解圖表內容。
          6. 圖表標題與描述
          ·  簡潔標題:用簡短而準確的語言概括圖表的主要信息。
          ·  輔助文本:如有必要,可以添加副標題或簡短描述來補充背景信息或解釋圖表含義。
          7. 交互性(如適用)
          ·  工具提示:當用戶將鼠標懸停在某個數據點上時,顯示詳細信息。
          ·  動態更新:對于實時數據,設計允許自動刷新的圖表。
          ·  篩選與排序:提供選項讓用戶根據自己的興趣過濾或重新排列數據。
          8. 響應式設計
          ·  適應多平臺:確保圖表能夠在不同設備(桌面電腦、平板電腦、智能手機)上良好顯示。
          ·  可縮放:允許用戶放大特定區域或滾動查看超出初始視圖的數據。
          9. 避免誤導性表示
          ·  比例尺的選擇:合理設置Y軸起始值和增量,避免夸大或縮小差異。
          ·  避免三維效果:除非絕對必要,否則不要使用三維效果,因為它們可能會扭曲感知比例。
          10. 故事講述
          ·  邏輯連貫:構建一個從開始到結束逐步理解數據背后意義的故事線。
          ·  引導視線:通過布局和視覺層次引導觀眾關注最重要或最有趣的部分。
          11. 測試與反饋
          ·  用戶測試:邀請真實用戶測試圖表,收集反饋以改進設計。
          ·  持續優化:基于用戶反饋和技術進步不斷調整和完善圖表設計。
           
          遵循上述標準可以幫助創建出既美觀又功能強大的數據圖表,從而更有效地支持決策過程并促進信息交流。
           
          ?? 
          PART 3 
          ——————
          圖表構成元素
          想準確的將圖表與所要表現的數據進行對應,需要了解圖表本身所包含的基本元素。
          數據圖表:多領域信息可視化的核心工具
           
           
          在這些元素中正常情況下一定在圖表中的有:標題、時間范圍、圖形主體,經常出現的有:坐標系、圖例、提示信息,有時候會有的有:切換選項和值域。
           
          · 標題
          (Title)
          簡明扼要地說明圖表的內容和目的。
          標題應位于圖表上方居中位置,使用清晰易讀的字體和大小。
           
          · 坐標系(Coordinate System)
          定義圖表的X軸和Y軸,以及數據點的位置。
          坐標軸應清晰地標記,包括刻度線和刻度值。確??潭乳g隔合適,易于閱讀。
           
          · 時間范圍(Time Range)
          告知用戶圖表數據覆蓋的時間段。
          如果圖表顯示的是時間序列數據,時間范圍可以放在標題下方或者圖表底部的X軸標簽旁邊。
           
          · 圖形主體(Graph Body)
          定義圖表的X軸和Y軸,以及數據點的位置。
          坐標軸應清晰地標記,包括刻度線和刻度值。確??潭乳g隔合適,易于閱讀。
           
          · 圖例(Legend)
          解釋圖表中不同顏色或圖案代表的數據系列。
          圖例應放置在圖表的邊角位置,不妨礙圖表的主體內容。圖例中的顏色或圖案應與圖表中的一致。
           
          · 提示信息(Tooltip)
          允許用戶選擇不同的數據系列或時間范圍。
          切換選項可以是按鈕或下拉菜單的形式。應放置在圖表的一側或頂部,不影響圖表主體的可視性。
           
          · 切換選項(Toggle Options)
          允許用戶選擇不同的數據系列或時間范圍。
          切換選項可以是按鈕或下拉菜單的形式。應放置在圖表的一側或頂部,不影響圖表主體的可視性。
           
          · 值域(Value Range)
          允許用戶調整坐標軸的范圍,以聚焦于特定的數據區間。
          值域調整通常出現在坐標軸附近的小控件中,例如滑塊或輸入框。
           
          ?? 
          PART 4 
          ——————
          常見的數據圖表類型
          數據圖表:多領域信息可視化的核心工具
           
           
          在C端(消費者端)應用中,數據圖表是一種非常重要的可視化工具,它能夠幫助用戶更直觀地理解和分析數據。
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
          數據圖表:多領域信息可視化的核心工具
           
           
           
          ?? 
          PART 5 
          ——————
          選擇合適圖表的關鍵因素
          數據圖表:多領域信息可視化的核心工具
           
           
          挑選最佳圖表類型是一個綜合考量數據集特點、應用場景需求以及目標受眾理解能力的過程,是確保數據有效傳達的關鍵。以下是選擇圖表類型時應考慮的幾個重要要點:
           
          1. 數據性質
          ·  定量 vs 定性:確定你的數據是數值型(如銷售額、溫度)還是分類型(如性別、地區)。數值型數據通常適合柱狀圖、折線圖等;分類型數據可能更適合餅圖或條形圖。
          ·  時間序列 vs 非時間序列:如果數據隨時間變化,如股票價格或天氣預報,則折線圖和面積圖可能是最佳選擇。如果是靜態數據,如人口統計信息,則可以考慮柱狀圖或餅圖。
           
          2. 比較需求
          ·  類別對比:如果你需要比較不同類別的數量或比例,柱狀圖、條形圖和餅圖是很好的選擇。
          ·  趨勢分析:對于展示隨時間或其他連續變量的變化趨勢,折線圖和面積圖更為合適。
          ·  相關性探索:當你要研究兩個變量之間的關系時,散點圖可以幫助你發現潛在的相關性或模式。
           
          3. 數據量與復雜度
          ·  少量數據:對于簡單且數據點較少的情況,餅圖、條形圖等可以直接清晰地傳達信息。
          ·  大量數據:面對大量數據或高維數據集時,熱力圖、氣泡圖、樹狀圖等能夠更有效地處理復雜信息,并幫助識別模式。
           
          4. 用戶目標與受眾理解能力
          ·  決策支持:如果目的是輔助快速決策,那么應該選擇易于解讀、直觀明了的圖表類型,如子彈圖、漏斗圖等。
          ·  教育或解釋:針對教育目的或需要詳細解釋的數據,可以選擇更具互動性的圖表,如帶有工具提示或動態更新功能的圖表。
           
          5. 圖表的功能性
          ·  強調差異:如果你想突出顯示異常值或顯著差異,可以選擇箱線圖、瀑布圖等。
          ·  構成分析:為了展示各部分占整體的比例關系,餅圖和堆疊柱狀圖非常有用。
          ·  分布展示:直方圖和密度圖能很好地展示數據的分布情況,包括集中趨勢和離散程度。
           
          6. 可視化效果與美觀性
          ·  視覺吸引力:某些圖表不僅傳遞信息,還能增強視覺美感,如玫瑰圖、雷達圖等,適用于報告封面或演示文稿中。
          ·  空間效率:在有限的空間內傳達更多信息,子彈圖、儀表盤等緊湊設計的圖表是不錯的選擇。
           
          7. 行業慣例與標準
          ·  領域特定:不同的行業可能有其偏好使用的圖表類型,例如金融領域常用蠟燭圖,地理信息系統常用地圖可視化。
          ·  遵循規范:遵守所在領域的圖形表示規范,確保圖表的專業性和可接受性。
           
          通過綜合考慮上述要點,你可以為特定的數據集和應用場景挑選出最合適的圖表類型,從而最大化數據的價值并促進有效的溝通。選擇圖表時,務必結合實際需求和用戶背景,確保最終呈現的信息既準確又易于理解。
           
          ?? 
          PART 6 
          ——————
          使用場景
          數據圖表:多領域信息可視化的核心工具
           
           
          「健康類應用」
          健康類App通過使用多樣化的數據圖表,不僅讓用戶對自己的健康狀況有了更直觀的理解,同時也激勵用戶采取積極的生活方式改變,從而改善健康狀況。
          數據圖表:多領域信息可視化的核心工具
           
           
          ——圖表運用特點——
          1. 清晰易讀
          ·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關鍵信息,如每日步數、卡路里消耗等。
          ·  視覺層次分明:使用不同的顏色、字體大小和對比度來區分關鍵信息和次要信息,最重要的數據一目了然。
          ·  一致性:整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數據的理解。
           
          2. 互動性
          ·  深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細的數據,如具體日期的鍛煉記錄或飲食攝入情況。
          ·  多維度篩選:靈活的篩選選項,讓用戶可以根據時間范圍(日、周、月)、運動類型等進行篩選,滿足個性化的查詢需求。
          ·  導出功能:為用戶提供將圖表導出為圖片或CSV格式的功能,便于打印或分享給教練或朋友。
           
          3. 個性化
          ·  用戶定制:根據用戶的個人健康目標或偏好調整圖表內容,例如突出顯示關鍵指標的變化趨勢或特定訓練方案的效果。
          ·  目標跟蹤:類似于健康管理目標設定,允許用戶設定并跟蹤自己的健身目標,如減重、增肌等。
          ·  建議與反饋:集成系統推薦的圖表視圖或設置,方便用戶快速評估進展,并為用戶提供有針對性的反饋和建議。
           
          4. 實時更新
          ·  即時反饋:圖表能夠迅速反映最新的健身數據,如實時監測的心率或運動進度,這對于及時調整訓練計劃尤為重要。
          ·  同步與整合:與其他健身設備或平臺無縫對接,自動同步來自各種來源的數據,如智能手環、跑步機等,確保數據的完整性和準確性。
          ·  通知與提醒:當某些關鍵指標達到預設目標或需要特別關注時,及時向用戶發送通知或提醒,鼓勵持續參與。
           
          5. 教育與支持
          ·  學習資源:提供額外的學習資源鏈接或內置教程,幫助用戶更好地理解他們的健身數據和圖表背后的意義。
          ·  社區交流:創建一個安全的社區平臺,讓用戶之間可以交流經驗和支持,增加互動性和動力。
           
          綜上所述,健身類APP圖表運用的設計特點不僅強調了清晰易讀、互動性強、個性化定制和實時更新,還特別注重用戶體驗和社區互動。這些特性共同作用,可以幫助用戶更有效地管理和理解健身數據,從而促進更好的健康管理和運動效果。
           
          「醫療輔助應用」
          醫療輔助應用的數據圖表設計特點可以從健身類APP的設計特點中汲取靈感,但同時也需要考慮到醫療行業的特殊需求和嚴格標準。
          數據圖表:多領域信息可視化的核心工具
           
           
          ——圖表運用特點——
          1. 清晰易讀
          ·  專業術語解釋:確保圖表本身清晰易讀的同時,提供必要的術語解釋或簡短說明,幫助非專業人士理解復雜的醫學概念。
          ·  視覺層次分明:使用不同的顏色、字體大小和對比度來區分關鍵信息和次要信息,確保最重要的數據一目了然。
          ·  一致性:保持整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數據的理解。
           
          2. 互動性
          ·  深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細的數據,如具體日期的測量結果或特定治療階段的效果。
          ·  多維度篩選:靈活的篩選選項,讓用戶可以根據時間范圍(日、周、月)、病患群體、疾病類型等進行篩選,滿足個性化的查詢需求。
          ·  導出功能:為用戶提供將圖表導出為PDF、CSV等格式的功能,便于打印或分享給其他醫療專業人員。
           
          3. 個性化
          ·  患者定制:根據患者的健康狀況、治療計劃或個人偏好調整圖表內容,例如突出顯示關鍵指標的變化趨勢或特定治療方案的效果。
          ·  醫生建議:集成醫生推薦的圖表視圖或設置,方便醫生快速評估病情進展,并為患者提供有針對性的反饋。
          ·  健康目標跟蹤:類似于健身APP中的目標設定,允許患者設定并跟蹤自己的康復或健康管理目標,如血壓控制、體重管理等。
           
          4. 實時更新
          ·  即時反饋:圖表能夠迅速反映最新的健康數據,如實時監測的生命體征或實驗室檢測結果,這對于緊急情況下的決策尤為重要。
          ·  同步與整合:與其他醫療設備或系統無縫對接,自動同步來自各種來源的數據,如可穿戴設備、醫院信息系統等,確保數據的完整性和準確性。
          ·  通知與預警:當某些關鍵指標超出正常范圍時,及時向患者和相關醫護人員發送通知或警告,以便采取必要的干預措施。
           
          5. 隱私與安全
          ·  數據加密:所有傳輸和存儲的數據都應經過嚴格的加密處理,確?;颊咝畔⒌陌踩?。
          ·  訪問權限控制:實施細粒度的權限管理,確保只有授權人員可以查看敏感數據。
          ·  合規性:遵守相關的法律法規和行業標準,如HIPAA(美國健康保險流通與責任法案)或其他國家/地區的療數據保護法規。
           
          6. 教育與支持
          ·  學習資源:提供額外的學習資源鏈接或內置教程,幫助用戶更好地理解他們的健康數據和圖表背后的意義。
          ·  社區交流:創建一個安全的社區平臺,讓患者之間或患者與醫生之間可以交流經驗和支持。
           
          綜上所述,醫療輔助Web應用的數據圖表不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關注隱私保護和安全性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助醫療專業人員和患者更有效地管理和理解健康數據,從而促進更好的醫療服務和健康管理。
           
          「金融類應用」
          金融類應用的數據圖表設計需要特別關注清晰性、互動性、個性化和實時更新,同時還要考慮到金融行業的特殊需求如安全性、合規性和專業性。
          數據圖表:多領域信息可視化的核心工具
           
           
          ——圖表運用特點——
          1. 清晰易讀
          ·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關鍵信息,如股票價格走勢、投資組合表現等。
          ·  視覺層次分明:不同的顏色、字體大小和對比度來區分關鍵信息和次要信息,確保最重要的數據一目了然。
          ·  一致性:整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數據的理解。
          ·  術語解釋:提供必要的術語解釋或簡短說明,幫助非專業人士理解復雜的金融概念。
           
          2. 互動性
          · 深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細的數據,如具體日期的交易記錄或市場波動情況。
          ·  多維度篩選:靈活的篩選選項,讓用戶可以根據時間范圍(日、周、月、年)、資產類型(股票、債券、基金等)進行篩選,滿足個性化的查詢需求。
          ·  導出功能:為用戶提供將圖表導出為圖片、PDF或CSV格式的功能,便于打印或分享給財務顧問或同事。
          ·  情景模擬:提供情景分析工具,用戶可以調整變量(如利率、通脹率)來預測不同市場條件下的投資表現。
           
          3. 個性化
          ·  用戶定制:根據用戶的個人投資目標或偏好調整圖表內容,例如突出顯示關鍵指標的變化趨勢或特定投資策略的效果。
          ·  風險偏好匹配:基于用戶的風向承受能力,推薦適合的投資組合配置,并展示相應的風險與回報圖表。
          ·  建議與反饋:集成系統推薦的圖表視圖或設置,方便用戶快速評估投資進展,并為用戶提供有針對性的投資建議和反饋。
           
          4. 實時更新
          · 即時反饋:確保圖表能夠迅速反映最新的金融市場數據,如實時股價、匯率變動等,這對于及時調整投資策略尤為重要。
          ·  同步與整合:與其他金融平臺或服務無縫對接,自動同步來自各種來源的數據,如銀行賬戶、證券賬戶等,確保數據的完整性和準確性。
          ·  通知與提醒:當某些關鍵指標達到預設閾值或需要特別關注時,及時向用戶發送通知或提醒,幫助用戶抓住投資機會或規避風險。
           
          5. 安全與合規
          ·  數據加密:所有傳輸和存儲的數據都應經過嚴格的加密處理,確保用戶隱私和資金安全。
          ·  訪問權限控制:實施細粒度的權限管理,確保只有授權人員可以查看敏感數據。
          ·  合規性:遵守相關的法律法規和行業標準,如GDPR(歐盟通用數據保護條例)、SOX(薩班斯-奧克斯利法案)等,確保數據處理符合法律要求。
           
          6. 教育與支持
          ·  學習資源:提供額外的學習資源鏈接或內置教程,幫助用戶更好地理解他們的金融數據和圖表背后的意義。
          ·  社區交流:創建一個專業的社區平臺,讓用戶之間或用戶與金融專家之間可以交流經驗和支持。
          ·  客戶支持:提供在線客服或熱線電話,確保用戶在遇到問題時能夠得到及時的幫助。
           
          綜上所述,金融類應用的數據圖表設計不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關注安全性和合規性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助用戶更有效地管理和理解金融數據,從而做出更加明智的投資決策。
           
          「信息記錄類應用」
          另一類比較常用圖表的 App 是信息記錄類 App,這些 App 通常會統計用戶主動輸入信息的頻次或頻率,依此生成一段時間周期內的統計圖表。
          數據圖表:多領域信息可視化的核心工具
           
           
          ——圖表運用特點——
          1. 清晰易讀
          ·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關鍵信息,如每日情緒波動、月度費用支出等。
          ·  視覺層次分明:不同的顏色、字體大小和對比度來區分關鍵信息和次要信息,確保最重要的數據一目了然。
          ·  一致性:保持整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數據的理解。
          ·  術語解釋:對于不太常見的記錄類別或指標,提供必要的解釋或簡短說明,幫助用戶理解圖表內容。
           
          2. 互動性
          ·  深度探索:允許用戶通過點擊、滑動或其他交互操作深入查看更詳細的數據,如具體日期的記錄詳情或特定事件的影響。
          ·  多維度篩選:提供靈活的篩選選項,讓用戶可以根據時間范圍(日、周、月、年)、記錄類型(如費用分類、情緒標簽)進行篩選,滿足個性化的查詢需求。
          ·  導出功能:為用戶提供將圖表導出為圖片、PDF或CSV格式的功能,便于打印或分享給朋友或顧問。
          ·  情景模擬:在適用的情況下,提供情景分析工具,用戶可以調整變量(如預算分配)來預測不同情況下的結果。
           
          3. 個性化
          ·  用戶定制:用戶的個人目標或偏好調整圖表內容,例如突出顯示關鍵指標的變化趨勢或特定習慣養成的效果。
          ·  目標跟蹤:類似于健身APP中的目標設定,允許用戶設定并跟蹤自己的記錄目標,如每月節省金額、每周閱讀書籍數量等。
          ·  建議與反饋:集成系統推薦的圖表視圖或設置,方便用戶快速評估進展,并為用戶提供有針對性的反饋和建議。
           
          4. 實時更新
          ·  即時反饋:圖表能夠迅速反映最新的記錄數據,如實時更新的情緒評分或新添加的費用條目,這對于及時調整計劃尤為重要。
          ·  同步與整合:與其他相關平臺或服務無縫對接,自動同步來自各種來源的數據,如銀行賬戶、健康監測設備等,確保數據的完整性和準確性。
          ·  通知與提醒:當某些關鍵指標達到預設閾值或需要特別關注時,及時向用戶發送通知或提醒,幫助用戶保持記錄習慣或抓住改進機會。
           
          5. 隱私與安全
          ·  數據加密:所有傳輸和存儲的數據都應經過嚴格的加密處理,確保用戶的個人信息和敏感數據的安全。
          ·  訪問權限控制:實施細粒度的權限管理,確保只有授權人員可以查看敏感數據。
          ·  合規性:遵守相關的法律法規和行業標準,如GDPR(歐盟通用數據保護條例),確保數據處理符合法律要求。
           
          6. 教育與支持
          · 學習資源:提供額外的學習資源鏈接或內置教程,幫助用戶更好地理解他們的記錄數據和圖表背后的意義。
          ·  社區交流:創建一個安全的社區平臺,讓用戶之間可以交流經驗和支持,增加互動性和動力。
          ·  客戶支持:提供在線客服或熱線電話,確保用戶在遇到問題時能夠得到及時的幫助。
           
          7. 歷史回顧與趨勢分析
          ·  長期趨勢:提供長周期的趨勢分析圖表,幫助用戶回顧過去一段時間內的變化和發展,如年度費用總結、多年情緒變化等。
          ·  模式識別:通過可視化手段幫助用戶發現隱藏的模式或規律,如消費習慣、情緒波動周期等。
          ·  里程碑標記:在圖表中標記重要的里程碑或轉折點,如重大事件發生的時間、重要決策做出的時刻等,增強回憶和反思的價值。
           
          綜上所述,信息記錄類應用的數據圖表設計不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關注隱私與安全性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助用戶更有效地管理和理解記錄的信息,從而促進更好的自我管理和行為改變。
           
          ?? 
          PART 7 
          ——————
          結語

          情緒價值在體驗設計中的應用

          ui設計分享達人

          近兩年“情緒價值”這個詞,相信每個人應該或多或少都有過接觸,從商業空間的營銷場景到后來滲透到每個領域、每個行業。 
           
          先說下這個詞的概念,它源于心理學和社會學, 本意為:“它指的是一個人或事物對他人情感狀態所產生的積極影響和價值。這種價值不僅僅體現在短暫的愉悅感受上,更包括長期的情緒穩定、心理滿足和精神支持。” 
          無論是在網紅還是在新型電商行業中,許多品牌強調的已經不是單一的產品功能價值,而是增加了強調在消費體驗中為消費者帶來的快樂、滿足、歸屬感等等一些積極的情緒。這足以說明,無論是品牌、產品還是服務越來越注重為消費者提供情緒價值?!?/span>
           
          而用戶體驗設計的本質其實就是讓人在使用產品的過程中有非常愉悅的感覺,這一點與“情緒價值”這個詞的核心也有點不謀而合。 
           
          情緒價值在體驗設計中的應用
           
           
          相信我們都有這樣的疑問:情緒價值在體驗設計中重要嗎,有什么具體的關系?在設計工作中的情緒價值到底重要嗎?情緒價值對產品使用的提升有哪些,具體要怎么做?相信看完下面的內容,你應該會對上面的問題有答案的。 
           
          一、情緒價值對用戶體驗的影響
          首先我們可能需要了解情緒價值能給用戶帶來什么?申晨老師在一次分享會上有提到過情緒價值的三個方向:愉悅感、保障感、專享感。三者由淺入深影響著用戶在使用產品時的情緒變化,對應到體驗設計中是這樣的: 
          •  
            愉悅感→影響用戶的滿意度
          •  
            保障感→影響用戶的容忍度
          •  
            專享感→影響用戶的忠誠度
           
          提升用戶滿意度
          積極情緒的誘導
           
          當產品或服務能夠提供情緒價值時,會引發用戶的積極情緒。如下圖,三種UI會給用戶不同的情緒反饋,積極的情緒(右圖)往往會讓用戶駐足停留的更長一些,即便沒有需求,也會更愿意去花費一些時間去深入了解,進而帶來一些拉新、瀏覽轉化等等數據的提升 
          情緒價值在體驗設計中的應用
           
           
          滿足情感需求
           
          許多產品和服務通過滿足用戶的情感需求來提供情緒價值。用戶在使用這些產品時,會因為產品所承載的情感因素而感到滿足,進而提升對產品體驗的滿意度。例如: 
          •  
            社交媒體的分享被贊,是一種被關注、被認可的情感需求;
          •  
            直播平臺app的互動效果,也是一種渴望互動的情感需求,以此刺激觀看者送出禮物。
          改善用戶對負面體驗的容忍度
          情緒緩沖作用
           
          當產品或服務出現一些小問題時,之前積累的情緒價值可以起到緩沖作用。例如: 
          •  
            在使用某工具產品時,友好的客服系統會給用戶比較積極的情緒積累,從而選擇包容一些比較小的錯誤;
          •  
            還有很多錯誤頁面的情感化設計,目的亦是如此。
          引導解決問題的積極態度
           
          如果用戶對產品或服務有情感上的依賴,當遇到問題時,他們會更積極地尋找解決辦法,而不是抱怨和放棄。例如: 
          •  
            當產品或服務偶爾出現卡頓現象時,其用戶社區氛圍很好,用戶之間可以互相交流使用經驗和解決方案,并且軟件開發者也會積極回應用戶的問題。這種情緒價值會讓用戶愿意配合開發者解決軟件卡頓問題,而不是直接卸載軟件。
           
          情緒價值在體驗設計中的應用
           
           
          增強用戶的忠誠度
          能夠在用戶和產品 / 服務之間建立起情感紐帶
           
          •  
            以蘋果產品為例,蘋果公司通過簡潔、易用的設計,以及高效的客戶服務,為用戶提供了良好的情緒體驗。用戶在使用蘋果產品的過程中,會逐漸對品牌產生信任和喜愛。這種情感紐帶使得用戶在下次購買電子產品時,更有可能繼續選擇蘋果產品,忠誠度較高。
          •  
            一些會員制度也注重通過情緒價值來增強用戶忠誠度。例如,酒店的會員計劃會為會員提供優先入住、免費升級房間、生日驚喜等服務。這些措施讓會員感受到特殊待遇,產生一種被重視的情緒,從而增強了用戶對酒店品牌的忠誠度。
          推動口碑傳播
           
          當用戶從產品或服務中獲得了高情緒價值,他們更愿意向他人推薦。例如: 
          •  
            用戶在一家餐廳用餐,餐廳的服務人員熱情周到,菜品的呈現方式也很有創意,讓用戶在享受美食的同時獲得了愉悅的情緒體驗。這種用戶很可能會將這家餐廳推薦給朋友、家人,通過口碑傳播為餐廳帶來新的顧客。
          •  
            在線游戲如果能為玩家提供豐富的社交互動功能,讓玩家在游戲中結交朋友、組隊作戰,獲得團隊合作的快樂和成就感等情緒價值,玩家就會積極向周圍的人宣傳這款游戲,擴大游戲的用戶群體。
           
           
          二、什么產品適合通過創造情緒價值提升使用體驗
           
          C端產品:在創造情緒價值的應用策略下,更容易獲得顯著成果
          情緒價值在體驗設計中的應用
           
           
           
          創造情緒價值這種有效的策略,尤其在面向個人用戶產品時,可以更顯著提升其使用體驗。例如: 
          •  
            社交類產品
            如微信、微博等,通過提供社交互動和情感連接,增強用戶的歸屬感和幸福感 
          •  
            內容類產品
            如視頻平臺、音樂應用等,通過提供豐富多樣的內容,滿足用戶的情感和娛樂需求 
          •  
            娛樂類產品
            如游戲、盲盒等,通過游戲性和不確定性,激發用戶的興趣和情感投入 
          •  
            交易類產品
            如電商平臺、在線購物等,通過營造購物氛圍和提供個性化推薦,增加用戶的購物愉悅感 
          •  
            工具類產品
            如效率工具、健康管理應用等,通過提供情感化的設計和反饋,提升用戶的使用體驗和滿意度 
           
          那么 B 端產品是否同樣適用呢?答案無疑是肯定的。隨著企業數字化轉型的迅速推進,B 端產品在各個行業領域當中得到了廣泛的應用,用戶體驗的重要性越發顯著?!?/span>
           
           
          B端產品:創造情緒價值更有利于提高忠誠度
           
          情緒價值在體驗設計中的應用
           
           
          創造情緒價值的方式
           
          •  
            情感設計:通過設計元素和交互方式激發用戶的情感共鳴,增強用戶對產品的認同感和忠誠度。例如,通過微動畫、個性化推薦和人性化提示,設計師可以為用戶創造愉悅的使用體驗
          •  
            個性化服務與定制化解決方案:了解客戶的獨特需求和痛點,提供個性化的建議和支持,幫助客戶解決實際問題,帶來更多情感上的滿足感
          •  
            優化用戶體驗:注重產品設計和交互體驗優化,提供良好的客戶服務和多種使用方式,不斷優化產品功能,以提升用戶的整體使用體驗
           
           
          創造情緒價值的重要性
           
          •  
            提升用戶滿意度和忠誠度:通過創造情緒價值,產品可以顯著提升用戶的滿意度和忠誠度,從而促進續費和口碑傳播
          •  
            增強產品的市場競爭力:在功能相似的產品中,提供卓越的用戶體驗可以成為SaaS產品的核心競爭力,幫助企業在市場中脫穎而出
           
           
          三、體驗設計師如何提升產品的“情緒價值”
          我們可以從設計核心的三大階段(用戶研究階段、設計階段、測試與優化階段)入手,來創造與提升產品的情緒價值 
           
          用戶研究階段
          情緒價值在體驗設計中的應用
           
           
           
          深入了解用戶情感需求
          開展定性研究
          :通過用戶訪談、焦點小組等方式,挖掘用戶在使用產品時的情感期望。例如,在設計一款健身APP時,與健身愛好者進行深入訪談,了解他們在健身過程中的情緒變化??赡軙l現,用戶在完成一次具有挑戰性的訓練后,希望得到即時的鼓勵和成就感,這就為產品設計提供了情感方向。
           
          進行定量研究
          :利用問卷調查等手段,收集用戶對現有產品情緒體驗的數據。比如,詢問用戶在使用某電商平臺時,購物流程是否讓他們感到焦慮或愉悅,以及在哪些環節有這種情緒。通過數據分析,找出用戶情緒的痛點和興奮點。
           
          構建用戶畫像與情緒場景
           
          創建用戶畫像
          根據用戶研究的結果,構建詳細的用戶畫像,包括用戶的性格、生活方式、價值觀等因素,并且添加情緒維度。以一款旅行APP為例,其中一個用戶畫像可能是“年輕的探險愛好者,性格樂觀,追求刺激,在旅行前會充滿期待和興奮”。這樣的畫像有助于設計師站在用戶的角度思考情緒體驗。
          描繪情緒場景
          :針對不同的用戶畫像,描繪他們使用產品的情緒場景。比如,對于上述旅行APP的用戶,在規劃行程時,他可能會在APP上查找小眾景點,此時的情緒是好奇和興奮;在旅途中使用導航功能時,希望得到精準的指引,情緒是焦慮或安心,取決于導航的準確性。這些情緒場景為后續設計提供了具體的目標。
           
           
          設計階段
          情緒價值在體驗設計中的應用
           
           
          視覺設計方面
          色彩運用
          :色彩對情緒有著強烈的影響。例如,暖色調如紅色和橙色通常傳達活力、熱情的情緒,適合用于激發用戶興趣的界面元素,如促銷活動頁面;冷色調如藍色和綠色則給人冷靜、可靠的感覺,可用于數據展示或需要用戶集中注意力的區域。在設計金融產品界面時,使用藍色為主色調可以讓用戶感到安全和信任。
          圖形設計
          :簡潔、易懂的圖形能夠快速傳達信息并引發積極情緒。在圖標設計上,要符合用戶的認知習慣。例如,在社交產品中,使用微笑的表情圖標表示點贊或喜歡,用戶很容易理解并產生愉悅的情緒。同時,利用有趣的插畫或動畫可以增加產品的趣味性。如在兒童教育產品中,用生動的動畫來講解知識,能夠吸引孩子的注意力并讓他們感到快樂。
          排版布局
          :合理的排版可以提升用戶的閱讀體驗和情緒。清晰的標題和正文層次,適當的文字間距和行高,能讓用戶感到舒適。在新聞類產品中,采用模塊化的排版,將不同的新聞內容清晰劃分,使用戶在瀏覽時不會感到混亂,從而減少煩躁情緒。
           
          交互設計方面
          反饋機制設計
          :為用戶的操作提供及時、明確的反饋可以提升情緒價值。例如,當用戶點擊一個按鈕時,按鈕會有短暫的變色或動畫效果,讓用戶知道操作已被接收。在加載頁面時,使用有趣的加載動畫代替單調的進度條,如旋轉的小圖標或者跳動的小球,能夠緩解用戶等待的焦慮情緒。
          操作流程優化
          :簡化復雜的操作流程,減少用戶的認知負擔和操作失誤。在移動支付產品中,盡量減少支付步驟,讓用戶能夠快速完成支付,避免因流程繁瑣而產生煩躁情緒。同時,可以增加一些引導性的交互,如新手引導教程,幫助用戶輕松上手產品,提升用戶的自信心和滿意度。
          個性化與定制化設計
          :根據用戶的喜好和行為習慣,提供個性化的交互體驗。例如,音樂產品可以根據用戶的收聽歷史推薦相似風格的歌曲,用戶會因為產品的貼心而感到愉悅。并且允許用戶對界面布局、主題等進行定制,讓用戶有更多的掌控感,滿足他們的自我表達需求。
           
          內容設計方面
          文案撰寫
          :使用友好、易懂的文案可以拉近與用戶的距離。在產品提示信息中,避免使用生硬的專業術語,而采用親切的語氣。例如,在一款智能家居產品中,當設備連接成功時,顯示“哇,您已經成功連接啦,現在就可以享受智能生活啦”,這樣的文案會讓用戶感到輕松和愉快。同時,文案的風格要與產品的定位和目標用戶相匹配。
          內容策略
          :提供有價值、有趣的內容可以提升情緒價值。在知識付費產品中,確保課程內容不僅有深度,而且講解方式生動有趣。對于內容社區產品,鼓勵用戶分享積極向上的內容,如生活中的小美好、勵志故事等,營造一個充滿正能量的社區氛圍,讓用戶在瀏覽內容時感到愉悅和鼓舞。
           
           
          測試與優化階段
          情緒價值在體驗設計中的應用
           
           
          可用性測試與情緒評估
          進行可用性測試
          :在產品原型階段,邀請用戶進行可用性測試,觀察用戶的操作行為和情緒反應。例如,在測試一款辦公軟件的新功能時,注意用戶是否能夠順利使用,以及在使用過程中是否出現困惑、煩躁等情緒??梢酝ㄟ^用戶的面部表情、言語反饋等方式收集情緒信息。
          情緒評估工具
          :利用情緒評估工具,如情感化可用性量表(UEQ)等,對用戶的情緒體驗進行量化評估。UEQ可以測量用戶對產品的吸引力、易用性、可靠性等維度的情緒感受,通過數據分析,找出需要優化的情緒體驗點。
           
          根據反饋優化設計
          迭代設計
          :根據用戶測試的反饋,對產品的視覺、交互和內容設計進行迭代優化。例如,如果用戶在測試中表示某個界面元素的顏色讓人感到刺眼,設計師可以調整顏色方案。如果用戶對某個操作流程不理解,就優化操作引導。
          持續關注情緒反饋
          :產品上線后,持續收集用戶反饋,關注用戶情緒價值的變化。隨著用戶需求的變化和市場環境的改變,不斷調整產品設計,以保持和提升產品的情緒價值。例如,在節日期間,對產品界面進行節日主題的裝飾,為用戶提供新鮮感和節日氛圍帶來的愉悅情緒。
           
          四、情緒價值是否具備量化條件
          可以通過以下方法對其進行量化計算
           
          情感化可用性量表
          情緒價值在體驗設計中的應用
           
           
          原理:UEQ是一種廣泛用于量化用戶對產品情緒體驗的工具。它通過一系列的問卷題目來測量用戶對于產品的吸引力、易用性、效率、可靠性和刺激度等多個維度的感受。例如,在吸引力維度上,會詢問用戶對于產品外觀、風格是否感到喜歡;在易用性維度,會涉及用戶操作產品時是否感到輕松、方便等問題。 
           
          應用:在一款產品/功能的用戶體驗測試中,使用UEQ可以收集用戶對該應用在不同維度的情緒評價。通過對大量用戶反饋的數據統計,得出該應用在各個維度的量化得分,比如吸引力維度得分較高,說明產品在視覺等方面能引發用戶積極情緒,而如果易用性維度得分較低,則可能表示產品的操作流程等會讓用戶產生負面情緒?!?/span>
           
           
          凈推薦值(NPS)與情緒關聯量化
           
          情緒價值在體驗設計中的應用
           
           
           
          原理:凈推薦值是通過詢問用戶“您是否愿意將這個產品推薦給其他人”來衡量用戶忠誠度。雖然NPS本身不是直接對情緒價值的量化,但它與用戶的情緒體驗密切相關。當用戶體驗到較高的情緒價值,如愉悅、滿足等,他們更有可能成為推薦者,NPS得分就會升高。 
           
          應用:通過定期收集用戶的NPS數據,并且結合用戶對功能使用體驗的詳細反饋(包括對產品、服務、售后等環節的情緒感受),可以間接量化情緒價值對用戶忠誠度的影響。例如,如果發現NPS得分高的用戶在評價中經常提及購物過程中的快樂情緒和優質服務體驗,就可以推斷出情緒價值在提升用戶忠誠度方面起到了積極作用。 
           
           
           
          1.  
            生理指標測量
           
          情緒價值在體驗設計中的應用
           
           
          原理:情緒會引發身體的生理反應,如心率、皮膚電導率、瞳孔大小等變化。通過專業的設備可以測量這些生理指標,以此來推斷用戶的情緒狀態。例如,當用戶感到興奮或緊張時,心率會加快;當他們感到好奇或專注時,瞳孔可能會放大。 
          應用:在用戶體驗實驗室中,測試用戶在使用虛擬現實(VR)游戲的情緒體驗。通過佩戴可以監測心率和皮膚電導率的設備,觀察用戶在游戲不同場景下的生理指標變化。如果在某個刺激的戰斗場景中,用戶的心率明顯上升,皮膚電導率也增加,就可以推斷用戶處于興奮或者緊張的情緒狀態,從而量化游戲場景對用戶情緒的激發程度。 
           
          雖然有量化方法,但也只有部分可被量化,完全精準量化還存在一定的挑戰 
           
           
          難以完全量化的原因
          情緒的復雜性和主觀性
          個體差異:不同用戶對同一產品或體驗的情緒反應存在很大差異。例如,對于一款具有挑戰性的游戲關卡,一些玩家可能會因為克服困難而感到興奮和滿足,而另一些玩家可能會因為覺得太難而產生沮喪情緒。這種個體差異使得很難用統一的標準來量化情緒價值。
          文化背景影響:文化因素也會對情緒價值的感受產生影響。在某些文化中,含蓄的情感表達是常態,而在另一些文化中,人們可能更傾向于直接的情感反應。比如,在日本文化中,用戶可能對產品的精致、細膩的設計有更深刻的情感共鳴,而西方文化中的用戶可能更看重產品的創新性和個性化帶來的情緒體驗。
           
          情緒與情境的動態變化
          使用場景的多樣性:用戶在不同的使用場景下對產品的情緒價值感受不同。例如,一個音樂播放軟件,用戶在運動場景下可能更關注節奏強烈的音樂帶來的激勵情緒,而在睡前場景下則更看重舒緩音樂營造的放松情緒。這種隨場景變化的情緒體驗難以用固定的量化指標來衡量。
           
          時間因素:用戶對產品的情緒體驗也會隨著時間而變化。最初接觸產品時的新鮮感可能會帶來積極情緒,但隨著時間推移,如果產品缺乏更新或出現問題,情緒可能會轉變為消極。而且情緒的產生和消退過程很難精確量化,例如很難確定用戶從感到滿意到產生厭煩的具體時間節點。
          雖然難以量化,但情緒價值在實際應用中發揮的作用還是很大的?!?/span>
           
           
          結束語
          在體驗設計的廣闊領域中,情緒價值猶如一股無形的力量,悄然影響著用戶與產品之間的每一次互動。它不僅僅是愉悅感、保障感和專享感的簡單疊加,更是用戶在深層情感層面與品牌建立起的穩固紐帶。通過精心設計的用戶體驗,我們能夠觸動用戶的情感,激發他們的共鳴,從而在用戶心中留下深刻而持久的印記。


          作者:群核科技MCUX
          鏈接:https://www.zcool.com.cn/article/ZMTY0OTIxNg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          日歷

          鏈接

          個人資料

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

          存檔

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