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

          首頁

          提升產品易用性的10個知識點

          ui設計分享達人

          作為設計師,我們希望做出來的產品對于用戶而言易于訪問、易于瀏覽、易于理解和可供所有人使用。而我們在做頁面的過程還要考慮具有視力障礙、行動不便等殘疾類人群

          萬維網的創始人蒂姆·伯納斯·李 (Tim Berners Lee) 也重申了這一點,他說:

          “網絡的力量在于它的普遍性。無論是否殘疾,

          每個人都可以訪問是一個重要方面?!?

          因此,這里有十種方法可以使你的界面更易于訪問和更具包容性,并確保你是為用戶設計的產品


          文章內容包含以下:

          1、顏色對比

          2、導航選項

          3、不僅僅使用顏色來指示狀態變化

          4、視覺焦點

          5、預先加載

          6、設計表達

          7、視覺層級

          8、合理交互

          9、用戶測試

          10、無障礙設計


          1、顏色對比

          色彩是設計的主要方面之一。確保背景和元素模塊之間有適當的對比,可以使用適當的陰影和顏色對比來

          區分,突出重要信息是使你的產品更易于訪問的最簡單的方法。


          這里推薦使用工具WebAIM 顏色對比度檢查器來實現平衡的顏色對比度。該工具允許輸入特定的十六進制代碼或從色輪中進行選擇,然后進行增量調整以達到元素之間的 AA(最低對比度)或 AAA(增強對比度)對比度標準。

          網址:https://webaim.org/resources/contrastchecker/


          2、導航選項

          在用戶使用時,導航的便利性是最重要的因素之一

          (確保產品內跨頁面的導航具有一致的命名、樣式和定位)

          (為用戶提供站點搜索或站點地圖)

          (通過提供方向提示例如面包屑和清晰的標題幫助用戶了解他們在網站或頁面上的位置)


          3、不僅僅使用顏色來指示狀態變化

          雖然顏色對于傳達信息很有用,但它不應該是傳達信息的唯一方式。在使用顏色來區分元素時,請確保始終提供不依賴于顏色感知的額外標識,以便于用戶易識別


          比如在做表單的情況可以通過以下方式去做區分


          (除了顏色之外,還使用星號來指示所需的表單字段)

          (使用提示標簽來區分狀態)

          (添加說明文字)



          4、視覺焦點

          一些用戶使用手機端產品時很難去聚焦于某個點,作為設計者這時需要去通過手法去制造焦點引導用戶進行操作。

          以手機屏幕為例,用戶閱讀的習慣分為兩種,一種是“z”習慣型另一種是“F”習慣


          比如可以在用戶瀏覽路徑上去做視覺焦點,引導告知用戶進行點擊,下面是列出的有效焦點指標:

          (具備清晰的對比度)

          (具有與元素互補的形狀和大?。?

          (使用互補但引人注目的配色方案)

          (好的動畫可以幫助用戶跟蹤焦點移動)

          (元素位置大小等適配各種型號)


          5、預先加載

          在產品上不管是文字還是圖片都需要提前告訴用戶當前狀態,不同的使用環境下用戶的網絡相對是有波動情況,在網絡不好的情況下用戶打開產品如果產品沒有做預加載大概率會造成用戶直接關閉產品


          6、設計表達

          “沒有用戶喜歡點擊他不想點的入口”聽起來比較繞,你可以這樣理解,我們平??吹降陌粹o是什么樣呢如果在頁面中我們把一個按鈕做成一個灰色上面寫著點擊進入,作為設計者的我們在遇到這樣的一個按鈕相信都會猶豫的,灰色傳達給用戶的信息是禁止不可點擊,用戶已經被培養出這樣一種習慣,但是遇到這種按鈕上面還寫著《點擊進入》就會造成信息傳達不準確(不僅僅是按鈕)。




          (樣式符合用戶理解范圍內)

          (交互給用戶合理反饋,點擊后狀態、按壓狀態、禁止狀態)


          7、視覺層級

          建立視覺層次結構, 元素在你的頁面設計中的定位方式,并在這些相應元素之間建立一定的連貫性。


          (不要擠滿屏幕,否則會提升用戶閱讀成本)

          (視力受損的人可能需要放大屏幕上的元素,因此請使你的內容具有可擴展性)

          (將重要信息放在視線水平附近)

          (使用空格和鄰近度使內容之間的關系更加明顯)


          8、合理的交互

          一個好的交互能夠讓產品達到一個沉浸式體驗,相反一個差的交互會造成用戶的反感;什么是合理的交互例如在使用閱讀產品時,翻頁功能是模仿現實中書本的翻頁效果作用到線上就會制造出一個良好的體驗

          交互不僅僅是操作反饋還包含頁面布局、元素展示、場景使用等

          (符合用戶對現實物體的認知,達到聯覺效果)

          (內容簡潔,具備吸引力)

          (出現場景是否合情合理)

          (具備反饋能力)


          9、用戶測試

          即使在前期工作做的足夠好的情況下,在你覺得整個產品設計易于用戶使用之后,使用產品的用戶也可能會發現某些地方并不像你希望的那樣友好


          避免這類問題的最佳和最有效的方法是通過用戶測試,在整個產品開發項目中進行非正式評估比在項目結束時進行正式的可用性測試更有效,用戶測試有很多好處,至關重要的是你能夠了解你的產品還存在哪些不足那些設計不到位,然后針對這些不足進行問題解決



          10、無障礙設計

          創建無障礙設計最重要的部分之一在于知道它絕不是創新的障礙,但是它可以讓你創新你的設計,在做產品的時候要考慮到產品不單單只服務一部分人,所以在設計時應當考慮到具備一定障礙的群體

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

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



          文章來源:站酷    作者:愛吃貓的魚_

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

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

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



          彈窗主按鈕與菲茨定律的糾葛

          ui設計分享達人

          問題是這樣的:有位設計師和我探討彈窗主按鈕在左側還是右側的問題,他說,他覺得應該在右側,原因是因為菲茨定律(Fitts’ Law):“彈窗主按鈕在右側,次按鈕在左側,是由于菲茨定律,這是因為邊角的按鈕更容易被點擊。”


          主按鈕在右側,這個我是能理解的,但在右側的原因是由于菲茲定律決定的,我是持需考證態度的,畢竟雖然這個說法確實聽到過,但我認為還有待進一步梳理,這里需要細究的要點包括:


          第一、彈窗主按鈕一定要在右側嗎?


          第二、如果彈窗主按鈕“更適合”在右側,是不是只有菲茨定律的原因,還有其他原因嗎?


          第三、菲茨定律到底在解決什么問題,它是否除了上述問題,還解決了其他問題?


          帶著這三個問題,本文打算從如下幾個方面展開:
          第一部分:彈窗主按鈕位置 
          1、PC端彈窗主按鈕位置情況 
          2、彈窗主按鈕位置在哪里更合適 
          第二部分:費茨定律 
          1、什么是菲茨定律 
          2、菲茨定律的啟示 
          第三部分:總結 

          第一部分:彈窗主按鈕位置
          1、PC端彈窗主按鈕位置情況
          為了聚焦用戶的視覺與心理,激起用戶的反饋,彈窗誕生了。由于彈窗可以承載的內容豐富,且交互具備擴展性,彈窗被廣泛應用于應用、網頁等產品中。在彈窗設計中,標題、關閉的位置基本設計者們基本不會產生爭議,而主次按鈕的位置是一個永恒的話題。 

          1.1、按鈕組位置
          對于彈窗來說,按鈕組的位置位于footer區,此點無可爭議。但按鈕組應該在footer區的左側、中間,還是右側呢?從大量產品設計中我們可以發現,位于左邊的比例幾乎為0,中間大約5%,而位于右側的比例達到95%。 

          1.2、主次按鈕順序
          既然彈窗按鈕組在95%的情況下都為右側,那么我們就來看下,在該種情況下,win和mac系統主次按鈕的順序是怎樣的,站在巨人肩膀上,總是能看的更遠。 

          主按鈕是指行動按鈕,行動按鈕是連接用戶與產品的接觸點,一個優秀的行動按鈕,可以提升用戶體驗,且幫助用戶高效完成任務。主按鈕顏色在視覺上通常被醒目突出,而次按鈕被弱化表現,這可以降低用戶出錯的風險,及提高用戶完成操作的概率。 

          在win系統中:
          主按鈕在左側,次按鈕在右側。 

          在mac系統中:
          主按鈕在右側,次按鈕在左側。 

          這里插一句題外話,mac的窗口關閉,最小化、最大化按鈕在左上角,而win在右上角,它倆總是做啥都反一反。 

          那為什么win和mac會做出不同的選擇呢?背后又有哪些設計理念在支撐?翻閱了網上各種說法后,我總結出如下說辭: 

          1、mac傾向于把當前場景下推薦用戶點擊的按鈕放在右側,例如,mac推薦取消,就會把取消放右側;推薦儲存,就會把儲存放右側。且右側按鈕為主按鈕,視覺上突出強化。 

          2、win傾向于把最安全的按鈕(比如取消,關閉)放在右側。因此,可以說它的主按鈕在左側,只是主按鈕沒有明確的視覺樣式,保持和次按鈕一致。 
          2、彈窗主按鈕位置在哪里更合適
          關于主次按鈕在左側還是右側更合適,兩大巨頭給出來的設計方案是不同的,網上也有很多同學做了該方面的實驗,結果大致是說:不論主按鈕在左側還是右側,只要系統中統一皆可。就像中國人吃飯用筷子,西方人用刀叉,與其糾結筷子和刀叉哪個更適合吃飯,還不如考慮用戶的習慣、使用場景等因素,制定出更合適自身產品的解決方案。 

          不過話說回來,目前支持彈窗主按鈕在右側的人數占多數(產品專家、設計專家、用戶皆包括),原因不外乎:
          1、右手操作原則; 
          2、用戶在彈窗中的閱讀模式為“Z”字模式; 
          3、BLABLA(接下來我們看看是不是菲茨定律也要參與進來)。 

          第二部分:費茨定律
          什么是菲茨定律
          1954年保羅.菲茨首先提出菲茨定律,費茨定律是用來預測從任意一點到目標中心位置所需時間的數學模型,其后來在人機交互領域也得到了廣泛的應用。它的計算公式為: 
          T代表完成移動所需的平均時間; 
          a代表光標開始/停止的時間; 
          b代表光標移動的速度; 
          D代表從起點到目標中心的距離; 
          W代表目標的寬度(按移動方向為水平方向計算)。 

          首先,完成移動所需的平均時間由兩個參數來決定,即起點到目標中心的距離D和目標的大小W。其次,起始點與目標距離遠,耗時越長;目標越大,耗時越短。 

          這里還涉及用戶在使用產品時到達到目標的心理訴求:
          1、用戶對鼠標指針達到目標并沒有時間要求,則用戶會緩慢移動鼠標指針,在此過程中逐步調整鼠標指針移動的位置,從而最終達到目標。 

          2、用戶對鼠標指針達到目標有明確時間要求(例如股票下單場景),此時用戶會快速將鼠標指針移動到目標附近,然后在做精細化的調整,從而精確操作目標。 

          由上我們可以發現,不論用戶是否對鼠標指針達到目標有時間要求, 菲茨定律中的兩個關鍵點為:鼠標指針移動到目標大致區域及精細化微調后精確定位目標中心。且在實際產品設計中,我們必須要考慮如何讓用戶的鼠標指針以最短的時間到達目標。 

          因此,我們可以將菲茨定律中,從起點到目標所需的時間細化為以下四種情況:
          1、距離遠-目標大
          除了鼠標指針需要跨越較大的屏幕范圍,相對來說還是比較容易到達目標的,因為目標大。 
          2、距離遠-目標小
          用戶需要在鼠標達到目標可觸位置前做一些鼠標位移的精細化調整。 
          3、距離近-目標大
          用戶無需做太精細的調整就可以輕易到達目標。 
          4、距離近-目標小
          在快速到達目標后,鼠標需要做一些精細化的調整。 

          以上的距離遠近實際上還可以進行細化區分,一個是鼠標指針處于頁面任意位置,與目標并無上下文關系;一個是鼠標指針處于下一步操作的上一步位置。 

          這里可能會影響到的情況是,當鼠標指針處于頁面任意位置時,目標元素的大小需要做通用化考慮(使用業界標準或用戶的常規認知)。而當可以非常明確鼠標指針與目標的上下關聯時,可以適當調整設計策略,例如鼠標hover一個按鈕,出現面板,我們可以發現 ,鼠標指針一定是在按鈕上了,才可以去進行下一步操作,這個場景下,鼠標指針的起始位置永遠是不變的,變的是目標,即選擇了面板中的哪個操作。 

          菲茨定律的啟示
          從上述可知,在產品設計中,我們需要 優先考慮使用“距離近-目標大”的設計方案,再考慮“距離遠-目標大”和“距離近-目標小”(但也不能太小,還是要稍微合理化一些),不要去考慮“距離遠-目標小”的方法。下面梳理了一些在產品中用到菲茨定律的例子,讓大家加深對菲茨定律的感知。 

          1、點擊區域合理加大,降低操作復雜度。例如表格排序功能,需要擴大點擊區域。 
          2、可點擊屬性視覺化。例如tabs的下面會帶一條選中的寬度線,由此可推理出鼠標hover到其他tabs上的區域也是如此。 
          3、相關內容與操作靠近。例如word中鼠標選中文字,右鍵可帶出相關的操作。 
          4、相關按鈕互相靠近擺放。例如word文檔需要被保存,通常保存和取消靠近,便于用戶快速做出選擇和操作。 
          5、給目標操作安排流程,而不是點狀設計功能。例如對單條數據啟動編輯后,在原位進行保存。 
          6、不希望用戶操作的時候,目標設計遠一點。例如word文檔需要被保存時,mac系統會將“不儲存”按鈕距離“儲存”按鈕遠一些。 
          7、控制風險。在移動端中,如果不想用戶誤觸,會將危險系數較高的按鈕放在距離拇指熱區遠的位置。還有例如睡眠、關機、重啟等按鈕也不適合放一起(實際上真的放一起了,我無數次誤關機)。 

          第三部分:總結
          說到這里,想必大家對菲茨定律已經有了基本認知吧。在菲茨定律中,有一條為:頁面四周的按鈕更容易被點擊(無限可選中),因為鼠標達到屏幕的邊角后,就不可能在超過了,所以mac和win都會將按鈕放在屏幕邊緣。這個就是那位設計師小伙伴說的,“彈窗主按鈕在右側,次按鈕在左側,是由于菲茨定律,這是因為邊角的按鈕更容易被點擊?!?nbsp;

          實際上我們會發現,假如彈窗的主按鈕在右側,鼠標也并不是達到屏幕的邊角,鼠標只是達到了彈窗的邊緣(這里會存在一定的心理邊緣感知,可能那位設計師就是說的這個吧)。然而,這與菲茨定律中的邊角無限可選中概念不是一回事。 

          所以說,目前彈窗主按鈕大家更贊同在右側的設計理念是:
          1、右手操作原則:右手用鼠標,用戶會習慣性把光標放在屏幕右邊。 
          2、用戶在彈窗中的閱讀模式為“Z”字模式:先瀏覽標題,最后視覺落腳點在footer右側。手眼協調,手會執行視覺落腳點的操作。 
          3、mac已經培養了大多數人的用戶習慣,這點從很多產品設計中就可以看出,放棄用戶習慣就是挑戰用戶體驗,所以,我們為何不去擁抱呢。

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

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


          文章來源:站酷    作者:小果1

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

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

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


          被刷屏的微軟全新3D表情,微軟官方分享背后的設計思路

          seo達人



          圖片

          移動設備激增,零工經濟迅速發展,遠程工作開始興起。在疫情的影響下,幾乎每個人都成了遠程工作者。

          表情符號與我們一道穩步發展,成為鮮活和豐富情感的必要交流工具。肢體語言,微妙幽默,或者環境條件——雖然我們可以親眼看到并回應這些暗示,但在網絡環境中失去它們會極大地影響我們的交流。然而,用表情符號,幾個像素就能以有趣、清晰、能引起情感共鳴的方式表達我們的想法和感受。(彩云注:這就是這項艱巨工作的商業價值)

          隨著世界走向混合工作場景,面對面和遠程結合,線上交流的表達形式比以往任何時候都更加重要。微軟365里有超過1800個表情符號,我們在過去的一年里一直在努力通過創建一個自然的Fluent(流暢)系統 (彩云注:這是他們更新整套表情系統的理念)來更新它們。

          我們選擇了3D設計而不是2D設計,并選擇了讓大多數表情動畫化。在接下來的幾個月里,你會看到這些產品的推出,我們想和大家分享一下,以紀念世界表情符號日。我們也很激動地推出了五個全新的表情符號,這代表著我們對工作、表達和空間的新視角。

           

          擁抱游戲的力量

          在疫情改變工作和生活之間的界限之前,交流就已經朝著真實情感和娛樂的方向發展。為了確保我們的新設計反映這一點,設計研究員Meghan Stockdale與我們密切合作,重新思考專業的圖形表達。通過主次研究,她專注于游戲概念,將其作為一種催化劑,幫助我們挖掘最好的作品和最誠實的自我。她引用了斯圖爾特·布朗(Stuart Brown)的精彩著作Play: How it Shapes the Brain, open the Imagination, and inspiring the Soul (游戲:如何塑造大腦,開拓想象力,激發靈魂),對她的有著特別地影響。

          “游戲對于創造性頭腦風暴、發展和掌握新技能以及團隊建設等活動至關重要,”Meghan說,“但我們通常不愿意在工作或工作工具中給予游戲空間。由于我們工作和成年的關系,玩有時會讓一些人感到不舒服——盡管我們生來就是為玩而生的?!?

          因為對每個人來說,好玩或富有表現力不是件容易的事,表情符號是完美的小幫手。它們絕不是無聊或裝飾性的,而是我們人性的延伸,是重要的溝通工具。根據Meghan的研究,它們可以軟化或強化我們的語氣,為平淡無奇的互動增添樂趣,幫助我們以一種比書面文字更普遍的方式表達自己。

          圖片

          這張圖片展示了我們用不完美的圓來做頭部的形狀。人是不完美的,為什么我們的圖形表示要完美的正圓呢?

          那么,表情符號或其他好玩的媒體適合在工作中交流嗎?游戲鼓勵創新,而表情符號則是有趣的交流者。也許文字和表情符號之間的相互作用加強了兩者的交流力量。也許表情符號的脆弱和輕松不僅可以激發我們自己的創造力,還可以鼓勵我們組織中其他人共同參與。當我們進一步進入混合工作模式世界時尤為重要,在那里我們將首次在網上見到新的團隊成員。

          我們的一些全新表情符號甚至試圖捕捉這個新的混合世界。下面是一些概念草圖,我們希望能得到你的想法。

          圖片

          以上是我們正在創建的新表情符號的概念草圖,以幫助傳達混合工作的現實。從左到右:一心多用,靜音,不拍照,一邊工作一邊照顧孩子,穿著睡衣。

           

          自然有趣,天生流利

          在整個過程中,信任和清晰是我們的指導原則。我們希望人們相信,我們的新表情符號風格會理解到他們的意圖,反映出他們的人性。人是不完美的,我們的創意中有美,這就是為什么我們選擇了一個不完美的圓形作為頭部的輪廓形狀。

          我們還密切關注表情符號中眼睛的表情,并傾向于把眉毛特征做的更加明顯。對我們來說,在保留情感意圖的同時進行設計是至關重要的。最后,因為我們希望人們相信他們并能從設計中找到令人振奮和鼓舞,我們傾向于明亮、高飽和的顏色和大膽的形式! 

          通過全面利用特定的眼睛、嘴巴和頭部形狀,我們創建了一套統一的面部特征,可以縮放,同時保持一致的外觀和感覺。

          為了保持不同類別的1888個表情的一致性,我們在新風格中使用了簡單的幾何形狀作為每個表情的基礎。如果這聽起來很熟悉,那是因為我們連接圖標系統的工作方式是相同的。螃蟹表情確實突出了這一點;我們用圓形和半圓形來代替解剖的表示法,造型更加簡單,從而賦予它更多的個性。

          圖片

          當你注意細節時,平凡也能變得不平凡。圖中的螃蟹表情符號通過大膽、美麗的顏色和厚實的圖形形狀證明了這一點。

          整套表情我都喜歡,但我最喜歡的還是這只螃蟹。這只酷炫的小螃蟹體現了我喜歡我們表情符號系統的地方:它讓看似普通的表情符號都變得與眾不同。無論是螃蟹還是人類,我們的獨創性都蘊含著美。(彩云注:這就是作品中的亮點部分闡述,面試的時候講自己作品的亮點,就可以從類似這樣的角度去講,學到了!)

          最后,但并非最不重要的是,我們必須利用這個機會做出一個改變,只有我們才能真正做到——將經典標準的回形針,改了全新的3D形態。

          當然,我們現在使用的回形針可能比全盛時期要少,但我們無法抗拒懷舊的吸引力。

          圖片

          為了讓自己煥然一新,我們忍不住把扁平的、標準的回形針變成了新造型的回形針。

          表情符號正在鞏固其作為在線交流不可或缺的工具角色,你將能夠在不同平臺和設備上使用這些全新的表情符號。我們的一些新表情從今天開始在Flipgrid中上線,其余的將在未來幾周推出。在這個假日季,團隊和Windows將配備該套件,Yammer、Outlook和更多的產品將在2022年全年實現落地。

          除了表情符號,我們還將在微軟365中通過更具表現力的主題、插圖、背景等,將我們的流暢美學帶入生活。但首先,我們想聽聽你的意見!你最喜歡的表情符號有哪些?如果你能成為一天的表情符號設計師,你會創造出哪些新的表情符號?

           

          本文翻譯已獲得作者的正式授權(授權截圖如下)圖片 

          原文地址:medium

          作者:Microsoft Design

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

          譯者:彩云Sky

          轉載請注明:學UI網》被刷屏的微軟全新3D表情,微軟官方分享背后的設計思路

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

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


          文章來源:csdn

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

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



          沒想到學會這套方法論,定義視覺風格能這么快

          seo達人



          江湖上一直流傳著這樣一套理論,視覺設計語言五維度即“形、色、字、構、質”,說人話就是圖形、色彩、字體、結構、質感。這套理論的來源我尋了很久也沒找到,但是這套理論卻經常出現在各種方法論里面。下面我來逐一分享一下我對這幾個要素的理解。

           

          圖片

           

          1、形 

          形就是指圖形,界面中的圖形就包括圖標、卡片、圖片,因此,icon的風格、卡片圓角的大小、圖片圓角的大小,都會影響界面的風格,所以要進行規范。圖片 

          2、色

          色即是色彩,在界面中色彩不是單一的色調,它是整個色彩規范,什么時候應該用主色,什么時候應該用輔色,主色和輔色的比例,顏色在圖標、文字、裝飾上的應用,這些會影響人的整體感受,吸引視覺注意力,規范的配色搭配會讓界面的視覺更加舒適。

          圖片

           

          3、字

          字即是字體,字體的形式、字號大小、文字的間距都影響著界面的信息傳遞,選擇符合產品特性的字體、合適的字號、舒適的間距都能讓界面看起來更加精致。

          圖片

           

          4、構

          構即是結構,也就是界面的內容布局,排列的方式、分割的方式、留白的多少,都是屬于界面結構的范圍,結構的定義非常重要,決定著界面是否具有呼吸感、通透感、舒適感。

          圖片

           

          5、質

          質就是質感,也就是整體頁面的感覺,通過圓角的大小、留白的多少、排版的疏密、投影的大小來決定整個質感是扁平的還是擬物的、高冷的還是活潑的。

          圖片

          知道了這五個維度之后該如何應用呢?我們可以應用在競品的視覺分析里,項目的視覺改版里,項目初期的定風格階段里,反正就是應用在一切需要整理匯報的地方,提升你設計的專業度和可信度,如果在你的述職報告或者作品集里面搞一下,檔次一下子就上去了。

          最近因為季度匯報,我發現有些領導可太愛聽這一套大道理了,加了這些方法論之后,他就會覺得這個人有思考、能力強、有自己的方法論,不過是好是壞那就各自評說吧。

           

          原文地址:LEO設研所(公眾號)

          作者:設研_倉倉君

          轉載請注明:學UI網》沒想到學會這套方法論,定義視覺風格能這么快

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

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


          文章來源:csdn

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

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

          用案例和方法,帶你剖析「情感化設計」

          seo達人



          最近在產品體驗中,發現了不少有意思的情感化設計案例,有些讓人眼前一亮,有些很好的滿足了用戶情感需求,所以今天就匯總一下分享給大家。
          文章主要內容包括:
          1、如何理解情感化設計
          2、結合案例分析情感化設計
          3、3個情感化設計方向
                        

          一、情感化設計

          什么是產品的“情感化設計”呢?先說2個小故事。
                     
          故事1
          我兒子今年5歲了,周末帶他去游樂園,他拿著我的手機看導航。突然說了一句“你的導航真厲害啊,還顯示天氣呢~”。這些成年人眼中習以為常的內容,卻成了孩子驚喜的認知。
                      
          故事2
          某天傍晚,南京地區的微信朋友圈忽然掀起了夕陽美景“攝影大賽”,成為了迅速傳播的話題,大家都在曬照片,驚嘆轉瞬即逝的美景。這里面可能有很多因素,諸如參與感、分享的欲望、跟風等,但是美景才是打動用戶的真正原因。
          圖片
          通過這2個小故事,我們可以總結下情感化設計的要點:
          • 對不同用戶,情感化設計的感知是有所差異的,需要設計師擁有不同的價值視角,甚至是對一切事物抱有好奇感的童心。
          • 情感化設計需要帶給用戶美好的感受,也是符合大多數人共同的認知體驗。無論是會心一笑,還是形成深刻記憶,都必須能夠激發出用戶情感。
          • 情感化設計一般只能引起用戶短暫的情感變化,當用戶形成了認知之后,可能就失去了最初的魅力。

           

          二、情感化設計案例分析

          諾曼的《情感化設計》指出,人的3個認知層次:“本能層、行為層、反思層“,構成了用戶認知事物的過程,每個層次都會產生不同的用戶情感。
          圖片
                       
          01/本能層
          視覺信息激發情感
          所謂“愛美之心,人皆有之”,人們對美好事物的追求是一種本能反應。因此可以利用色彩、質感、圖形建立場景氛圍,激發用戶情感。
                                     
          1、品質感渲染氛圍
          最近支付寶818理財節界面設計,利用金色很好的營造了節日氛圍。而品質感極強的金色卡片,增強了用戶的獲得感,更好的激勵用戶參與活動。
          圖片
                                
          2、真實場景再現
          在虛擬的互聯網中,建立符合真實生活場景的認知體系,是體驗設計的一個重要方向。
          在正常比例下,高德地圖采用藍色表示水域,例如河流、湖泊等。當地圖比例放大到一定程度時,水域會有水紋波動的效果。通過場景仿真再現,帶給用戶“近大遠小”的真實體驗。
          圖片
                         
          3、關懷體驗
          相比界面設計傳遞出的偏主觀的感性理解,文字可以帶給用戶直接而明確的情感體驗。
                                     
          1)語言文字中的情感表達
          用戶在被邀請加入微信群時,下方信息會提示群中有哪些好友,從而幫助用戶做出入群判斷。另外提示信息還告知入群后可能產生信息干擾,在一味強調利益點,引導用戶行為的商業化設計中,這樣的提醒給了用戶更多的人文關懷。
          圖片
                           
          因偶感風寒,朋友下單買了感冒靈顆粒,美團外賣小哥在送藥時,說了一句“早日康復”,讓她對美團的服務驚嘆不已,甚至有一絲感動。雖然不確定這是不是美團的標準化服務流程,卻提升了她對美團服務體驗的滿意度。
          圖片
                                   
          2)安全感彰顯用戶關懷
          iOS多任務管理頁中,支付寶、銀行等金融類應用會增加遮罩效果,保護用戶隱私,通過差異化的展現形式,增強了用戶的信任感。
          而用戶在支付寶“付款/收錢“界面截屏時,系統會主動給出安全提示,讓用戶感受到來自支付寶的關懷。
          圖片
                                               
          3)滿足用戶的內心渴望
          粉絲數是公眾號運營的重要指標,特別是新的玩家,漲粉的渴望是不言而喻的。
          前幾天,我突然發現公眾號粉絲從1.0K變成了1.1K。當時內心一陣狂喜,立即查看了具體粉絲數,結果并沒有超過1.1K。原來粉絲數的顯示規則是四舍五入,也就是說當粉絲超過了1050后,都會顯示為1.1K。
          這比我們常見的1.0K+的形式,數據上做了適當的夸大,但是并會對用戶判斷產生大的偏差,反而滿足了用戶的虛榮心。即使看到具體數據時,內心會有小失落,但也不會造成用戶反感。
          圖片
          當然本能層的情感設計,通常只能帶來的用戶情緒上的微小變化,或者短暫的刺激,無法強烈的改變用戶對產品的認知,或者觸發更多的用戶行為。
                               
          02/行為層
          行為過程強化情感
          用戶的參與可以帶來更強的的情感反饋和認知,并且更容易形成持久的用戶記憶,甚至會培養新的用戶行為習慣,從而增強產品粘性。
                                    
          1、動效設計融入情感表達
          TIM 聊天列表頁面,用戶可以拖拽消息數量角標,快速消除未讀提示,同時帶有灰飛煙滅的動效。
          相比較常見的點擊消除,或者向左滑動后標記已讀,這種交互方式既提高了用戶操作效率,又增加了消除提示的暢快感,仿佛幫助用戶甩掉了各種煩惱和壓力。
          圖片
                                
          即刻APP在用戶頭像中增加了拖拽反彈動效,除了視覺上愛心碰撞帶來的爽感,過程中還增加了震動效果,傳遞給用戶力度回饋。碰撞之后頂部出現的嘴角上揚的笑容,又帶給用戶無盡的想象空間。
          圖片
                                          
          2、創新玩法賦予產品情感體驗
          最近微信推出的“拍一拍”功能,創造了新的用戶溝通方式和使用場景,簡單的玩法激活了用戶獵奇心理和表達欲望。所以功能剛上線時,借助社交關系迅速傳播,并衍生出了各種趣味玩法。
          傳統廣告主要是通過視頻播放吸引用戶點擊,用戶更多的是被動接受。而微信朋友圈廣告則是播放廣告片段,激起用戶的好奇心,并結合手勢玩法提升了趣味性,吸引用戶主動參與其中,從而形成更強的用戶認知和記憶。
          圖片
                                           
          03/反思層
          價值影響情感認知
          前幾天很多朋友發現螞蟻莊園養的小雞不見了,只留下了一封雞毛信。
          圖片
          當用戶都在猜測支付寶是不是要出現新玩法的時候,支付寶公眾號給出了答案。

          “我雞呢???我一把屎一把尿的把它養大,怎么就剩根雞毛了?” 
          “嘿嘿,上支付寶搜「找小雞」,你就知道了。” 
          “都是同事你裝雞毛??!直接說。”  
          “三年來有4.5億網友在螞蟻莊園捐出240億顆“愛心蛋”,90%以上的公益項目都與孩子相關,小雞去看看這些孩子們?!?nbsp;
          “中午回來吃飯嗎?“ 
          “12點前就都回來了,能趕上吃飯?!?nbsp;
          “行叭,我剛給它換的衣服,別玩臟了?!薄?/section>
                                              ——來自支付寶公眾號

           

          支付寶的創新玩法,引發了用戶的猜想,增強了活動的話題性,精彩的文案對白,既宣傳了支付寶的公益行為,又收獲了用戶對品牌認知 。

           

          三、情感化設計的方法

          情感化設計在用戶體驗圈早已不再是新鮮話題了,但是如何做出符合用戶情感需求的設計呢?我覺得可以從3個方面入手。

           

          1、天時——關鍵時刻激勵
          抓住用戶關鍵的時間節點,通過設計手法增強用戶的情感效應。例如微信設定了生日、春節等關鍵詞觸發飄落動效,讓蒼白的文字信息更加富有場景化情感;
          根據用戶生命周期,電商平臺會推出相應的禮包,促進用戶轉化的同時,讓用戶產生被關注的情感體驗。
          圖片

           

          2、地利——用戶場景引導
          根據用戶行為流程,在關鍵的行為節點中增加情感化設計。
          花小豬在成功約車后,滿屏飄落的花瓣動效,烘托了場景氣氛,有利于緩解用戶等待焦慮。
          特殊天氣狀況下,高德地圖會顯示天氣情況,為用戶出行提供參考。
          圖片

           

          3、人和——挖掘用戶內心訴求
          利用用戶自身的情感訴求,滿足用戶內心的渴望。
          拼多多“多多夢工廠”游戲中,用戶在加油之后,快遞車會有明顯的加速效果,很好的滿足了用戶急切收到商品的情感訴求,也更好的激勵了用戶持續加油。
          圖片

           

          寫在最后

          情感化設計更多的是帶給用戶瞬間感動,很難形成長期的用戶激勵。因此情感化設計主要目的是通過情感累加,提升產品品牌形象。
          不過情感化設計在落地時,會面臨一些困難。
          • 一方面互聯網已經發展了這么多年,大家對一些小的趣味細節,很容易視而不見,或者只能會產生一點點情感波動就結束了。
          • 另一方面商業化的設計,更加注重投入產出比和眼前收益,當情感化設計無法確定可以帶來直接的經濟效益時,很容易被pass掉或者無限延期。
          所以設計師也需要不斷的去總結和反思,如何堅守心中的那點兒設計情懷~
          今天先說到這兒吧,下期再見~
                             
          原文地址:子牧UXD(公眾號)
          作者:子牧先生
           轉載請注明:學UI網》用案例和方法,帶你剖析「情感化設計」

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

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


          文章來源:站酷   作者:陳皮Celia 

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

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

          干貨|如何通過設計傳遞「信任感」?

          seo達人



          眾所周知,一個可以讓用戶充分信任的產品,才能可能與用戶建立起良好的關系,在用戶信息獲取、產品目標實現上成為可能。對金融類、社交類產品而言,安全可信的需求更是用戶最核心的訴求。

           

          信任感維度梳理

          客觀技術 + 主觀體驗

          信任感包括兩個維度:客觀信任感和主觀信任感。

          客觀信任感通常體現在技術層面,依賴于交互設備和網絡環境等;

          主觀信任感則體現在交互體驗層面,通過交互流程和視覺效果對用戶進行引導。

           

          1 、客觀|技術系統

          通過技術安全和策略,傳遞給用戶穩定的產品功能和策略,主要體現在以下兩點:

          圖片

          (1)穩定性

          • 不易出系統問題和 bug
          • 在各種應用設備上可以保證順利切換
          • 在各種應用環境中可以保證流暢使用

           

          (2)安全性

          • 身份驗證
          • 隱私保護
          • 賬戶、密碼安全
          • 功能使用過程安全
          • 其他

           

          2、主觀|交互體驗

          通過產品的設計和交互流程,傳達給用戶可靠的產品感受和體驗,主要體現在以下四點:

          圖片

          (1)可掌控

          • 給用戶更多的操控權限:餓了么的推薦卡片設計,右上角的“…”,點擊后會顯示“不喜歡”,以此讓用戶感覺自己有更多的選擇和操控權。

          圖片

           

          • 任務定制化,匹配用戶能力:大眾點評對于不同等級的用戶安排的賺取積分的任務也不同,給初級用戶降低難度,好上手;給中、高級用戶提升挑戰,有效促活。

          圖片

           

          (2)可理解

          • 給用戶盡可能提供全面、完整的信息:鏈家 App 在看房的時候,不僅有 VR 全景功能,還增加了“設計效果”方案。當用戶點開“設計效果”后會看到分屏對比的效果,給用戶對于房子空間的全面體驗。

          圖片

           

          • 信息條理清晰,有章可循:支付寶相互寶的 “大病醫療” 需要閱讀的信息很多,產品設計了目錄作為引導,并將重要信息采用不同的背景顏色標記出來。

          圖片

           

          (3)可依賴

          • 幫助用戶輕松完成任務:產品了解用戶的操作行為,縮短用戶路徑,例如京東等 App 在收貨地址的填寫時可以粘貼整段文字(地址,收件人,電話),然后“智能識別”到對應的文字選項中,優化了用戶填寫資料的體驗,讓用戶完成任務毫不費力。

          圖片

           

          • 給出有利于用戶決策的提示:下雨天美團外賣針對用戶所在區域,提前推送天氣變化,提醒用戶提前下單。

          圖片

           

          • 給出的信息詳實,以用戶利益為出發點:使用支付寶理財在買基金時,產品會評估基金的風險和用戶的承受能力是否匹配,并給予相應的提示。

          圖片

           

          (4)可挽回

          • 非正常信息、錯誤內容及時同步:高德打車企業版如果發現用戶的行程訂單金額與預估金額差距較大時,會給用戶發短信提示,并給出客服和投訴渠道,尤其是對于對線路不熟的用戶。

          圖片

           

          • 從根源防止用戶出錯:天貓購買產品添加購物車時,沒有貨的標簽會變成禁用狀態,避免用戶下單。

          圖片

          技術安全是可信性的保障,但并不是有了技術安全就足夠了,還需要通過交互層面引導和優化使用戶產生對產品的信任感。

           

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

          作者:元堯

          轉載請注明:學UI網》干貨|如何通過設計傳遞「信任感」?

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

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


          文章來源:站酷   作者:陳皮Celia 

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

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


          明星百科LOFT創新設計

          seo達人



          在日常產品設計中要考慮產品體驗、豐富內容形式,用戶的互動性,打造互動空間,增強用戶粘度和特色內容建設同時通過設計創新為產品帶來更多的收益空間。

          前言

          《明星百科》是百度百科的重點垂類,用戶的瀏覽量一直很高,也受到眾多粉絲用戶的關注。隨著5G時代的到來,競品富媒體形態的發展,使產品體驗突顯單一,不能滿足用戶多元化的消費需求。為提升產品體驗、豐富內容形式,增加與用戶的互動性,產品層決定升級明星垂類定位,從 UGC 維護內容升級為“粉絲共建的明星百科”,打造粉絲用戶與明星的互動空間,增強用戶粘度和特色內容建設,提升內容富媒體化的轉變,同時通過設計創新為產品帶來更多的收益空間。

           

          /// 從“產品目標”中拓展設計思路

          與產品側進行項目溝通,了解產品目標是激勵粉絲用戶貢獻內容,在百科詞條形成“明星安利”特色版塊,豐富百科內容維度的同時提升與競品的差異化。我們分析產品目標,逐步確定設計目標和方向:

          圖片

           

          /// 提取設計關鍵詞

          圍繞設計方向進行創新思考,從產品“體驗、內容、互動”三個維度確定設計核心“沉浸、專屬、有趣”,為用戶群打造專屬的互動空間,增加用戶黏度的同時促進內容轉化。

          圖片

          /// 制定設計策略

          考慮產品和粉絲用戶訴求,重構框架、界面、內容展現等層面,增加明星效應,帶動粉絲用戶消費,提升差異化體驗。

          圖片

          /// 打造復式結構,提供專屬空間

          百度百科以權威、豐富的知識內容,滿足用戶瀏覽和編輯分享,但從內容承載到用戶日益多元化的消費趨勢,原有基礎框架已不能很好支撐產品發展和提升競爭力。對標競品,挖掘粉絲用戶的消費訴求,我們以創新的復式結構擴展信息層,在不影響詞條信息瀏覽的前提下,為多元化的信息內容提供展現空間。

          圖片

          /// 增加差異化感知,滿足情感訴求

          圖片

          為強化loft層在首屏的展現,增加差異化和氛圍感,兩個信息層在首屏的展現比重設計為8:2,提升loft層瀏覽空間和操作引導。

           

          /// 復式結構瀏覽交互方式

          圖片

           

          /// 針對粉絲用戶核心訴求,打造互動空間

           

          圖片
          了解粉絲用戶消費特點和訴求, 通過展現多元化富媒體內容,增加專屬感和互動氛圍,提升用戶黏度;
          圖片
          針對多元化內容形式的展現,設計和規范內容模版,規范單圖、多圖或橫、豎版視頻等內容狀態;
          圖片

          /// 增加專屬感和互動氛圍

          促進用戶情感化消費,設計話題、發布、評論、點贊等功能模塊,調動用戶參與和內容建設,促進站內導流;
          圖片

           

           

          /// 搭建發布能力,實現內容共建

          搭建發布能力是實現內容共建的重要環節:搭建發布流程,滿足用戶上傳圖片、短視頻等需求,及時分享明星動態、資訊或最新作品,實現“粉絲共建”的目標;
          圖片
          在發布功能為用戶提供添加內容標簽,表達態度和觀點,增加專屬氛圍;發布的內容可與相關詞條進行關聯,增加內容互聯和導流;功能體驗簡潔、易用,實現內容生產和共建的體驗閉環。
          圖片

           

          /// 規范設計模版 形成體驗的一致化

          在確立明星百科loft設計形態后,為保持在其他垂類建設中設計與體驗的一致化,對loft層的內容模塊和控件進行設計梳理規范,提升模版的通用和復用性,并針對不同方向垂類的特色內容,擴展模版,不斷滿足產品和用戶的消費訴求。
          圖片
          設計制定單圖、多圖,橫、豎版視頻模塊的排版組合規則,交互規則,細化功能控件;針對垂類特色(如人物類/商業類),設計擴展模版形式;并在垂類產品建設,節約設計成本,實現快速搭建。
          圖片

           

          /// 復式結構為多元化體驗帶來更多可能

          明星百科LOFT的創新設計,通過對產品目標的分析和設計目標的逐步確定,從設計視角進行探索和創新推動,不僅突破產品固有框架,滿足產品與用戶的訴求,提升產品差異化體驗,還在垂類產品橫向建設中打開了無限可能,實現設計賦能。
          圖片

           

          原文地址:百度MEUX(公眾號)
          作者:愛分享的
          轉載請注明:學UI網》明星百科LOFT創新設計

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

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


          文章來源:站酷   作者:陳皮Celia 

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

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

          出色的圖標是如何一步步設計出來的?來學學這些實操方法!

          seo達人



          圖標是設計中不可或缺的一部分,是引導各種操作的視覺提示,可以賦予產品獨特的身份。文章通過設計實操來幫助大家發現圖標設計的更多可能性。

           

          01 谷歌Material Design原則

          使用簡單的幾何形狀和大膽的顏色

          圖片

          扁平化的設計趨勢啟發了Material Design,它也是基于基本的扁平形狀,仔細選擇最能代表圖標所描繪的元素的形狀。

           

          用細微的陰影增加深度

          圖片

          陰影是為設計賦予深度感的好方法,可以展示光線投射到物體上的效果。另外需要注意的是,模擬的自然光通常來自左上角。

           

          使用顏色替換陰影

          圖片

          ▲ 每種顏色通過多種色調的變化來模擬視覺深度。在上一版的Gmail圖標中,可以看到M的形狀使用了不同深淺的紅色,而信封下面使用了多種灰色陰影。

           

          02 分步進行圖標設計實操

          了解了基本原則,接下來就到了實操環節,通過下面這些圖標的實操演示一步步掌握這種簡潔易用的設計風格。

           

          閃電圖標

          圖片

          ▲ 通過在兩個形狀的相交處創建陰影,實現頂層形狀懸浮的效果;使用三種黃色陰影–頂層較淺、底層較深和最深的陰影。

           

          聊天圖標

          圖片

          ▲ 復制頂層聊天氣泡,并將副本向右下移動來作為顏色最深的陰影。

           

          標記圖標

          圖片

          ▲ 復制圖標,并刪除右上角多余的點;復制左側形狀,并移動到右側形狀的頂部;兩個形狀相交以創建陰影效果。

           

          旗幟圖標

          圖片

          ▲ 將圖形導角,提取標志底部的錨點繪制兩條相交的線來創建折疊效果。

           

          心形圖標

          圖片

          ▲ 復制心形圖標,隔離形狀的左半部分;從右上角向下畫一條對角線;將生成的形狀與心形重疊,然后向右移動以減去陰影形狀。

           

          山峰圖標

          圖片

          ▲ 創建兩個不同大小的三角形;將較小的圖形向右移動,并將得到的重疊部分作為陰影形狀;最亮的顏色保持在左側;最后運用圓角來調整圖形。

           

          人物圖標

          圖片

          ▲ 選擇并復制左側人物形狀的下半部分;將副本與右邊的形狀對齊;擇三個重疊的形狀,使用路徑查找器做出陰影形狀。

           

          浮動圖標

          圖片

          ▲ 把下方的形狀向上移動至中點;復制上面的菱形,并將副本向下移動10-20像素;選擇下面的兩個形狀,使用路徑查找器保留陰影形狀。

           

          信封圖標

          圖片

          ▲ 使用“直接選擇工具(A)”,選擇信封形狀的第二高的點;使用“鋼筆工具”在線段右側添加一個點;抬起上面的兩個點并向左右移動(如圖所示),將負空間看著像抽出來的信紙效果。

           

          蛋糕圖標

          圖片

          ▲ 隔離蛋糕底部的形狀并復制;縮小寬度并向內移動;將生成的形狀移動到原始圖標的頂部,并延伸較高的點以與上方的形狀重疊。

           

          03 最后:嘗試改變圖標的感覺

          跟著過程一步步來設計,你也能做出效果很棒的圖標。最后幫大家整理了圖標實操詳細GIF教程,關注公眾號,后臺回復: 實操 即可獲??!

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》出色的圖標是如何一步步設計出來的?來學學這些實操方法!

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

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


          文章來源:站酷   作者:陳皮Celia 

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

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


          通知消息系統設計指南

          ui設計分享達人

          前言

          消息和通知作為系統和用戶之間交流的窗口,在用法上、表達上存在一定的規律,本文解答網頁端界面消息系統設計的如下問題:

          · 常見的消息通知設計

          · 如何進行消息通知設計

          · 觸發通知的業務場景


          常見的消息通知組件和模板

          在 Ant design 的設計系統里,消息和反饋組件并為「反饋」欄,涉及消息的組件有如下的內容:

          警告提示(Alert )、 全局提示(Message)、對話框(Modal)、通知提醒框(Modal)、氣泡確認框(Popcomfirm)、結果(Result)。

          結合 TechUI 提供的業務模板,總結了以下常見的消息通知組件和模板:

          以上的消息通知設計在設計的時遵循什么樣的規律,以下用一張圖來說明。 

          消息通知設計指南圖

          根據消息反饋的強弱分為:高注意力、中注意力、低注意力;每個維度再從操作干預度 & 信息展示量作以下分類。

          此圖試圖解答不同的通知設計組件/模板的使用場景,分為高注意力、中注意力和低注意力的場景,以及每個場景下不同組件信息量的大小和操作的干預度大小。 

          通知的使用場景和強弱排序

          高注意力的使用場景

          【警報】需立即關注

          【錯誤】需立即采取措施

          【異常】系統等異常情況

          【確認】需要用戶確認才能進行


          在需要高注意力的場景下用戶必須對消息錯處反映才能繼續當前操作,操作干預度強。

          使用頁面級獨占式布局的結果(Result)通知,告知用戶操作結論以及引導后續的操作;使用對話框和氣泡確認框讓用戶了解當前的系統情況,詢問和引導后續操作;表單校驗提示和全局提示告知用戶當前的異常場景,幫助用戶改正以繼續當前操作。


          使用示例:


          中注意力的使用場景

          【警告】無需立即采取措施

          【訊息】用戶操作的反饋及系統通知


          在中注意力的場景下,當消息出現時,用戶可以選擇性地繼續當前操作,也可以處理當前的消息,操作干預度中。

          使用通知提示框,可以在頁面中的邊緣位置彈出消息提示,后臺可以設置停留時長(當作為永久停留時并需要用戶操作確認,功能等同于對話框);頁面的警告提示常用于在頁面的全局進行通知的展示,用戶可手動關閉。


          使用示例:


          低注意力的使用場景

          【信息性消息】無需立即采取措施

          【徽章】自上次互動后的新消息


          在低注意力的場景下,消息出現后采用弱提示,對用戶的當前操作幾乎不產生干擾。

          此時,全局提示常用于成功狀態下的提示或跳轉狀態,幾秒后自動消失;徽章用于更新消息的狀態。


          使用示例:


          觸發通知的業務場景

          通知的觸發場景存在于用戶之間以及系統和用戶之間。消息組件的設計選擇需要根據具體的業務場景來定,以下是通用的推薦情境。

          例如,在以請求審批作為核心功能的應用系統,成功和失敗的通知可以采用「中注意力」的通知提示框和警告提示;若請求審批是附屬的功能,如,請求某人加入某項目成為訪客,則可以采用低注意力的通知方式,降低操作干擾度。又如,釘釘的會議通知,采用了較強操作干預度的對話框請求確認,釘釘的即時消息通知用戶可以自定義設置是否在桌面展示消息,當不設置為桌面展示時,采用的是紅點徽章的表達方式。 


          通知設計原則

          提供明確指引

          · 在用戶解決問題之前,錯誤消息不應消失

          · 避免僅通過將字段變為紅色來指示錯誤,色盲用戶難以辨認

          · 消息文本內容過多不建議采用懸浮通知中心


          簡單高效

          · 需要明確限制通知的標題和文案的字段數量

          · 避免無故打擾用戶的通知設計

          · 非持久性通知的持續時間不可過短,至少需要讓用戶閱讀完文本內容,適當情況下提供關閉功能

          · 通知文案簡明易懂,無歧義

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

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



          文章來源:站酷    作者:Ant_Design

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

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

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



          設計師如何消除認知偏差?

          資深UI設計者

          本文從什么是認知偏差、認知偏差與UX設計的關系兩方面,總結了13個實用的方法,幫你學會用設計消除偏差。

          設計師如何消除認知偏差?我總結了這13個方法!

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

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



          文章來源:優設 作者:vv醬?-? 

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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