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

          首頁

          用上這24個UI體驗優化經驗,果然做出來的設計更高級了!

          seo達人

          一、暗色模式下飽和度不宜過高

          高飽和度的顏色能形成強烈的對比。在暗黑模式下使用高飽和度會很刺眼,給用戶很不好的體驗。暗黑模式一般在晚上使用,因此對設計師來說,需要做的是讓整個配色相對柔和,讓用戶感到放松。基于此,在設計的時候應該將飽和度限制在200-500之間。

          (彩云注:這里的200-500彩云去查了不少資料,但沒有找到最好的答案,這里引用的是Material Design中的顏色規范,感興趣的同學可以自行查找)

          圖片

           

          二、 按鈕要有優先級

          在同一個界面,最理想的狀態是只有一個最主要的關鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕(CTA)按鈕,會讓關鍵操作淹沒在這些按鈕中,讓用戶不知所措。

          圖片

           

          三、簡化不必要的動詞

          沒必要在菜單上增加動詞和短語,用最少的信息寫清楚功能就足夠讓用戶理解了。所以,在菜單設計上要盡量避免增加無關緊要的詞,這樣才不會影響用戶體驗。

          圖片

           

          四、字體尺寸類別越少越好

          你可能注意到,很少有表單的字體大小不平衡,字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時,盡量規范字號的標準。比如標題(16px),副標題(12px),正文(10px),說明文字(8px),這些尺寸都是以2為倍數的。

          圖片

           

          五、不要混用圖標風格

          盡管我知道要做好圖標一致性,但在實際工作中依然經常犯錯。很多設計師經常用不同風格的圖標混在一起,這樣會讓整個UI界面的設計顯得很不成熟。圖標是為了讓用戶更有效率地理解事物。在使用圖標的時候一定要注意圖標的一致性,尤其是一些是一些風格細節。

          這里也跟大家分享2個我自己常用的figma圖標庫:

          1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

          2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

          圖片

           

          六、不同背景下的顏色飽和度適當微調

          通常情況下,我們會認為一個顏色在深色模式和亮色模式下是用的同一個顏色值,但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮,但在深色模式看可能就太暗了,反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。

          圖片

           

          七、新手引導多給用戶自主權

          App的新手引導決定了用戶第一次體驗產品時的感受。在設計的時候,試著公開需要哪些具體步驟,增加”跳過“和前后移動查看的能力對新用戶來說非常重要。

          圖片

           

          八、在圖片上增加疊加層

          許多網站和App都是用圖片驅動的,但在圖片上直接增加文字內容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內容的可讀性。

          圖片

           

          九、信息部分露出

          對于一些大屏設備來說,像筆記本電腦,平板電腦和智能電視,它們都有非常多閑置的空間。對于這些閑置的空間來說,盡量通過設計告訴它底部還有更多內容。這對UI和UX方面都有好處,因為空間的使用方式能夠讓用戶清晰的知道所有內容。

          圖片

           

          十、拆分大段文字

          為了讓用戶聚焦閱讀,應盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內容的可讀性。(彩云注:這點用在你的作品集里也是很合適的,有些人經常使用大段的文字內容來描述,很可能直接勸退面試官)

          圖片

           

          十一、Z字形原理

          Z字形原理,也就是大眾所熟知的”古騰堡原理“,它描述了當人們看到一個均勻分布元素的設計時,眼睛的總體運動情況。通過這個原理我們知道,用戶在內容上的視線是沿著Z字形來閱讀的,所以遵循這一原理設計你想要核心表達的內容。

          圖片

           

          十二、擴大可點擊范圍

          擴大點擊區域,維護像按鈕、單選、多選等控件的響應尺寸,如果你設計的點擊區域太小會讓用戶點擊困難,造成流失。

          圖片

           

          十三、盡量使用簡潔的圖標

          避免使用花俏和俗氣的圖標,它們會讓整個設計顯得非常不成熟,同時也是很難理解的。用上更簡單的圖標形式,會讓界面更高級。(彩云注:當然越簡單的圖標其實想畫出彩會更難,另外也需要區分不同的場景,像一些運營類的圖標可能會為了活動氛圍做的相對風格化一些。)

          圖片

           

          十四、正確的文案表達

          選錯文案,會讓人們對于任務缺乏興趣,根據上下文使用更合適的詞組。

          圖片

           

          十五、考慮手勢操作

          輕敲和點擊有時候很累人,可能不如使用滑動、拖拽等手勢操作,這些操作會讓界面更簡潔并且也能順利地完成既定任務。

          圖片

           

          十六、展示部分文案

          在探索酒店、目的地甚至是閱讀任何文章時,用戶經常都需要點擊卡片。為了使得探索更加吸引人注目和干脆,避免使用長文本導致的滾動。相反,可以加一個閱讀更多的按鈕方便想看全所有內容的用戶。

          圖片

           

          十七、接近法則

          ”鄰近的物體往往被視為是同一組內容“。有時候為了把內容區分開的更清晰,嘗試用線對相關內容進行分組。(彩云注:其實有留白和不同顏色做區分也是可以的,建議根據自己的設計風格和具體內容來定)

          圖片

           

          十八、文字控件可視化

          在設計控件時,如果可以用圖形可視化的地方就優先嘗試把控件圖形化,除了非常需要很精確的設置參數。對于價格范圍這種,很容易將它可視化為滑塊控件。

          圖片

           

          十九、占位符要接近要填寫內容

          對一些人來說容易理解的東西,對某些人來說可能不是。因此,最好使用示例占位符來解釋輸入字段,這可以防止用戶在填寫內容時出錯。

          圖片

           

          二十、系列位置效應

          根據”系列位置效應“,心理傾向于記住列表的第一項和最后一項,而不是中間項。因此,在任何App中設計導航時,根據應用的上下文保持最左和最右的選項。例如instagram,最左邊是”首頁“,而最右邊是”用戶“。(彩云注:這是一個心理學上的理論,人們對于一系列的材料更容易記住開頭的內容,也叫做首因效應或者首位效應;更容易記住末尾的內容,就叫近因效應。)

          圖片

           

          二十一、減少點擊次數

          在設計任何體驗時,點擊次數都是非常重要的指標。統計用戶需要點擊多少次才能完成他的目標,額外的點擊會減慢整個操作過程。簡化過程,自然體驗就會更好,所以盡可能的減少點擊次數。(彩云注:下面的案例,增加可點擊符號也可以減少用戶思考的時間。)

          圖片

           

          二十二、少即是多

          為了使內容突出,沒有必要使用多種字體類型,包括加粗、改色等等。只在最需要的位置使用增強的的文字層次結構、字體重量,同時只使用一種字體足以吸引用戶對內容的注意力。

          圖片

           

          二十三、留白定義重點

          留白在設計中非常重要,太少或者沒有留白會使得設計非?;靵y。明智地使用留白可以明確地強調內容。

          圖片

           

          二十四、別讓用戶閑著

          根據多爾蒂閾值(Doherty Threshold)這個理論:”系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率?!啊R虼?,我們可以使用動畫、圖像甚至文本來保持用戶的注意力。(彩云注:給用戶的提示可以先快速加載信息框架,讓用戶有事可做,而不是什么都看不到)

          圖片

           

          原文地址:彩云譯設計(公眾號)

          作者:彩云Sky

          轉載請注明:學UI網》用上這24個UI體驗優化經驗,果然做出來的設計更高級了!

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          5 個案例帶你領悟幾何面性趣味LOGO

          seo達人


          寫在前面 

          其實 dribble,Be 上有很多幾何化風格的 logo,大家多看看,其實可以發現都有一些共性。在這類 logo 風格占滿市場的時候,考慮怎么做,才能讓這一類更出彩。

          我在這類 logo 的執行,分成三個階段。

           

          1. 圖形的大概造型參考

          簡單來說就是找圖形實物/繪制造型參考圖,這跟大多數風格 logo 的設計步驟是一致的。

          2. 根據造型,用基礎幾何圖形表達

          基礎幾何圖形,其實就是很常見的「矩形、圓形、三角形、菱形」等等,你找的一張造型,盡量用工具自帶的「矩形」「三角形」「圓形」去代替所有的部件。

          3. 創意的加分

          把大概的輪廓造型做出來以后,可以適當結合字母,或是添加一些小元素,把你的 logo 整活起來,讓它更生動,畫面感、故事感更強。

          好了,現在我們開始講案例。

           

          圖片

          我們先試著觀察它,發現這個 logo 是貓頭鷹與 L 的結合,那這個 logo 從 0 到 1,是怎么做出來的呢?

          老方法,我們先找一些貓頭鷹的圖片, 作為造型的參考。提取貓頭鷹特征。

          圖片

          找參考這步,我一般會分為找兩種圖片,1. 實物照片(為了觀察整體造型與提取特征)  ;2. 設計師處理好的造型圖片(為了借鑒和觀察別人的處理方式,但是需要注意的是不要過渡借鑒,會構成抄襲)

          圖片

           

          先看實物圖片,發現其特征

          1. 眼睛

          2. 頭上的小耳朵

          3. 臉上的內輪廓

          概括完貓頭鷹的特征以后,我們開始繪制整體輪廓(先不加細節)。

          圖片

          網上這張插圖,其實概括的很幾何化了,我們只需要在它的基礎上再修改、變化,就可以做出我們要的整體造型??梢园l現,身體-矩形,翅膀-半圓,眼睛-雙圓。我們根據這些概括,開始實現這個 logo。

          圖片

          把基礎組件繪制出來,再把它們組合成一個初版造型。

          圖片

          到這里 01,發現貓頭鷹的感覺還是少了一點,原因在于最關鍵的臉部的內輪廓沒有繪制,這是能突顯貓頭鷹這個物種的很重要的元素;結合實物圖片與處理好的插圖,我們進行繪制,注意透視角度得到 02 圖。

          繼續觀察,還差了一個小耳朵是不是,那我們就給它加上,這邊可以直接用矩形,也可以用三角形,可以輸出兩個效果,對比看看。

          圖片

          通過對比我發現,矩形看起來跟整個大體圖形,更能融合到一起,整體感更強,最終我選擇了矩形的小耳朵版本。

          圖片

          得到這個初版造型以后,我們再進行調整與創意結合;在翅膀與身體的連接處,我們可以做一個切割,讓翅膀與身體的輪廓更清晰;同時,眼睛的輪廓也可以調整,與臉的內輪廓斜線,可以做平行(這樣的處理,會讓整個圖形看起來更規則)。

          繼續觀察、優化這個圖形,現在會感覺,小耳朵與身體的連接,稍顯生硬。臉內輪廓的直角連接同樣有這種感覺。那我們就可以給它加上圓角,這種平滑的處理,使得圖形視覺上看會顯得柔和。

          圖片

          最后,我們根據 logo名稱「L-OWL」,讓這個圖形加上 L 的小尾巴,再上個色~就完成了!

          圖片

           

           

          圖片

          這個 logo 的誕生是之前我去吃海底撈的時候,服務員小姐姐送了我一個小玩具。當時看到,一陣狂喜 ,這不是很適合拿來做 LOGO 么!

          圖片

          在執行的時候,我發現按照原圖的繪制,整個造型會顯得的怪異,所以,我們可以試著把它改變一下。

          圖片

          我們盡可能先用矩形、圓形去繪制這個小恐龍減少原圖那些細節,比如腳指之類的,能簡化就簡化它得到這個輪廓,發現造型不太好看,特別是頭部,不說的話有點像狗子。那我們就可以給它改變下造型,嘗試減少線段。

          圖片

          嘗試找出可以刪除的錨點,讓形狀以最少的線段表達出最清晰的輪廓;在這一步的修改,做了比較大的改變,不僅改變了圖形的原始造型,也修改了側面頭部的角度(因為去掉了長開的嘴,所以把仰著的頭往下調整)。

          這一步是一個嘗試的過程,也是一個試錯,需要耐心的過程,大家可以多找一些圖片參考,得出你想呈現的造型形態。

          圖片

          為了方便觀察整體形態,我們把描邊模式換成面性填充,發現小恐龍的左腿太短,不太協調,那我們給它拉下來一點(注意要保持角度的平行) ;然后找了一些恐龍的圖片,發現缺了角,我們也給它填上。

          圖片

          得到了這個圖形 01 以后,基本是完成了一半。接下來,我們需要做的是讓各個部件層次清晰點。比如,頭跟身子的連接處,需要一點切割或者是陰影;腹部與腿的分層,尾巴與身體,也需要陰影。這樣做的目的,是讓你的小恐龍各個部件更清晰,而不是一坨色塊 。

          圖片

          現在給它加上小眼睛,再加上一些恐龍身上的鱗片、紋路之類形狀。在這里,我用的是小三角形,來表達恐龍身上的小角。
          圖形已經出來了,我們給它上個色看看~

          圖片

          之前有提過,加點裝飾或是小元素,會讓你的圖形更有創意性跟故事性。適當展開聯想。這邊我給它加上的是一只小蝴蝶。起到一個更具生動,讓小恐龍不那么呆板的作用。

          圖片

           

           

          圖片

          這個 LOGO 不知道大家能不能感受到,它很卡通,也很幾何。現在我們來講講這個案例。

          老方法,我們第一步是要找到合適的造型參考。

          圖片

          在網上找到了這張插畫,是的,就是用它當造型參考。

          圖片

          然后,我們去拆分這個小女孩的各個部位。帽子、頭發、眼睛、鼻子、耳朵、臉型。我們用基礎幾何形狀,先嘗試組合一下初版的圖形。沒辦法用基礎形狀的,我們先用鋼筆大概勾勒一下。

          初版造型出來以后,觀察一下發現是可行的。我們再把它們(描邊)轉化成面性色塊,再觀察調整。

          圖片

          這邊的小細節:耳朵被頭發蓋住,被蓋住這塊的線條,跟頭發的弧度呈平行狀態加上五官,( 這邊看你想賦予這個小女孩什么樣的性格,但是看裝扮來說,酷酷的氣質是比較符合的)想表達酷,可以加上墨鏡。歪嘴笑更加重了 cool,不屑的氣質。

          圖片

          到這步以后,整個圖形基本是完成了,檢查一下底部頭發的線條,可以用正圓去剪切規范它。然后就可以幫她上個色,加上一些陰影, 增強層次感。

          圖片

          圖片

          用圓形去剪切,是很常用且好用的一種方式。它會讓你的圖形看起來更規整,更幾何化。

          最后,我們得到這個圖形以后,在排版上,也做一些變化。對應圓形框內的圖形,我們用圓形的路徑文字,去排品牌名稱。

          圖片

           

           

          圖片

          現在很多同學應該還是在大量做練習的階段,有時候不知道做什么,就感覺很頭疼。這個時候,知道了某種設計方法,那就可以把你看過的圖都變成你的 LOGO 了。這個 logo 也是我偶然看到的一張狗狗的照片。然后就有了把它做成這風格 logo 的想法。

          圖片

          我們先繪制這只小狗的頭部(身體的形態,是不是要按照這個照片來,完全取決于你,這邊我們先把頭部做出來)。

          圖片

          觀察照片狗各部分的形態,盡可能用基礎形狀去代替。頭部其實是比較簡單的,我們先暫且擱置一邊。接下來,我們來繪制身體。這邊我沒有按照原圖的形態去繪制,覺得太過于安靜了,就去網上找了一些,正在行動中的狗狗的形態。

          圖片

          可以多找幾張參考圖,方便我們結合調整。

          圖片圖片

          因為這個小狗的頭部是比較可愛的,跟這個身子搭配不了。這個時候,我們可以先調整身子與頭部的大小比例,看看效果。

          圖片

          身子這么一縮小,是不是順眼多了?比例調整到和諧以后,我們再開始優化身子的部件。( 如果描邊模式你覺得很難觀察,那我們先把它轉成填充模式)

          圖片

          通過觀察找出問題,再優化。因為狗狗走路的時候,走路的后腿是一前一后,所以會有層次關系。

          圖片

          我們可以嘗試把初版的圖形,把一條腿與身子切割開,這樣處理就可以很好地表達前后層級關系。

          優化處理以后,大概的形態已經完成了??赡艽蠖鄶低瑢W到這步,就直接上色排版了。想做出有意思的圖形,姿態、動作是很關鍵的?,F在這個圖形,其實直接上色是沒什么問題的,但是就會少了那么一點靈性。

          要讓你的圖形生動有趣,有時候只需要把你畫的動物/人物,頭部與四肢做一點點角度,就會比之前的生動很多。比如這個小狗,我們把它的頭,往上抬一下,就會比之前的更靈性了。

          圖片

          最后,我們可以調整確定好的圖形形態,比例關系與加點陰影細節。

          圖片

          我們在小狗的眼睛旁邊加個星星讓它 wink~ (誰會拒絕對你wink的小狗呢)增加調皮可愛屬性。大功告成~

          圖片

           

           

          圖片

          設計來源于生活~善于發現, 善于聯想。

          這個 LOGO,可能 80 后,90 后,看著都比較有親切感,還記得小時候玩過的鐵皮青蛙么~

          圖片

          話不多說,放參考圖~

          圖片

          老辦法,先用基礎形狀把青蛙的大概輪廓拼出來。我們在繪制初版輪廓的時候,先觀察你的這個參考圖片,比例,形態的長短是不是符合你心中所要,如果不適合,那你可以先復制一個圖片,再對它進行拉伸/縮短。

          圖片

          就像這個青蛙的圖,我就覺得身子有點過長了,咱們把它壓縮一下。

          圖片

          圖片

          觀察我們勾勒出來的形狀,青蛙的后腿,稍顯長了一點兒,我們先調整后腿的長度調整腿與身體的比例關系。簡化線段,能平滑的地方,我們刪減錨點青蛙的肚子部分,我們用半圓去剪切規整盡量讓我們繪制出來的大輪廓飽滿得到這個輪廓以后,我們再繪制青蛙的蛙掌我們還是多搜一點青蛙的圖片,去觀察蛙掌的結構。

          圖片

          蛙掌還是比較容易概括的,只要幾個矩形跟圓點就可以繪制出來了我們把繪制好的蛙掌,跟上面繪制好的大體形態拼起來。

          圖片

          調整各個部件距離,適當加點圓角添補未繪制的眼球。

          圖片

          四肢與身子加點切割,增加部件結構清晰度。

          加上我們的旋轉小開關,最后為了防止青蛙左下側的空間太大,會造成圖形不穩,我們加一條矩形橫線,去平衡版面。

           

           

          圖片

          生活當中的很多美好的事物,都值得我們去記錄,或許哪一天你沒有靈感的時候,它就能變成你筆下的一個 LOGO,一張插畫~

          技法都不是最難的,需要你去歸納總結它。說了這么多,動筆試一試吧!行動才是硬道理!

           

          原文地址:胡曉波工作室(公眾號)

          作者:Douta

          轉載請注明:學UI網》5 個案例帶你領悟幾何面性趣味LOGO

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          漸變色的正確打開方式

          seo達人



          一、以下幾種情況適合使用漸變色 

          1、想把背景當作天空 

          如果你的背景有起到天空的作用,哪怕不是真實的天空,那么用漸變色都是比較合適的,通常是用單色漸變(色相一樣,只是明度和飽和度有變化,比如藍色到淺藍色)或類比色漸變(比如藍色到青色)。并且,即使是類比色漸變也是要有明度上的變化,因為這樣的漸變可以讓畫面更透氣、更有空間感。

          圖片

          圖片

          圖片

          圖片

          ▲漸變的方向通常是模擬真實天空的光感,即上暗下亮,或者中間亮四周暗。

           

          2、想表現小清新的調性 

          小清新在平面設計中通常是指視覺感受是自然、淡雅、靜謐的畫面,這樣的畫面其色調應該是柔和的,所以很適合使用漸變色,而且一般是使用明度比較高、飽和度比較低的單色漸變或類比色漸變,在飲料、護膚品、家居等品牌的設計中比較常見。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          3、想表現科技感

          諸如3C產品,或與AI、互聯網相關的品牌、產品或者主題,其設計通常需要表現出科技感,而科技感是一種怎樣的視覺感受呢?這類視覺有一個共同的特點就是光感很強,比如下面這些作品。

          圖片

          圖片

          圖片

          圖片

          圖片

          所以為了表現比較強的科技感,畫面中通常少不了使用漸變色,因為只有漸變色才能呈現出鮮明的明暗對比、強烈的光感,而且這種漸變色的明暗跨度會比較大,色彩的飽和度會比較高。色相以冷色為主,比如藍色、青色、綠色、紫色。

           

          4、想表現食欲

          食品海報最基礎的要求就是要能表現出食物的食欲,讓人看了會有想吃、想喝的欲望。我們都知道,在色彩中,暖色是比較有食欲的,比如紅色、橙色、黃色、粉色等。另外,如果是夏季,藍色綠色會給人清爽的感覺,所以也能加強食欲(通常指飲料、雪糕類產品)。

          吃是人類的生理需求,也是最基礎的需求,所以對于食欲的表現肯定要樸實有親和力,漸變色就具有這樣的特質。而且食物的色彩通常也是漸變色,所以使用漸變色作為背景可以與實物圖片形成呼應。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          食欲強的漸變色具有以下特點:

          a.明度不會太低;

          b.飽和度不會太高;

          c.明度對比不會太大;

          d.以單色漸變和類比色漸變為主。

           

          二、怎樣的漸變色更有高級感? 

          確實,很多視覺高大上的設計都喜歡用純色,但并不代表漸變色就表現不出高級感,蔥爺研究了大量奢侈品牌、中高端品牌的視覺設計,發現高端的漸變色通常具有以下幾個特點:

           

          1、使用單色漸變

          大家都知道高端的設計在色彩使用上是很克制的,即顏色的數量會比較少,而單色漸變相比多色漸變就要克制一些。

          圖片

          圖片

           

          2、顏色明度較低

          高端的設計喜歡用黑色作為背景,想必你也發現了,因為黑色具有高貴、神秘、厚重的感覺,所以容易營造出高端的氛圍,除了黑色,其他顏色的深色也具有這些特點,比如深藍、深紅、深綠等等。所以漸變色要想高端,整體的顏色也要偏暗,比如黑色到灰色漸變,深藍到藍色漸變等等。

          圖片

          圖片

          圖片

           

          3、顏色來源于畫面中的圖片

          如果版面中是有圖片的,比如產品圖片或人物圖片,那么從圖片中吸取顏色用于填充背景,會使背景與圖片關聯性更強、更融合,畫面的效果會更和諧,否則容易出現生硬、拼湊的感覺。

          圖片

          圖片

          圖片

           

          三、時尚的漸變色有什么特點?  

          自從進入數字營銷時代,各個品類的設計都在逐漸互聯網化,相比傳統營銷,數字營銷更講究年輕化和個性化,所以在視覺上通常也要求更潮、更時尚,特別是對于一些針對年輕人的品牌。時尚類的視覺設計中也很喜歡用漸變色,其特點如下:

           

          1、顏色的飽和度和亮度較高

          注意,亮度不是明度,亮度高不代表明度高,但是明度肯定不會太低(在ps拾色器面板中觀看HSB模式中的B值)。飽和度和亮度較高的漸變色更鮮艷、更張揚,更符合年輕人和互聯網的特性。

          圖片

          圖片

          圖片

           

          2、顏色對比較強

          比如對比色和補色漸變是時尚類設計很喜歡用的顏色,這樣的顏色反差比較大,視覺沖擊力也更強。

          圖片

          圖片

          圖片

           

          3、幾種效果比較時尚的漸變

          a.炫彩漸變

          圖片

          圖片

          圖片

          b.鐳射漸變

          圖片

          c.彌散漸變

          圖片

          圖片

          圖片

           

           

          圖片

          最后,蔥爺有必要提醒一下,色彩只是影響設計調性的其中一個因素,調性不是一個漸變色就能左右的,想要表達出正確的調性,還需要有圖片素材、構圖、字體、排版、設計風格等多個因素的配合,否則你的色彩用得再好也起不了多大的作用。

           

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學UI網》漸變色的正確打開方式

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          畫圖標,我是認真的

          seo達人

          正文 

          對于 UI 設計師來說,圖標設計的能力至關重要,也是提升感官體驗的重要方向。對于一些初入行業的設計師,習慣下載圖標素材應付項目需求,失去了動手能力培養的機會。甚至一些多年工作經驗的老司機,依然還擺脫不了使用素材的習慣,稍微復雜一點的技法就會難以駕馭。

           

          一、切勿過度素材化 

          對于初入職場的設計師來說,偶爾運用素材可以理解,但是一定要學會拆解和分析,掌握還原設計的技巧和能力。

          圖片

          過度依賴素材容易導致思維固化,不愿意去創造,失去創新設計的能力;也容易導致眼高手低,有想法卻實現不出來,極容易萌生放棄的念頭;素材拼貼形式完成的設計,在規范性和細節性上面也是大打折扣的,導致設計作品不夠精細化和規范性。

          圖片

           

          二、刻意練習強化

          我們需要通過刻意練習來提升圖標設計的能力,根據一萬小時定律,技法層面的提升都是通過反復磨練達到的。

          圖片

           

          三、擺脫素材才能規范化

          圖標設計從素材習慣過度到設計動手其實很容易,但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規范化的關鍵,然后再統一風格和細節規范,掌握數字化關系也是需要我們反復研究的課題。

          圖片

          比如以這個天氣圖標來舉例,相信很多同學都能畫出來,但是有沒有把控里面的數字關系就難說了。通過以下示意圖我們可以看出來,大圓和小圓之間的比例關系是 4:3,而間距的關系也與圓形的大小有著數字關系。這些數字關系可以使得圖標設計更加精細化,也能引導我們去探索設計背后量化的標準和關系。

          圖片

           

          四、質感的層層強化

          當我們繪制完圖標的造型之后,運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成,選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯,這里單獨對局部進行了光影強化和邊界處理,看看以下步驟拆解圖感受一下。

          圖片

          備注:運用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實現。

           

          五、延展界面場景

          為了進一步強化圖標練習,延展了一個簡單的界面場景,一個由宮格布局組合成的界面設計。為了填充所需的內容,先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標,但是由于透視、配色、風格和細節規范等不一致,整體還是存在一定的排斥感。

          圖片

           

          六、根據界面環境重新調整

          由于界面設計屬于深色主題,之前練習的天氣圖標放入場景中顯得過于突出,而且玻璃質感的通透性沒有得到很好的發揮。于是根據界面環境對天氣圖標進行了重新調整,以深色關系調整了云朵部分,針對太陽的配色和尺寸比例也進行了調整,如以下效果圖。

          圖片

           

          七、延續風格補全設計

          以調整后的天氣圖標作為風格規范,延續了其它業務場景的圖標設計,在透視關系、細節規范、配色比例和光影效果等方面進行了直接延續。在光影方向上面選擇了縱向區分,左邊三個選擇左上角打光,右邊三個選擇右上角打光。(當然也可以統一一個方向設置光影)

          圖片

           
           

          八、統一性還是差異化

          完成的整體設計視覺風格雖然比較統一,但是也有一些問題存在。圖標之間缺少差異化,過度統一容易視覺疲勞,于是在統一性和差異化上面開始糾結了。

          圖片

          為了既保障圖標設計表達的統一性,又能形成視覺感的差異化,做出了調整配色關系的決定。根據天氣圖標的配色關系延續出了其它色系,看看最終的效果如何。

          圖片

           

          你喜歡哪一版?

          關于統一性和差異化因人而異,在朋友圈征集意見也是各有差異,那么你會喜歡哪一版呢?歡迎留言區一起互動交流。

          圖片

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》畫圖標,我是認真的

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          最常見的7個配色問題,如何解決?

          seo達人

          色彩搭配對于平面設計有著非常重要的意義,但很多設計師會忽視它的重要性,他們可能會去刻意練習版式設計、字體設計、軟件等等,卻不愿在色彩搭配上花多一點時間,所以很多設計作品都會有色彩搭配的問題,最常見的有顏色太灰、太臟、太亂等等,今天蔥爺用幾個案例來給大家分享一下,如何解決7個常見的色彩搭配問題。

           

          一、顏色調性不對

          色彩的調性會直接影響到整件設計作品的調性,調性對了才能傳遞出正確的情感和信息,而要想使你的配色在調性上不跑偏,首先你得了解不同的色彩和色彩組合分別具有怎樣的視覺感受;還要深刻理解、分析你的品牌、產品、設計主題應該是什么樣的調性。這些都可以通過閱覽大量的作品、觀察身邊的事物總結出來。

          圖片

          下圖一個手工家居品牌的海報,產品是一個草綠色的編織花盆,標題是:大自然的色彩。根據上面這些信息,我們大概能判斷出該海報的配色應該要有自然、簡約、安靜、輕松的感覺。但下圖的顏色整體偏暗,而且中間的紅色圓形與背景色和產品對比太強,所以視覺上并沒有自然、輕松的感覺。

          圖片

          在調整后的方案中我使用了產品的類比色組合,即綠色、青色、黃色,

          圖片

          而且把背景色的明度提高了,飽和度降低了。

          圖片

          圖片

          注:拾色器面板中的HSB分別代表顏色的色相、飽和度、亮度值。

          最終的顏色搭配效果更和諧、更符合產品和文案的調性。

          圖片

           

           

          二、顏色太灰

          顏色太灰通常是因為顏色的飽和度和亮度偏低,再加上顏色之間的對比不夠強所導致的。比如下圖是一本服裝畫冊的目錄設計,版面中的色彩取自圖片中的粉紅色與綠色,設計師應該想通過這組對比色表現出時尚的感覺,但是最終的配色效果有點太灰了。

          圖片

          圖片

          對于這種問題還是比較好解決的,我們只要選中目前的顏色然后打開拾色器面板,然后把顏色的S值(飽和度)或B值(亮度)提高一點就好,在調整數值時要觀察實際的顏色效果,直到得到最滿意的效果為止,如果飽和度或亮度過高,會導致顏色太重或太爆。

          圖片

          圖片

          圖片

           

           

          三、顏色太爆(刺眼)

          與顏色太灰相反,還有很多設計師在配色時會出現太爆的情況,顏色太爆通常是因為顏色的飽和度和亮度過高導致的,但并不是說各顏色的飽和度和亮度值都很高,組合在一起就一定會很爆,還跟顏色的色相、顏色面積占比、顏色與圖片的組合效果、是否與產品調性相符等相關??傊O計作品在視覺上要比較舒適,而不是辣眼睛。

          比如下圖是一張食品海報,背景用了一個大紅色,突出價格的圓形色塊使用了一個熒光綠,這兩個顏色的飽和度值和亮度值都是100,雖然這兩個顏色都來自畫面中的食物圖片,但圖片中的顏色其飽和度和亮度值都沒這么高,所以這種色彩組合方式會讓人感覺背景比主體還要突出,產品與背景不夠融合。

          圖片

          圖片

          另外,背景上的文字全部使用白色也會加強這種爆的感覺,似乎所有的顏色都在爭著跑到最前面來,缺乏層次。

          對于這種情況,我們則需要把它的飽和度適當降低,比較穩妥的做法是拾取圖片中的顏色。把圖片復制一層,然后選擇濾鏡-像素化-馬賽克,選擇一個合適的參數,就能得到上圖的效果。把原圖中的紅色和綠色用圖片中的紅色和綠色替換,然后把標題和副標題的顏色改為暗紅色,這種“爆”的感覺就立馬消失了,如果背景使用一點點漸變效果,那么與圖片的融合性會更好。

          圖片

          圖片

           

           

          四、顏色太花(太多)

          顏色太花通常是因為顏色太多、且顏色跨度較大,主次不明顯,比如下面這則促銷海報,顏色有七種,除了黃色是背景色面積最大以外,其他顏色的面積都差不多。設計師之所以用這么多色彩是想讓不停的促銷信息能有清晰的區隔,但實際上這些信息通過排版以后已經非常清晰了,所以沒必要再通過不同顏色來進行區隔。

          圖片

          其實,把這些不同套餐的色塊統一成一個顏色,個別關鍵字、詞用一個顏色突出就好。另外用黃色作為背景色太過傳統,而且與中國移動的調性不是很契合,所以改成了玫紅色的對比色-藍色,這也是中國移動的品牌色。

          圖片

          圖片

          最終,效果變得更時尚了,雖然總共的顏色只有三種,但是并不單調,而且也不會顯得花和亂。

           

           

          五、太舊

          現在大部分的品牌都開始年輕化,而且營銷傳播也都互聯網化,所以我們在做設計的時候要盡量時尚一些,特別是那些主要針對年輕人的品牌或產品。

          下面這則中國移動促銷海報宣傳的內容就是針對年輕人的4G套餐,但設計的調性并不時尚,主要是因為配色有點舊。雖然是以紅藍這組對比色作為主色,但是背景色的明度很高、飽和度很低;并且里面用到了大量的單色漸變,這些配色的方式比較柔和,缺乏時尚感。

          圖片

          在優化后的方案中,首先我把背景色的飽和度提高了一些,把之前的單色漸變改成了純色,并使用了近幾年比較流行的鐳射漸變和熒光色,顏色的對比和視覺沖擊力更強,風格更獨特,整體的調性也變得更加時尚。

          圖片

          圖片

           

           

          六、顏色太碎

          顏色太碎會有一種凌亂的感覺,造成這種問題的原因是把一種或幾種比較跳躍的顏色,呈點狀且很分散(不連續、不集中)的分布在版面的各個部分,比如下圖的海報,設計師想用粉色突出所有他認為比較重要的詞、句或者元素,結果造成了顏色很碎的效果。

          圖片

          這種啥都想突出的配色方式除了在視覺上會讓畫面看起來很亂以外,也會使得版面沒有重點,因為重點太多了。

          上圖的產品是一款進口的兒童健康食品,設計調性應該偏向中高端,所以用色應該更加克制,這種很碎的色彩搭配方式就更不合適了。我們在使用色彩突出某些關鍵信息時,盡量突出句子而不是某個字詞,或者通過色塊的方式突出整段文字(字數不是特別多的情況下)。另外,如果僅僅是為了區隔信息,那么不同信息的顏色只要有比較小的差別就好了,不需要用對比非常強烈的顏色來做區隔,否則會破壞畫面的統一性。

          圖片

          圖片

          紅色和綠色在白色背景上都比較跳躍,調性很難高端,所以我把主要色彩改成了紅色和金色(金色來自包裝和logo)。 
           

          七、太臟

          顏色臟主要是因為顏色明度和亮度太低,顏色處理不合理,以及暗色中的細節多且不清晰所造成的。下圖這個banner設計,背景色很暗,且很多地方處理不合理,比如天空的顏色沒有地面的顏色亮,在昏暗的天空中加鏡頭光暈。另外左邊的人物完全壓暗與背景融為一體也顯得很臟,右邊人物的重影除了讓畫面變得更臟以外,并沒有其他意義。

          圖片

          針對這些問題我調整了兩個方案,方案一是在保持原圖明暗的基礎上,提亮了天空、壓暗了地面,并把背景的圖層混合樣式從正片疊底轉為柔光,透明度降到70%,左邊人物進行了適當的提亮,使其更清晰、更立體。去掉了不合理的素材,比如鏡頭光暈和右邊模特的重影。中間的斜色塊和標題填充了一個飽和度較高的藍色,與深色背景形成鮮明的對比。

          圖片

          圖片

           

          通過這一系列的調整,整個畫面就變得干凈了很多,而且保留了之前的氛圍。而如果想有更明顯的改變,可以放棄這種很暗的背景,比如像下圖方案二這樣,把整體的顏色都提亮,效果會更時尚、更干凈。

          圖片

          圖片

           

           

          圖片

          色彩搭配也沒有固定的標準,但有幾個原則必須遵守:

          ? 要傳遞正確的調性;

          ? 視覺上要舒適;

          ? 能夠方便內容的閱讀和理解,提高傳播效率;

          ? 能建立品牌區隔,形成一定的個性。

          常見的色彩搭配問題還有很多,以后有機會蔥爺再做補充吧。

           

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學UI網》最常見的7個配色問題,如何解決?

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          B端營銷創意|數字藏品能否成為B端業務力爆發的新介質?

          seo達人


          圖片

          品牌價值“藏品化”的可能性

          通過對阿里云用戶調研發現,數字藏品這項技術有著廣泛的用戶認知基礎,有91%的阿里云用戶對阿里云推出數字藏品感興趣,其中81%的用戶比較感興趣及非常感興趣,40%的用戶曾經購買過數字藏品。這項結論讓設計師們非常興奮,這就意味著利用數字藏品傳遞阿里云品牌價值存在確實的可行性。

          圖片

           

           

          圖片

          致敬里程碑 

          設計師和業務團隊就數字藏品的設計方向進行了多輪溝通和論證,以阿里云飛天5K紀念碑為表現形態的思路脫穎而出。

          出發點是設計師們想借此項目重塑營銷品牌心智,回到“為了無法計算的價值”阿里云品牌主張,用“飛天5K紀念碑”這個開發者心中的圖騰,在網站上進行數字藏品與任務平臺的聯動,通過創意與品牌為業務帶來用戶增長價值。

          圖片

          回溯歷史,阿里云飛天5K是阿里云計算技術發展的一個里程碑,飛天5K集群上線是中國云計算最值得紀念的時刻,代表了中國云計算技術人勇敢追夢、追求極致的理想主義精神,其在用戶心中的意義不亞于一次成功的“登月”,這種寄托已經成為阿里云品牌的核心資產之一。

          圖片

          圖片

          圖片

          圖片

          圖片

          因此選擇云計算開發者的精神圖騰——“飛天5K紀念碑”作為創意原型,進行數字藏品的設計,進一步拉進與用戶的距離,同時能在開發者圈層中打造心智,營造傳播聲量,鏈接阿里云品牌與用戶間的情感共鳴。阿里云首款數字藏品讓用戶充滿期待,用戶關注的將不僅是藏品的使用價值或增值價值,更多的是一種不可替代的情緒價值。

          圖片

           

          圖片

           

           

          圖片

          業務目標的自然融入

           破圈裂變組合拳

          在整體方案設計上,團隊將拉新的核心目標和飛天5K數字藏品做了深度結合,利用「阿里云IP品牌價值+首發造勢+大促氛圍+精準的種子用戶裂變+所見即所得的虛擬權益」的超強組合拳,構建了完整的爆點傳播鏈,帶來規?;略鲇脩?,完成了一次成功的破圈嘗試。

           多端聯動引發爆點

          通過所見即所得的虛擬權益,突破用戶預期,引發了活動參與用戶通過微信群、朋友圈、微博、論壇等各種平臺的自傳播,形成穩定裂變鏈條,吸引更多玩家參與。同時官方通過阿里云App、官方微博、鯨探App、鯨探小程序形成流量矩陣為活動背書,引爆活動傳播。

          圖片

          用戶因情感的喚醒,通過數字藏品活動自然的完成了對阿里云產品的了解,并在主會場產品力彰顯、爆款價格吸引下,成為了阿里云新用戶,幫助業務完美的完成了既定目標?;顒觾H僅上線6天即完成一萬份數字藏品的發放,首購ROI達到58,同比上一次奧運小寶的拉新活動提升230%。

           

           

          圖片

          未來之路 

          數字藏品未來將成為阿里云傳遞品牌價值的重要載體,更多承載了中國云市場情感的作品將定期與用戶見面,逐步形成阿里云獨有的云數字藏品矩陣,賦能云業務的發展。

           

          原文地址:阿里云設計中心(公眾號)

          作者: 阿里云設計中心

          轉載請注明:學UI網》B端營銷創意|數字藏品能否成為B端業務力爆發的新介質?

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          10個WEB數據可視化最佳實踐案例

          ui設計分享達人



          數據可視化已迅速成為在網絡上傳播信息的標準。它用于各種行業,從商業智能到新聞,幫助我們理解和傳達見解。

          我們的大腦善于處理可視化信息,這使我們更容易理解圖表或圖形中可視化的數據,而不是表格和電子表格中列出的數據。一個偉大的數據可視化應該利用人類視覺系統的優勢來呈現數據,以便數據被吸收和理解。它應該考慮用戶對視覺處理的了解,提高并簡化用戶的數據體驗。

          目前有很多工具和框架可用于構建這些圖形,是時候回歸基礎了。是什么讓數據可視化有效?在設計數據時我們應該遵循哪些指導原則?

          以下最佳實踐將幫助您設計豐富、有洞察力的數據體驗。

          1.為特定受眾設計

          可視化是用于揭示模式的,提供上下文并描述數據中的關系。雖然設計師對給定的一組數據集中的模式和關系沒有任何影響,但她可以根據用戶的需求選擇顯示哪些數據以及提供怎樣的語境。畢竟,就像其他產品一樣,如果用戶無法使用它,那么可視化就毫無意義。

          為小白用戶設計的可視化應該是結構化的、明確的和有吸引力的。他們應該用文字直接說明受眾應該從數據中得到什么。



          轉換雙親的工作時間:媽媽VS爸爸

          來源:https://flowingdata.com/2016/04/20/parent-work-hours/

          另一方面,面向專家用戶的可視化可以顯示更精細的數據視圖,以驅動用戶探索和發現。細節和數據密度應該簡單明了。



          工作來來往往:國民失業

          來源:http://graphics.wsj.com/job-market-tracker/


          2.使用(但不要依賴)交互促進探索

          這是一個發人深省的數字:《紐約時報》網站上只有10-15%參與可視化交互的訪客實際點擊了按鈕?!都~約時報》的圖形團隊制作了一些業內最好的作品,但幾乎沒有人與他們互動!

          這表明,關于交互可視化設計,我們不能依賴交互來建立理解。關鍵數據不能隱藏在交互元素后面,而應該在沒有交互的情況下可見。

          然而,什么樣的交互比較好呢?允許整合更多數據(否則可能被排除),以允許感興趣的讀者更深入地研究數據集。Nathan Yau 的流動數據已經壟斷了這種交互式可視化風格市場,正如他關于死亡原因和預期壽命的圖表中所展示的那樣。



          2005年至2014年的死亡率數據:死因如何因性別和種族而異

          來源:https://flowingdata.com/2016/01/05/causes-of-death/

          或者,交互可以用作吸引點,一個引發關注的點,可以讓你的讀者在遠遠地瀏覽之前,親自參與該項目??纯?Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者簡單地繪制一個圓圈——在繼續文化形態的分析概述之前——畫出簡單而有效的可視化的特征。




          畫圓圈的方式說了很多關于你的故事

          來源:https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/

          同樣, The Pudding 最近發布了一個交互式可視化軟件,向讀者講述有關生日悖論的知識(生日悖論,指如果一個房間里有23個或23個以上的人,那么至少有兩個人的生日相同的 概率要大于50%。)。雖然大多數非統計學家可能會發現生日悖論,這是概率論中的一個標準問題,非??菰锴也恢庇^,但這種可視化使得它看起來簡直令人著迷。創作者融入最近的用戶互動的方式使得整個體驗非常具有關聯性。



          生日悖論實驗

          來源:https://pudding.cool/2018/04/birthday-paradox/

          這兩個交互式示例都起作用,因為它們允許讀者參與數據且不需要通過交互來理解。

          3.利用視覺突出性聚焦并引導體驗

          視覺突出性,使視覺元素從周圍環境凸顯的特性,是數據可視化的強大工具。它可以用于引導用戶注意可視化中最重要的信息,以幫助防止信息過載。通過使用視覺突出一些細節并壓制其他細節,可以使我們的設計更清晰,更容易理解。

          一些視覺變量——顏色和大小——是我們創造和控制視覺顯著性的關鍵。

          色彩方案是優秀的數據可視化的關鍵。眾所周知,色彩特別擅長打破偽裝。我們可以使用溫暖,高飽和度的顏色來突出關鍵數據點,并應用冷色調,使用低飽和度的顏色將不太重要的信息放到背景中。



          2014:最熱的年份

          來源:https://www.bloomberg.com/graphics/2014-hottest-year-on-record/

          尺寸也很明顯。較大的元素比較小的元素更有吸引力,因此要擴大您希望讀者首先閱讀的元素,并縮小不太相關的文本和元素。

          4.使用位置和長度表達定量信息并使用顏色表達分類信息

          Cleveland 和 McGill 在信息可視化方面的著名工作,研究了視覺編碼的有效性(即數據維度與視覺屬性的映射)。他們根據人們對視覺編碼的準確感知程度,對不同類型的視覺編碼進行了排序,給出了以下(簡化的)列表:

          1. 通過共同的規模定位
          2. 長度
          3. 角度
          4. 區域
          5. 顏色

          這對數據可視化設計的意義在于,我們顯示定量信息的首選應該是按位置進行編碼(如經典散點圖和條形圖所示)。與基于角度(如餅圖)或基于區域(如氣泡圖)的編碼相反,基于位置的編碼有助于觀眾在更短的時間內進行更準確的比較。

          然而,這并不是說所有可視化都必須是條形圖或散點圖。在研究可視化數據的新方法時,牢記這些原則是個好主意。

          我真正想要強調的是,顏色不應該用于編碼定量信息,而是應該用來編碼分類信息。也就是說,我們可以使用顏色來表示屬于不同類別的數據。



          出生時的預期壽命

          來源:http://www.vizwiz.com/2017/11/life-expectancy.htm


          5.使結構元素像刻度線和軸一樣清晰但不顯眼

          無論你是否支持 Edward Tufte 在設計中極簡主義的極端方法,都要幫自己一個忙,從你的圖表中消除視覺上的混亂。通過在數據元素和非數據元素之間創建可視化對比,來讓您的數據大放異彩,就像 Nadieh Bremer 在他的獲獎作品“美國出生時間”中所做的那樣。



          嬰兒潮:白天工作時間出生高峰期

          來源:https://www.visualcinnamon.com/portfolio/baby-spike

          刪除不起任何作用的結構元素使數據清晰(如背景、線條和邊框)。減弱必要的結構元素(如軸、網格和刻度線),否則這些元素會與您的數據爭奪注意力。網格為淺灰色,最寬設為0.5 pt,軸為黑色或灰色,最寬設為1 pt。

          6.直接標記數據點

          編碼數據的每個元素都需要進行標記,以便讀者理解它所代表的內容。簡單吧?

          錯。太多設計師依靠圖例來告訴讀者哪些符號或顏色代表圖表中的哪些數據系列。列舉圖例雖然對設計師來說很容易,但對讀者來說卻很難。它們迫使讀者在圖例和數據之間來回掃描,給讀者的記憶帶來不必要的壓力。

          更好的方法是直接在圖表上標記數據系列。這往往更像是一個挑戰,但是,嘿,你是設計師。你的工作就是做這項工作,以便于讀者不必這樣做。在下面的例子中,Nathan Yau 完成了避免使用圖例的工作,創建了一個帶有大量直接標簽的小型交互式多重顯示。



          每人每日平均消費量

          來源:https://flowingdata.com/2016/05/17/the-changing-american-diet/



          7.使用消息傳遞和視覺層級創建敘事流程

          最好的可視化講述著引人入勝的故事。這些故事來自數據中包含的趨勢、相關性或異常值,并且由于數據周圍的元素而加強。這些故事將原始數據轉化為有用的信息。

          從表面上看,似乎數據可視化完全與數字相關,但一個偉大的數據故事是無法用語言來講述的。信息傳遞具有清晰的視覺層次,才能一步一步地引導讀者閱讀數據。

          例如,可視化的標題,應該明確闡明一個關鍵觀點,使讀者領會。分散在數據中的微小注釋,可以通過異常值或趨勢引起讀者注意,從而為關鍵觀點提供支撐。



          來源:https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html

          我在這里要說的是:幫助讀者,確切地告訴他們在數據中尋找什么!

          8.將上下文信息直接疊加到圖表上

          正如我剛才提到的,我們可以在可視化中使用注釋來幫助創建數據故事的過程。有時我們可以添加圖形元素來使這些注釋更有意義,以便將這些信息更直接地關聯到我們的數據。

          以這張來自 Susie Lu 的圖片為例?!跋募敬笃焙汀皧W斯卡季”的數據重疊賦予了原本看似隨機的高峰和低谷以意義。它們幫助觀眾理解數據的重要性,比單獨使用字幕或注釋更直接。



          2015 - 2017.08 票房趨勢:強大的開場和后期的爆發

          來源:https://susielu.com/data-viz/box-office

          9.為移動體驗而設計


          靜態可視化通常以 JPG 和 PNG 等位圖圖像格式發布,這對移動端用戶來說是一個明顯的挑戰。許多數據可視化的美妙之處在于它們的視覺細節——微小的數據點和微妙的編碼——而這些細節許多在靜態格式的小屏幕上被丟失了。

          例如:Accurat 工作室在諾貝爾獎上的精美復雜的作品,在印刷和高分辨率視網膜顯示器上看起來非常棒的全尺寸,卻在移動設備上幾乎難以辨認。



          視覺數據

          來源:http://giorgialupi.com/lalettura/

          為移動體驗設計,或者使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構建響應式可視化,或者為印刷、桌面和移動設備多種載體創建相同的靜態可視化設計。

          10.平衡復雜性與清晰度以促進理解

          我今天談到的所有最佳實踐可以歸結為一件事:在復雜性和清晰度之間找到合適的平衡,以滿足受眾的需求。

          制作精美的、探索性的可視化細節總是誘人的,但這不一定是最合適的方法。在設計圖形時要考慮周到 ,讓讀者的知識和目標決定應該包含哪些數據以及包含多少數據,并整理數據以講述您想要講述的故事。

          原文標題:10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB

          原創作者:MIDORI NEDIGER 

          原文鏈接: https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/

          翻譯作者:桃花果

          授權獲?。簭堩餐?/span>

          文章審核:王翎旭

          文章編輯:王鴻飛

          該譯文并非完整原文,內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處,歡迎不吝指出。如需轉載,請注明來自 三分設


          作者:三分設  來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系。 



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



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

          設計未來的情感界面

          ui設計分享達人

          推薦 | 科技的不斷發展將給未來的界面設計帶來更多的可能性。復雜的語音界面、先進的 AR 或是真正沉浸式的 VR 都會被實現。而科技的進步也對設計師們提出了新的要求。在更加重視體驗的未來,設計師們應該作出何種創新以應對變化呢?尼克·索薩尼斯曾在其著作《非平面》中寫道:“要走出平面與狹窄,我們需要萬花筒般千變萬化的視角,我們的維度性和不斷變化的能力才得以展現”。希望此文中提供的視角能給設計師們帶來啟發,跳出傳統屏幕的平面來思考未來的界面設計。




          快速摘要:

          當改變來臨,我們總傾向于自然而然地抵制它。我們所擁有的唯一真正的界限,就是我們的大腦告訴我們,事情最好保持原樣。在本文中,Gleb Kuznetsov 分享了他的一些想法和觀點,即在不久的將來,界面會是什么樣子,以及我們能夠期待何種非凡的體驗。關鍵詞:虛擬現實,用戶交互,用戶體驗,用戶界面

          在我們做決策的過程中,情感起著至關重要的作用。一秒鐘的情感便能改變用戶體驗產品的整個現實過程。

          人類是一種由情感驅動的物種。我們選擇一款產品并不是因為它有何意義,而是因為我們認為它能夠給我們帶來何種感受。未來的界面將會在產品設計的基礎上使用情感概念。人們的使用體驗將基于智商 ( IQ ) 和情商 ( EQ ) 。

          本文試圖展望未來,看看未來十年我們將設計什么樣的界面。我們將詳細研究三種交互媒介:

          1. 語音
          2. 增強現實 ( AR )
          3. 虛擬現實 ( VR )

          未來情感界面的實例

          未來的界面將是什么樣子?雖然我們現在還無法回答這個問題,但我們能夠探討未來的界面可能具有哪些特征。在我看來,我確信我們最終會擺脫那些充滿菜單、面板、按鈕的界面,并轉向更加“自然”的界面,即擴展至我們全身范圍的界面。未來的界面不會被限制在物理屏幕中,而是會借助五感的力量。正因如此,它們需要更少的學習曲線①——理想情況下,根本沒有學習曲線。

          ①學習曲線:在一定時間內獲得的技能或知識的速率,文中指面對未來的界面,用戶需要更高效的學習速度,甚至無需學習即可掌握界面的使用方法。

          情商在商業中的重要性

          除了使體驗更加自然并減少學習曲線之外,對產品創造者來說,情感設計還有另一個益處:它提高了用戶對產品的采用率。利用人類對情感的反應能力來創造更好的用戶參與度是可能的。

          具有真實感的語音界面

          使用語音功能作為主要界面交互方式的產品正變得越來越流行。我們之中有很多人使用 Amazon Echo 和 Apple Siri 來安排日常活動,例如設置鬧鐘或安排預約。但是,目前市場上可用的語音交互系統中,大多數仍具有一個天然的局限性:它們并沒有將用戶情感考慮在內。結果便是,當用戶與像 Google Now 這樣的產品進行交互時,他們有一種在與機器而不是真人交流的強烈感覺。系統的反應是可預測的,并且它們的響應是腳本化的。與這樣的系統進行有意義的對話是不可能的。

          但是目前市場上也有一些完全不同的系統。其中一個是 Xiaoice( 微軟小冰 ),一個社交聊天應用程序。這個應用程序的核心是情感計算框架;其理念是,首先要與用戶建立一個情感連接。Xiaoice 可以動態識別情緒,并通過給出相應回答的長對話來吸引用戶。結果,當用戶與 Xiaoice 交互時,他們感覺是在與真人進行對話。

          Xiaoice 的局限在于它是一個基于文本的聊天應用程序。很明顯,如果是基于語音的交互,你可以獲得更強烈的感受( 人類的聲音具有不同的特征,例如音調可以傳達出強大的情感 )。



          微軟小冰跨平臺人工智能機器人圖片來源:https://www.msxiaobing.com/

          很多人已經通過電影 《 Her 》( 2013 )看見了基于語音互動的力量。Theodore (由 Joaquin Phoenix 扮演的主角)愛上了 Samantha ( 一個復雜的操作系統 )。這也讓我們相信,未來語音系統的主要目的之一便是成為用戶的虛擬伴侶。這部電影中最有趣的事是 Theodore 從未見過 Samantha 的視覺形象——他只能聽到她的聲音。要建立這種親密關系,必須產生能夠反映出和虛擬伴侶性格一致的回應。這將使系統既可預測又值得信賴。



          電影《Her》海報

          圖片來源:https://movie.douban.com/photos/photo/2166850749/

          要實現像 Samantha 這樣的系統,科技還有很長的路要走。但是我相信,語音優先的多模式界面將是語音驅動界面發展的下一篇章。這樣的界面將使用語音作為主要的交互方式,并在上下文中提供附加信息,以創造和構建連接感。



          為 Brain.ai 設計的語音界面實例 (圖片來源:Gleb Kuznetsov )


          AR 體驗的演變

          增強現實( AR )被定義為在現實世界基礎之上進行的數字疊加,并將我們周圍的物體轉換為交互式數字體驗。我們的環境變得更加“智能”,用戶在指尖產生一種“有形”物體的錯覺,從而在用戶和產品(或內容)間建立更深層次的連接。

          利用AR重構現有概念

          AR 的獨特之處在于它給予我們一種與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西,這有助于我們更加了解我們周圍的環境。這種AR屬性幫助設計師使用熟悉的概念創造新層次的體驗。

          例如,通過使用移動 AR,可以創造一個全新水平的飛行體驗,它允許乘客看到有關她的班次或當前飛行進程的詳細信息:



          AR 展示空客 A380 的飛行體驗。(圖片來源:Gleb Kuznetsov )

          AR 幫助我們找到穿越空間的方式,并一目了然地獲取所需要的信息。例如,AR 可以為你當前的位置創建豐富的提示。SLAM 技術②在這方面有著出色的表現。SLAM 允許環境的實時映射,并能將多媒體內容置入環境中。

          ②SLAM 技術:( Simultaneous Localization And Mapping ) 同時定位與地圖構建技術,指機器人在未知環境中從一個未知位置開始移動,在移動過程中根據位置估計和地圖進行自身定位,同時在自身定位的基礎上建造增量式地圖,實現機器人的自主定位和導航。

          AR 有很多機會為用戶創造價值。例如,用戶可以將他們的設備對準建筑物,并在屏幕上了解該建筑的更多信息。它能夠顯著減少工作量,并通過導航和訪問功能使用戶獲得輕松的情感體驗。



          在環境中提供附加信息( 圖片來源:Gleb Kuznetsov )

          我們周圍的環境(例如墻壁或地板)也能成為交互的場景,在過去這僅限于通過智能手機和電腦實現。

          下面的概念正是如此,它使用物理對象(白墻)作為畫布,來表現那些通常用數字設備來傳達的內容:



          互動墻的概念——現實世界之上的數字疊加(圖片來源:Gleb Kuznetsov )

          避免信息過載

          在一個名為 “HYPER-REALITY”( 超真實 )的一個網站中,作者 Keiichi Matsuda 制作了一段視頻。視頻中物理世界和數字世界已經合并,用戶被大量信息淹沒。

          視頻:

          https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be

          科技允許我們同時顯示幾個不同的對象。但是當它被誤用時,很容易造成過載。

          信息過載是一個嚴重的問題,它會對用戶體驗產生負面的影響。避免信息過載將成為 AR 設計的目標之一。設計良好的應用程序會借助 AI 的力量將那些與用戶無關的元素過濾掉。

          高級個性化

          當系統根據用戶的需求和期望來實時管理內容和功能時,數字體驗的個性化便會發生。很多現代移動應用程序和網站使用個性化的概念來提供相關的內容。例如,當你瀏覽 Netflix 時,你看見的電影列表都是基于你的興趣進行個性化推薦的。

          AR 眼鏡能夠創建新的個性化水平,即“高級的”個性化水平。由于系統能“看見”用戶所看見的內容,因此可以利用這一信息來提出相關建議,或在環境中提供附加信息。想象一下,你很快就將戴上 AR 眼鏡,并且傳輸到你視網膜的信息是根據你的需求量身定制的。

          視頻:

          https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be

          從增強現實走向虛擬現實,創造沉浸式體驗

          AR 體驗具有天然局限性。作為用戶,我們與內容之間有一條明晰的界線,這條線將一個世界( AR )與另一個世界(現實世界)分離開。這條線讓人感覺 AR 世界顯然不是真實的。

          你可能知道如何去解決這一限制,即使用虛擬現實( VR )。當然,VR 確切來說不是一種新媒介,但直到最近幾年,科技才達到能讓設計師們創造沉浸體驗的高度。

          沉浸式 VR 體驗移除了真實世界與數字世界間的屏障。當你戴上 VR 耳機時,你的大腦很難分析出你接收到的信息是否真實。電影《 頭號玩家 》( Ready Player One )很好地解釋了在不久的將來,VR 體驗會是什么樣子:

          視頻:

          https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be

          以下是設計師們在創造沉浸式虛擬環境時需要記住的幾點:

          1.寫一個故事有意義的 VR 在其核心有一個強大的故事。這就是為什么在你開始設計 VR 環境之前,你需要為用戶旅程寫一個故事?!肮适掳濉边@一強大工具可以幫助你完成這一工作。使用故事板,可以創造一個故事,并檢查所有可能的結果。當你檢查你的故事時,你將看到何時以及如何利用視覺及聽覺線索來創造沉浸式體驗。

          2.與角色建立更深層次的連接為了使用戶相信 VR 世界中他們周圍的一切都是真實的,我們需要在用戶與其扮演的角色間建立聯系。最明顯的解決方案之一是,使用戶的手部表現成為虛擬場景中的一部分。這一表現應該是實際的手——而不僅僅是一個被操縱的復制品??紤]不同的因素(例如性別或膚色)是至關重要的,因為這讓交互更加真實。



          用戶可以看到他或她的手,并看到自己作為一個角色出現(來源:leapmotion )

          為了建立此連接,也可以將現實生活中的物品帶到 VR 環境中。例如,一面鏡子。當用戶看向鏡子并看到其反射出他們自己的角色時,用戶和虛擬角色間的交互會更加真實。



          VR 用戶看向虛擬的鏡子,并在 VR 環境中看到他自己的角色。致謝:businesswire

          3.使用手勢代替菜單

          當設計沉浸式 VR 體驗時,我們不能依賴傳統的菜單和按鈕。為什么呢?因為顯示菜單比較容易打破沉浸感。用戶將會知道他們周圍的一切都不真實。設計師們需要依靠手勢來替代傳統菜單。設計界依然在為手勢的使用制定通用語言,參與這項活動是有趣且令人興奮的。但棘手的部分是如何設計出用戶熟悉且可預測的手勢。



          Hovercast VR menu 是將現有的交互概念重新用在 VR 體驗的一次嘗試。不幸的是,這個概念會打破沉浸感。新的媒介需要一個新的交互模式。

          4.與 VR 環境中的元素交互

          為了創造一個真實的環境,我們需要使用戶能夠與現實中的物體進行交互。理想情況下,環境中的所有物體都可以被設計成允許用戶觸摸和觀察它們的模式。這樣的物體會起到刺激作用,并幫助你創造更具沉浸感的體驗。觸摸對于探索環境非常重要,嬰兒在剛出生的那些天接收到的最重要的信息便是通過觸摸獲得的。

          5.在 VR 中分享情感

          VR 真正有機會實現社交體驗的新高度。但為了實現它,我們需要解決一個重要問題,即將非語言的提示帶入交互中。

          當我們與他人進行交互時,我們獲得的信息中有很重要一部分來自肢體語言。驚喜、厭惡、憤怒——所有這些情緒都在我們的面部表情中。在面對面的交互過程中,我們通過眼睛的區域來推斷信息。當人們在 VR 環境中互動時,為了創造更加真實的交互,提供此信息是非常重要的。

          好消息是,頭戴式設備( HMD )很快就將涵蓋情感識別。在虛擬現實中,幾乎所有人與人之間的互動都受益于面部表情。



          在 VR 空間中分享情感(來源:MITReview 的 Rachel Metz )

          6.為 VR 環境設計合適的音效和音樂

          音頻是沉浸式體驗中的重要組成部分。如果不為環境設計音效,就不可能創造出真正的沉浸體驗。聲音既可以被當作背景元素(即環境中風的聲音),也可以是指向性的。在后一種情況中,聲音可以作為提示使用——通過播放具有方向性(聲音來自哪里)和距離(可以將用戶注意力集中在特定元素上)的聲音來提示用戶。

          在為 VR 設計音頻時,制作 3D 音效是基礎。2D 音效 VR 中表現不佳,因為它讓一切都顯得太平。3D 音效可以使你聽到來自四面八方的聲音——前、后、上、下——任何地方。你不需要使用專門的耳機來體驗3D音效,通過頭戴式設備的標準立體揚聲器便可以實現。

          頭部追蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現是至關重要的。這就是為什么當用戶移動他的頭部時,聲音應該根據頭部移動而改變。

          7.預防暈動癥

          暈動癥是 VR 的主要痛點之一。在這種情況下,視覺感知的運動與前庭系統③的運動感知之間存在分歧。在體驗VR的過程中,使用戶保持舒適是至關重要的。

          ③前庭系統:前庭系統是人體平衡系統的重要組成部分,它具有特殊的感受器,能夠接受適宜的刺激,經過與其他感覺信息(如視覺信息、其它本體覺信息)的整合、加工等處理后,再經多條神經通路把這些信息傳送到腦內更高層次的中樞,進行高層次的加工處理。

          關于VR中導致暈動癥的原因,以下是兩種主流理論:

          • “感覺沖突”理論

          根據這一理論,暈動癥的發生是由于預期運動與實際經歷的運動在感官上不一致。

          • “眼動”理論

          在《 The VR Book: Human-Centered Design For Virtual Reality 》一書中,作者 Jason Jerald 提到,暈動癥的發生是由于眼球的非自然運動,而這是保持場景圖像在視網膜上穩定所必需的。

          以下是一些提示,有助于避免用戶使用嘔吐袋(避免暈動癥的發生):

          • 身體運動應該與視覺運動相匹配。有時即便是很小的視覺抖動也會對體驗造成巨大的負面影響。
          • 讓用戶在切換場景時休息(當 VR 體驗真正呈動態時,這一點尤為重要)。
          • 減少虛擬旋轉

          結論

          當我們考慮產品設計的當前狀態時,很明顯我們僅看見冰山一角,因為我們局限于平面屏幕。我們正目睹人機交互( HCI )的根本轉變——重新思考數字化體驗的整體概念。在接下來的十年中,設計師們將打破這層玻璃(我們今天所知的移動設備時代)并轉向未來的界面——復雜的語音界面、先進的 AR 和真正沉浸式的 VR。當創造新的體驗時必須要明白,我們唯一的界限是我們的大腦總告訴我們,應該保持原樣。


          原文標題:Designing Emotional Interfaces Of The Future

          原創作者:january

          原文鏈接:https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/

          翻譯作者:阿欽

          授權獲?。簭堩餐?/span>

          文章審核:王翎旭

          文章編輯:王鴻飛

          該譯文并非完整原文,內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處,歡迎不吝指出。如需轉載,請注明來自 三分設

          作者:三分設  來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系。 



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



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

          可用性錯誤: 來自用戶體驗設計師的6個真誠而有價值的建議

          ui設計分享達人

          我經常想,如何花費極少的精力避免可用性錯誤。在做了這么多項目之后,我意識到在我準備設計一件東西之前,我犯了很多常見的錯誤。當我專注于設計時,可用性問題已經悄無聲息地形成了。它們在我的工作流程中扎根,現在我正試圖改變我的工作方式。

          在這篇文章中,你可以了解以下內容:

          • 在不斷變化的項目中用戶體驗設計師的經驗
          • 鮮為人知的關于可用性錯誤的觀點
          • 改進工作流程的6個提示,以避免可用性錯誤和網站轉換率低的問題

          幾個月前,我設計在線商店的時候,閱讀了如何避免可用性錯誤的相關文章。幾天后,我一遍又一遍地發現同樣內容的舊文章。顯然,它們都故意收集了同樣的錯誤:經常出現并容易避免的錯誤值得反復提及。

          問題是,它們似乎是臨時性的解決方案,因為我項目的基本屬性每周都在不斷變化——信息架構、導航機制等所有東西。我每周都在尋找新的技巧,所以我決定尋找可用性錯誤的本質,而不是一種避免它們的方法。

          可用性錯誤排序的低效性

          識別可用性錯誤需要花費很多時間。它以消極的、妥協的方式影響有效性、效率性和便利性。一個小問題可能會讓用戶在完成任務時感到不愉快。巨大的問題甚至會讓你無法完成任務。 在本文中,我將把它們稱為不正確的設計選擇。

          可用性錯誤會影響用戶便捷、高效或有效地完成任務

          問題在于可用性問題有許多不同的形式和嚴重程度。那么為什么不對它們進行分類和優先級排序呢? 它不能那么混亂,對嗎?不久前我就是這么想的。在混亂中創建秩序會非常有意義,但是當涉及可用性錯誤時,這個概念就失敗了。

          制作群組或列出最常用的群組并不能提供有效的解決方案。為什么? 用戶體驗設計不斷變化,并且有多個變量。想想在過去二十年中我們與界面交互的方式是如何變化的。

          我們已經從顯示器轉移到小型移動屏幕,而平板電腦和帶有圓形屏幕的智能手表則拓寬了這一領域。而這只是以一種更復雜的方式去看待一個變量。

          也就是說,在不斷變化的設計領域,任何規則或原則都不會永遠存在。這意味著查找和排序最常見的錯誤只是一個臨時解決方案。這可能行得通,但不會持續太久。為了給用戶體驗設計遙不可知的未來做好準備,請查看您的工作流程以獲得最終答案。


          如何在考慮
          可用性錯誤的情況下
          改善工作流程

          幾年前,沒有人會對設計一個可以從屏幕底部向上滑動即可訪問的購物車功能感到驚訝。2017年,iPhone X 誕生了。從那時起,大多數用戶都使用此手勢(指滑動手勢)進入主屏幕。

          資料來源:support.apple.com

          1.將意識集成到您的工作流程中

          我以前不會瀏覽設計趨勢,以免影響自己。我僅僅檢查情緒板和配色組合,完全忽略導航結構和其他用戶體驗解決方案。我相信在看過流行趨勢中的解決方案之后,我們會下意識地放棄我們的創新想法。

          經過這么多年,整個概念在我腦海中浮現。忽略當前的用戶行為模式和技術變化,您雖然不會讓自己暴露在犯關鍵設計錯誤的可能性中,但你也會錯過所有其他的機會,使你的設計真正有用。

          2.獲取背景信息

          好的,所以你要規劃未來用戶的行為,你就必須堅持到底。進行探索性訪談作為一種良好的開端,提出問題并發現痛點和欲望背后的動機為您提供了完美的素材:背景信息。

          在設計界面時,這將成為寶貴資源。 它產生的數據量可能看起來很可怕。您可能會發現很難駕馭或使用,但里面總是隱藏著無限的可能性。

          找到一個可行的方法獲取一些有趣的背景信息。如果您沒有時間進行面試,請查找類似產品的案例研究,從中找出結果。 看看現有的基準研究或類似產品的成功特征。 雖然不完全相同,但它們可以為您提供一些幫助。在考慮設計線框圖之前進行此項研究,可以讓您為用戶設計。

          3.消除你的偏見

          我正在設計一個食品配送應用程序,想要試驗一下按鈕的位置,這個按鈕可以把你帶到餐館的完整列表中。 我通過幾次測試嘗試了很多變化,但沒有引起太多關注,因為用戶還有其他幾種方法可以做到這一點。盡管接下來的測試進行得很順利(這樣受試者就能完成任務),但這種體驗仍然不能讓人滿意。找出問題的癥結所在是個難題,因為他們無法確定問題(反正不是他們的工作)。

          幾天后,我正在看著我的女朋友在一個完全不相關的網站上訂餐。我注意到她是如何避免定制的套餐和推薦的餐館。她說它們看起來像廣告。她認為主頁是一個受控制的環境,所以她進入了餐館列表,在那里她可以在不受控制的情況下對它們進行排序和過濾。這是我項目的關鍵:控制。我在測試期間錯過了這點,因為我對用戶應該如何使用應用程序有一種偏見。

          做出風險設計決策的最簡單方法是什么?清醒的意識到您的桌面和移動設備用戶想要如何使用您的產品。為用戶構建而不是告訴他們應該如何思考,總是變得更容易。宏觀看待目標群體期望如何與產品交互,將幫助您創建直觀的界面,同時簡單地避免關鍵錯誤。這是一筆很好的交易。

          4.接受你的錯誤

          設計師證明自己和他們設計的用戶一樣人性化。雖然很難,但我們必須接受這個事實。這個微小的錯誤至今仍困擾著我。接受你的錯誤,尤其你是完美主義者。我們不可能一直十全十美。

          此外,我們無法避免較小的可用性問題,沒有人可以在設計時不考慮這些問題。它們只是過程的一部分。當然,使用各種經過驗證的實踐或(在這種情況下)改進工作流程有助于避免關鍵問題。但我們很可能無法解決與滿意度相關的不便。因為我們以獨特的方式感知世界,所以我們期望結果和行為不同。

          5.理解你的錯誤并加以改進

          分析出了什么問題和錯誤的原因。了解糟糕的設計選擇背后的原因比錯誤本身更重要。這讓我們回到簡單地排序可用性錯誤“低效性”的問題。如果你能說出你為什么一開始就犯了錯誤,那么無論平臺或觀眾如何,你都可以避免在未來犯同一個錯誤。

          追溯你的錯誤可能會讓在工作流程中養成習慣(或相反,缺乏習慣,從而導致很多麻煩)。就我而言,使用假設進行設計會導致許多小的可用性問題。反過來,它們以明顯妥協的方式影響了整體用戶體驗。所以我寫這篇文章。把你的錯誤視為你工作方式的副產品,這可以幫助改進方法,擺脫并根治問題。


          6.驗證您的更改

          然而,單獨根除錯誤并不能減少錯誤。就像設計和測試一樣,重建工作流也需要驗證。我們只需通過各種后續技術來做到這一點。您可以選擇是向客戶發送簡單的電子郵件,創建完整的問卷,或是進行另一輪測試。確定獲得有關工作的相關信息的最有效方式取決于您的項目和客戶。

          獲得關于工作的反饋,以了解改進的程度。通過這種方式,您可以衡量更改的有效性并對其進行微調,以便在第一輪不滿意時獲得更好的結果。此外,它也為你的簡歷錦上添花,但這只是獎勵。

          結論和回顧

          以下沒有特別的順序,我通過改進您的設計工作流程來提高可用性。相反,它們提供了一個指南,告訴我們應該在哪些地方派上用場。 讓我們快速回顧一下:

          • 將意識集成到您的工作流程中:了解當前的用戶行為模式和技術變化。
          • 獲取背景信息:找到一種可行的方法來了解有關選擇和偏好背后的動機。
          • 消除你的偏見:隨時準備學習新的東西,并密切關注新的觀點。
          • 接受你的錯誤:設計師對用戶的評價和用戶對設計師的評價是一樣的,犯錯并不會讓你遜色。
          • 理解你的錯誤并加以改進:理解糟糕的設計選擇背后的原因,比錯誤本身更重要。
          • 驗證您的更改:重建工作流程需要驗證以確定有效性。

          我仍然試圖將這些技巧正確地整合到改進您的工作流程中,并且需要花費很多時間去精確的設計。但我的產出已經感覺更具戰略性和準備性。 我希望它對你也有幫助。


          原文標題:Usability Mistakes: 6 Honest and Valuable Tips From a UX Designer

          原創作者:Sándor Zelenka

          原文鏈接:https://uxstudioteam.com/ux-blog/usability-mistakes/

          翻譯作者:shmilyJ

          授權獲?。?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:inherit !important;">張聿彤

          文章審核:王翎旭

          文章編輯:王鴻飛

          該譯文并非完整原文,內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處,歡迎不吝指出。如需轉載,請注明來自 三分設

          作者:三分設  來源:站酷


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

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

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


          B端列表頁設計總結

          ui設計分享達人

          列表頁腦圖



          左側導航欄

          全局導航

          1、導航欄可折疊收起菜單。

          2、收起時,鼠標懸浮在圖標上同時右側彈出菜單欄,然后觸發菜單文字。



          頂部導航欄

          • Tab擺放位置(什么時候在上,什么時候在下?)

          1、根據tab的層級來確定位置,最高層級在上,不同流程層級在下。

          Tab在上:用戶明確自己想要查找的目標在哪個tab并且需要一眼看到所有概況(想要查找數據時,直接到對應的tab下查找)。

          Tab在下:需要看到查詢的結果在各tab下的分布情況。



          篩選/搜索區

          1、篩選區包括搜索項、查詢、清除查詢;如果搜索項超過一行時,需要「展開、收起」按鈕。

          2、折疊展開設計:默認顯示一行將使用頻率高、覆蓋面廣的1-3個顯示出來其他的隱藏。(用戶頻繁使用的篩選條件能一眼找到)。

          3、按鈕固定在最右側不變,搜索項可進行自適應。

          4、篩選條件:

          • 交叉篩選:選擇篩選條件后,需點擊「查詢」按鈕才能觸發篩選條件。
          • 實時篩選:篩選條件不存在交叉,可以實時篩選。像“流程狀態”此類固定選項類,要不要提供“勾選即執行搜索”功能?用戶可能還需要綜合其他搜索條件一起查詢,如果執行搜索可能會打斷用戶剛才的輸入。
          • 時間篩選:根據真實場景來提供快捷選項,比如:昨天、最近7天、最近30天...



          全局操作

          1、功能性按鈕和批量操作(比如新增、導入、導出...)

          2、根據使用頻率進行排列新增>導入>導出;使用頻率高的操作采用高亮顯示。

          3、如果按鈕太多可進行操作項分類。



          表格欄

          表頭

          1、在能夠概括的情況下,盡量簡練、準確,一般可根據上下文關系進行簡化,以達到節省表格頭部空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數據本身。

          2、對于比較復雜的表頭,可以跟一個釋義標識,鼠標懸停時出現該字段的詳細解釋。

          3、表頭篩選、排序功能

          • 表頭字段太多怎么辦?

          提供表頭篩選功能,依據用戶關注度最高的字段進行排列。

          • 哪些字段需要排序功能?

          需結合業務場景具體分析,一般來說,編號、時間、價格字段,提供正序、倒序功能。

          • 默認排序

          考慮用戶第一次進入列表頁的初始化狀態,保證用戶進入頁面時大概率能直接看到自己想要的東西。

          表體

          包含多選列、數據列、操作列

          • 哪些字段可以前置?

          特殊處理操作的按鈕、字段優先級、狀態可以前置,方便一目了然。

          • 表格字段太長該如何處理?

          1、全部展示(缺點:利用滾軸滑動次數太多用戶視覺容易疲憊)。

          2、較長字段用“…”展示,防止字段重復,對重要字段進行快速區分、對比(優點:每行可顯示較多的信息 缺點:想要看全信息,只能鼠標移入字段出現氣泡顯示完整信息)。

          3、換行,保持行高不變,改變文字距單元格的上下間距,最好不要超過3行,多余字段用”…”顯示(優點:盡可能顯示全部內容 缺點:同2)。

          4、字段優先級分類,做折疊展開設計(篩選信息層級較高的字段放在表格欄,次要信息放入二級表格)。

          5、數據庫中沒有該字段,用“-”,數量用“0”后邊有小數點、后位數保持上下單位一致。

          • 表格設計如何降噪

          1、讓用戶將注意力放在數據信息上,而不是表格底色、邊框

          2、不使用斑馬線設計、分割線樣式輕盈、去掉不必要的裝飾和顏色

          • 單行操作項位置如何處理?

          基于業務、基于場景

          比如用戶以處理訂單為主,操作項建議放在第一列,方便用戶操作。

          如果用戶以查看信息為主,操作項一般放在最后一列。

          • 如何處理由于用戶權限不同或者狀態不同這兩種原因,使得每行的數據擁有不同的操作項?

          可以采用下拉框設計

          • 行高



          1、行高=文字行高+上下間距

          2、文字行高可以設定為字號的1.2~1.8倍,上下間距可以設定為字號的1~1.5倍;行高影響每行信息的易讀性。

          3、一般行高為32-56px












          • 列間距、列數、對齊方式

          1、采用8px網格作為基礎單位,來定義各組件和模塊間距,因為目前主流桌面設備屏幕分辨率在垂直和水平方向基本都可以被8整除,使用8px比較普適。






          2、最好列數在7±2

          3、對齊方式:文本采用左對齊,金額及跟金額相關的百分比、操作項采用右對齊

          • 分頁器
          • 一頁展示多少條合適?

          一頁最好能在一屏展示,避免用戶來回上下滾動,比如固定為展示10條。

          用戶特殊使用需求,不適用以上規則,一頁可能展示10條/20條,都可以。





















          視覺稿







          作者:YOgire  來源:站酷

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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