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

          首頁

          這些手勢交互你關注到了嗎?

          lanlanwork


          01. 評論區雙指上滑送出“抱抱”

          在聽一首喜歡的音樂時,參與評論可以表達自己對音樂帶來的共鳴感,也可以看其它聽友的評論尋找知音。在網易云音樂的評論區隱藏著一個手勢交互,對某一條評論雙指上滑就會針對其給出擁抱,兩個小人微笑擁抱的動畫顯示在該條評論右下角,進而用戶頭像下方會顯示“收到了抱抱”的標簽提示。

          在不新增功能入口的同時,借助雙指手勢交互來滿足需求,既能不破壞原生的結構,又能帶給用戶不一樣的操作體驗。這個隱藏的彩蛋你是否注意到?以后在體驗產品的時候除了發現視覺表層的可見內容以外,也要加強手勢交互的操作來發現更多隱藏的功能。

          圖片

           

          02. 長按激活單擊退出

          iOS 的設計在手勢交互的探索上比較多,全屏的模式將手勢發揮到了極致,也帶給我們對于手勢交互的更多理解。在蘋果手機桌面,我們可以通過長按激活應用管理,單擊則會退出管理模式,操作非常便利。

          無需在當前的設計上面新增更多繁瑣的控件,手勢的借助可以使得我們的設計更加極簡,減少過多的內容對用戶的干擾。

          圖片

           

          03. 長按與時間跨度的結合

          長按激活功能比較常見,但是結合時間長短的變化相對較少。蘋果手機桌面的應用管理,在長按應用圖標時會彈窗展示功能列表,繼續維持長按則會進入應用管理,隨著長按的時間跨度不一樣激活不同功能需求。

          在手勢交互設計過程中,除了通過動作的不同激活功能操作之外,也可以結合時間跨度、力度、位置等進行組合交互,來滿足多重功能操作的需求。

          圖片

           

          04. 可以移動的紅包

          通過紅包吸引用戶進而轉化是很多電商產品的玩法,在必要 APP 中紅包通過倒計時的形式營造出緊迫感,促使用戶立即使用,進而提高紅包的使用率。紅包懸浮在左側會擋住分類的展示,為了解決這個問題紅包借助滑動手勢可以移動,用戶可以在左側導航欄到底部標簽欄之間任意滑動,方便預覽分類。

          單指滑動是常用的手勢交互,精準定位元素之后可以拖動使其改變位置,不僅方便內容的展示也不會造成底層內容的閱讀干擾。

          圖片

           

          05. 同一個功能不同的手勢交互

          我們在觀看視頻的時候,短視頻是單擊控制播放/暫停,而視頻播放軟件則是通過雙擊控制。由于長視頻用戶需要觀看很久,容易觸屏造成誤操作,雙擊是為了形成二次確認,降低誤操作的概率。

          短視頻播放由于內容比較簡短,可以通過單擊控制播放/暫停,雙擊則是更多功能的輔助,同一個功能在不同的場景需要配合不同的手勢。我們在進行產品設計的時候,可以根據業務類型和用戶場景的差異借助手勢來滿足更多功能的操作,用戶習慣培養之后將會提高其操作體驗度。

          圖片

           

          06. 通過左滑程度控制刪除

          左滑動是產品設計中非常普遍的手勢交互,通過左滑展開列表隱藏功能,比如編輯、置頂、刪除等。

          在脈脈 APP 的消息模塊,消息列表左滑可以進行置頂和刪除,如果繼續往左側滑動則會實現自動刪除,以此來替代點擊刪除圖標完成刪除操作的步驟。通過左滑配合點擊刪除操作路徑多一步,而左滑程度控制刪除效率更高,針對一些消息較多的產品,可以方便用戶快速清理未讀消息。

          圖片

           

          07. 雙擊頭像“拍一拍”

          在微信群聊或者與好友聊天的時候,為了重點提示好友,可以通過雙擊好友頭像進行“拍一拍”,晃動的頭像和震動的提示加強好友對信息的關注度。

          結合雙擊的手勢交互,在不改變當前布局的情況下加強社交屬性,增強好友間的互動提示,通過手勢豐富了社交體驗。

          圖片

           

          08. 單擊進入全屏模式

          雖然手機逐步進入大屏時代,但是用戶還是希望獲得更少的干擾,全屏模式的操作可以讓干擾降到最低。

          百度地圖在操作后會有彈窗式的內容呈現,用戶可以通過單擊屏幕退出彈窗,再次單擊則會進一步隱藏基礎控件,進入全屏模式。通過單擊的手勢交互來簡化內容結構,降低干擾帶給用戶更集中的操作體驗。

          圖片

           

          09. 長按快速預覽精彩片段

          通過愛奇藝 APP 刷劇的時候,在搜尋影視作品的過程中,可以通過長按作品封面進行快速預覽,播放精彩片段來判斷是否值得追劇。

          通過長按激活彈窗,可以在不改變當前布局結構的前提下,進行更多功能操作。適合針對隱藏式功能,也能避免誤操作。

          圖片

           

          10. 長按結合位置區域變化

          很多影視類產品在全屏播放視頻時,除了通過拖動進度條進行快進/倒退之外,也能通過長按屏幕進行快進。

          而騰訊視頻與之不同的是結合了屏幕區域,在全屏狀態下,左側區域長按快退,右側區域長按快進。長按結合位置區域變化功能狀態,深入了手勢交互的操作,也能帶來不一樣的操作體驗。

          圖片

           

          11. 三擊激活“輔助觸控”

          單擊和雙擊的手勢交互較為常見,而三擊手勢應用較少,有待深入探索。目前來說,帶有 Home 鍵的蘋果系列手機,可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵,再次三擊隱藏快捷鍵。

          通過三擊可以快速激活功能快捷鍵,減少了多個步驟路徑,也不會導致用戶誤操作。

          圖片

           

          12. 下拉程度影響功能變化

          手勢下滑形成下拉刷新已經成為產品設計中的基礎操作,為了進一步延展功能,很多產品在下拉過程中根據下拉的程度判斷是刷新還是進入二層樓(活動或者功能模塊)。

          通常是通過控制下拉的距離來做判斷,會提示“松開刷新”的字樣,如果繼續下拉則會激活功能變化。進入二級功能界面或者二層樓活動界面,深度的功能開發帶給用戶更多的選擇性。

          圖片

           

          13. 縮放預覽相冊大小

          蘋果手機自帶的相冊(照片)APP,可以通過雙指縮放來改變照片預覽的大小,方便用戶在眾多照片中通過縮小快速查看,再通過放大做進一步的選擇。借助縮放的手勢交互,方便用戶自由縮放預覽并作出快捷的操作,提高了用戶的操作體驗感。

          雙指縮放對于屏幕的縮放預覽十分便利,在很多應用場景都有涉足,比如相冊、地圖、繪圖工具等。

           

          14. 雙擊最大化圖片預覽

          在圖片預覽的時候,可以通過雙擊最大化圖片,方便對細節的觀察。通過雙擊的手勢交互來快速放大圖片,在很多相冊應用、電商產品、微信等社交產品中都有涉足,只要是全屏模式下預覽圖片,都可以通過該手勢交互完成縮放。

          雙指縮放屬于慢動作,而雙擊最大化屬于快速一步到位,適合查看圖片細節等操作。通常是雙擊最大化,再次雙擊恢復正常。

           

          15. 手勢交互控制地圖預覽

          手勢交互在地圖軟件中的運用表現得淋漓盡致,對于用戶來說操作變得更加便利和快捷。

          以高德地圖舉例:單擊手勢可以隱藏操作欄進入全屏模式;長按固定區域會激活當前位置定位,方便隨時查看和開始導航;雙擊手勢可以對地圖進行固定倍數放大;雙指縮放可以對地圖進行任意縮放,便于精準查看位置區域等。手勢交互控制地圖預覽提升了操作便捷度,借助手勢提升了地圖類產品的體驗感。

          圖片

           

          16. 拖動完成自定義設置

          隨著用戶對個性化的需求升級,很多產品都開放了部分常用功能模塊的自定義設置。比如網易云音樂的底部導航欄在設置環節中,便可通過拖動完成自定義設置。

          利用壓力結合滑動可以實現拖動手勢交互,對于一些需要用戶謹慎操作的功能比較適合,也能有效防止誤操作。

          圖片

           

          17. 拖動疊加實現應用建組

          當用戶下載的應用很多的時候,通常都會通過建組管理手機桌面上的各類應用軟件??梢酝ㄟ^拖動應用疊加到其他應用軟件上實現自動建組,建組、進組、移出等操作均可通過拖動手勢完成,操作非常便利。

          拖動手勢交互針對一些防止誤操作的功能比較適合,相當于二次確認的過程。

          圖片

           

          18. 長按滑動實現多選

          在百度網盤中可以通過單擊選擇控件對文件進行選擇操作,也可以通過長按整個區域實現選中,長按過程中可以結合滑動實現多選。

          長按滑動進行多選針對文件較多的場景非常便利,也不用擔心誤操作。在一些相冊應用中點擊選擇按鈕之后也可以通過滑動實現多選,操作路徑多一步。無論是通過激活選擇按鈕,還是長按都是起到二次確認的作用,長按滑動操作相對更簡單。

          圖片

           

          小結

          隨著手機觸屏靈敏度的提升,手勢交互在產品設計中的應用會越來越普及,特別是針對大屏手機。本期整理的關于手勢交互操作的案例僅作為拋磚引玉,還有很多的優秀案例有待大家去發現和總結,不足之處留言補全。

           

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

          作者:黑馬青年

          轉載請注明:學UI網》這些手勢交互你關注到了嗎?

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

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

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

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




          HMI設計需要遵循什么設計原則?

          lanlanwork

          如果想做HMI體驗設計了解開發流程后,首先開始設計前最需要知道的是以什么為基準去設計,以及設計的限制,也就是設計原則。尤其HMI體驗設計是整車體驗的一部分,也變得越來越重要。

          剛開始進入車載行業的同學都會存在一個誤區,會拿互聯網那一套設計規范套路汽車HMI設計,但其實汽車HMI有自己的設計原則和設計規范以及美學理念。

          汽車行業本身是一個有著強烈美學理念和設計規范的行業,其實準確的說應該是汽車HMI中控設計是基于自身傳統規范,結合互聯網移動端和Web端的基礎上,慢慢形成了一種新的設計規范。加上龐大的行業從業者的外溢,互聯網的美學理念和設計規范,已經在入侵進來形成HMI設計新興的細分領域。

          那很多同學問了我們想去做HMI設計應該從哪里下手啊,在這里我建議大家無論做任何的設計都應該從用戶場景、用戶痛點下手。

           

          一、了解與用戶溝通的設計語言

          在設計HMI的過程當中,都是基于用戶在智能車的場景里。就像設計APP會基于用戶痛點和用戶場景來的一樣。在智能車的體驗里,首先是駕駛員、其次是車、以及系統三個要元素組成了車內場景。

          在結合了現有的互聯網車機設計原則,主要考慮的還是簡單易用高效專注。

          簡單易用

          在設計上應該為駕駛員提供更完善的包容機制,操作和信息的統一性和延續性,幫助用戶降低操作成本,提升用戶體驗。

          高效專注

          考慮駕駛員的實際場景的多樣性,注意力容易分散或暫時中斷。所以在設計的時候 要考慮除非重要的警報,盡量用聽覺給到用戶的提示。操作上可以滿足單手操作,并為用戶的每一步操作提供及時的反饋。

           

          二、三秒原則

          之前看過一個“三秒原則”的理論,開車時在高速上要保持和前面通過一個參照物三秒的距離,才是安全的,說明人在高速行駛的反應時間是三秒。

          用戶的注意力管理對減少由注意力分散導致的交通事故十分必要,開車過程中,必要操作需要遵循3秒原則,用戶必須在第1秒內找到應用場景的重點信息與功能入口,然后第2秒進行交互動作,最后第3秒得到想要的信息結果。準確把握每個過程中的時間,排除多余元素干擾,避免分散注意力。

          相關鏈接:車載系統中,交互設計的「三秒原則」

          在三秒原則里,一秒視覺、兩秒交互。排除車的硬件體驗,那HMI設計師在系統里要給到用戶一個什么樣的視覺原則和交互原則是我們今天要研究的問題。

           

          三、HMI視覺設計原則

          1.顏色

          車載的美學他們大多是深色的,金屬質感,邊框和陰影。早期的車載用戶界面都是硬性的感覺。但是現在行業已經成熟到一個包羅萬象的男女皆宜的當代審美。所以現在的視覺可以在以往的傳統上,是汽車界面更新潮更科技。

          1.1 關于色彩

          主流的背景以深色為主,那是因為深色的背景更不容易分散司機注意力,減少了眩光的問題?,F在一些新能源車可以切換白天黑夜模式,也會出現淺色的背景,淺色模式的整體色調不好把控,處理不好會使屏幕一直處于高亮狀態,會讓駕駛員產生一定視覺疲勞。

          色彩規則以 中華人民共和國國家標準 關于駕駛安全的基礎標準為大前提,設定符合車載場景的取色類型。

           

          色彩對比度

          由于駕駛環境的復雜光線條件,需要滿足在不同照明條件(日間/夜間/暗光/眩光)下的可讀性,對比度需滿足以下條件:

          • 文本與底圖對比度建議大于7:1(至少4.5:1)。背景推薦使用深色,避免大面積使用純白色,過度吸引用戶注意。
          • 過高的對比度導致視覺疲勞和閱讀效率的降低。深色模式下背景與文本或圖形的對比度建議不大于18:1。

          * 注:下圖來自 https://color.review/可在此鏈接查閱色彩對比度關系。

           

          飽和度與明度的合理搭配

          長時間駕駛本身精神與視覺會更加需要集中注意力在前方,此時車內環境中,不宜有過于強烈明顯的色彩干擾視線,可試想你在電影院中看電影時,身邊的人的手機亮度最高,此時會嚴重影響視覺的余光,難以聚焦在前方畫面上。

          因此視覺設計的整體色彩體系應當適當的降低飽和度,同樣的,車載系統視覺的設計也應避免使用同一色系的方案,這樣無法在1秒的安全時間以內讓用戶有效果的判斷識別信息

          根據 Munsell Color 原理得出,飽和度和明度的兩個數值越大,顏色越鮮艷。在車機配色選擇上請遵循以下規則:

          • 越靠右上角的色值越鮮艷,所以不建議選取。
          • 取色時,同時考慮飽和度和明度,這兩個因素的值之和盡量小于180(即:S + B ≤ 180)。

           

          不建議選擇單色,建議增加輔助色

          更好的可以幫助我們分組,提高信息的獲取能力。

          結合 ISO 15008 (道路車輛.運輸信息和控制系統的人類工效學方面.車輛目視顯示用規范和試驗程序)

          車載界面色彩傾向度定義了適合作為品牌主要控件的色調的功能色,強調品牌視覺形象。并結合 GB 4094 相關信號顏色規定同樣定義不適合的色彩闕值。

          按照功能色分類可以根據常規場景將功能定位一級色、二級色、三級色。

           

          狀態顏色

          反饋成功及警戒提醒在駕駛場景中至關重要,結合 GB4094相關信號顏色規定,狀態定義需要與相關法規及駕駛者習慣思維的明確色相相結合。

          狀態用色分類:此處顏色以 HSV 顏色模型參數為標準。

           

          百度主題案例:

           

          阿里顏色規范:

           

          華為顏色設計規范:

           

          設計走查自測表阿里車載-設計走查自測表

          為方便車載小程序設計,提供輕量化的小程序設計走查表以供參考; 可用于項目前期設計自測、項目中研發自測檢查、項目上線后設計/產品協同開發同學完成自測問題,查缺補漏規避風險點;

           

          2. 字體

          中控與駕駛員的距離處在70cm-85cm之間,設計稿一定要在實車上感受,是否足夠清晰,是否能快速識別,中控屏搭載的更多是各種應用,顯示的文字相對會多一點,除了文字需要保證在可視區間里,文字內容應當通過字號字重來區分主次關系,用戶在掃一眼的過程中即可準確的看到重點信息。保證易讀性。

          字體的顏色盡量選擇對比度高的,參考WCAG標準。方便用戶能快速掃視。

          字體的大小,層級,對比度等都是影響視覺可讀性和閱讀效率的重要因素,為保障文本的易讀性,界面文字需滿足以下要求:

          • 最小可識別文字尺寸:5.4mm。
          • 字體層級:區分文本主副層級,字號差距需保持4-6sp。
          • 需要用戶閱讀和處理的重要段落文字不超過20個字(700字/分鐘,2秒內讀完)。
          • 對于需要用戶關注的文本信息可通過增加字重的方式突出內容。

          推薦閱讀:適合車載顯示的10款字體

          百度字體設計規范:

           

          阿里字體設計規范:

          圖片

           

          3. ICON

          ICON的設計形式,可更多結合應用的內容,應注意在內容與形式結合時,視線上要保持一致性,可有助于在一秒的安全時間內讓用戶快速瀏覽并判斷信息

          點擊是交互行為中最為常用的動作,為確保用戶點擊操作的易用性和成功率,操作按鈕及熱區需滿足以下規則:

          • 圖標:最小的圖標尺寸為6.9mm,推薦圖標大小為9.2mm。
          • 熱區:最小10.7mm,推薦熱區15.3mm以上,熱區間隔3mm以上。

           

          4. 內容排版

          車載以駕駛員的操作為主,功能布局盡量設計在離手最近的位置,縮短操作距離,盡可能將熱區放大,展示信息放在右側。

           

          4.1 層次和數量

          所有的信息按照使用場景、功能。分組展示,確保信息按照的優先級進行交付。在任何場景下展示盡可能少的信息。避免過多信息的干擾,必須做到界面顯示輕量化。數量盡量不超過3-4個。

           

          4.2 閱讀排版

          可以根據閱讀瀏覽模型Z字型和F字型?;炫诺臅r候建議使用一種字體。

           

          4.3 預留安全熱區

          避免元素熱區過近或重疊,需要使可觸摸目標之間預留足夠的安全距離,至少保持 3.5mm 的熱區間隔。

           

          5、品牌IP

          用戶對傳統汽車的品牌感認知,還是停留在車標、車造型等硬件外觀,而智能汽車,搭載了一個智能系統,除了駕駛需求,人和車的交互更多的會停留在HMI,所以,對于HMI融入品牌元素也相當重要,品牌化是智能座艙視覺設計重要的發展趨勢之一。

          現在主要品牌的體現形式是車載的IP管家,他有具體的名字,可以用語音喚醒。

           

          四、HMI的設計六大交互原則

          說到HMI設計,雖然所有人都很容易理解,HMI設計要考慮注重安全,需要在設計上適應車載的使用場景。但是UI設計原則和UX設計原則很少有人系統性的回答過。對比原有的交互六大原則,適配到車載的場景下,提煉出六大交互設計原則。

           

          1、基本原則

          1.1、安全性原則  ?? ?? ?? ?? ??

          HMI涉及到的載體都是汽車零部件中的安全件,HMI設計首先考慮的必須是以安全為第一導向, 所有顯示信息都應該按照人機工程學進行合理排布,按照駕駛者的行為習慣進行設計。

          與移動端的視覺顯示不同,HMI設計師需要注意除了基礎的視覺顯示規范外,還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

           

          1.2、及時反饋原則

          人的大腦每天通過五種感官接受外部信息的比例分別為:味覺1%;觸覺1.5%;嗅覺3.5%;聽覺11%;視覺83%。

          時刻保障關鍵信息是最高優先級的,保證在各種環境場景下具有良好的可見性和易讀性,無需駕駛員費力尋找和識別。

          隨著大屏、多屏化的發展趨勢,除了依賴視覺反饋,以及減少或避免觸摸屏的誤觸功能,聽覺和觸覺也可以輔助視覺反饋。

           

          1.2.1 不同場景下的提示

          除以上正常駕駛場景外,還有部分對特殊場景的提示,如油耗、故障、雨雪天、超速、疲勞等

          車載系統需要有能力面對復雜的應用場景,處理需要更加智能,(比如復雜路況+不良天氣的提示),以及車內的環境控制(如聲音、氣溫)需要更加敏感。

          車載系統的設計相比于移動端有著更明顯的約束,不論是從空間(使用環境)、時間(三秒原則)、行為(交互方式)、心智(心理訴求),都有著明顯獨特的場景和特點,要做好車載系統設計,我們需要有豐富的同理心以及親身體驗并反復驗證設計。

          圖片來源:https://dribbble.com/czx

           

          1.2.2 信息獲取效率

          同樣,現在的智能汽車,信息呈現的方式,主要也還是視覺為主,聽覺為輔。在還沒有完全實現自動駕駛前,信息呈現層級保持不變。

          在汽車行駛的過程中當中最高優先級是視覺,時刻要觀察道路,查看導航。聽覺輔助也是很有必要考慮的場景,通過語音反饋司機需要獲取的信息,能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率,能減少在開車過程中的安全隱患。

           

          1.3、完整性原則

          將頁面信息根據某些關聯性,分區塊進行顯示,這將有助于用戶更容易的建立信息位置記憶,用極少量的時間查看車輛狀態,減少搜索信息帶來的注意力分散,保障駕駛安全。

           

          1.4、簡單學習原則

          面對C端用戶,設計師要考慮盡最大可能使用符合用戶習慣交互方式,減少學習和適應。讓駕駛員更有安全感和便捷的操作。如果交互界面改變了,用戶極有可能必須從頭開始學習一些基本操做。在市場競爭壓力這么大的情況下,用戶很容易就轉向自己接受程度高的產品。隨著屏幕越做越大,需要駕駛員操做的功能也越來越多,所以駕駛員會因為復雜操做,面臨交通路況擁擠的情況下的額外壓力。

           

          1.5、信息可視化原則

          盡可能的采用圖像化/擬物化風格,避免或減少使用復雜的、過于專業的、技術性的圖標和術語。

           

          1.6、情感化原則

          馬斯洛需求指出,人們需要動力實現某些需求,有些需求優先于其他需求。我們當下在滿足基礎需求后需要的更高階的需求。情感化設計是用戶體驗和需求金字塔的最高層級,情感化需求也是必然的需求。在移動端,情感化的體現主要還是視覺層面,比如加載過程中的動效、缺省頁的插畫、異常狀態的提示等,還有就是和品牌的結合,增加用戶對品牌的認知。

          而對于汽車而言,它是一個空間,就靠屏幕里的視覺元素是遠遠不夠的,應該從整車的角度去分析,通過五感(視、聽、觸、嗅、知)創造更豐富的全局體驗,比如可以根據自己的駕駛需求和個人行為習慣,自定義氛圍燈,香氛、語音等。

           

          汽車IP

          汽車IP用虛擬的人物語音來扮演管家的角色,功能包括了記錄車主的駕駛習慣,不斷優化程序來契合車主習慣,讓車主有更好的駕駛體驗。

          比如蔚來的nomi,既可以陪玩陪聊,還有表情互動,若是加上管家功能,汽車豈不立馬變身駕駛員最好的伙伴?看這小表情,是不是還挺可愛、暖心的哇?

           

          2、分場景

          在討論如何對超寬一體屏進行體驗設計前,我們需要對人在不同場景下的多樣化需求有大致的了解。為此,我們將人與車空間關系的場景劃分為四大方向依次是:生活、娛樂、辦公和共享。

          如生活場景下,全家出游,疲憊的人可以直接在車上睡覺休息,無聊的人可以玩游戲,車內空間采用多音道技術,不同的音道技術可以避免彼此干擾。除此之外,還可以起到保護隱私的作用,滿足每個人對個人空間的需求。

          在娛樂場景下,人可以進行多項休閑娛樂,比如:看電影或者讀書看報,其中使用超寬一體屏觀看電影時,大屏會給人以良好的觀感體驗。

          在辦公場景下,人可以在駕艙內進行各項辦公活動,諸如:視頻會議、電腦辦公、商務信息處理等。

          在共享場景下,車不僅可以是運輸人的移動工具,還能成為運輸貨物的移動工具、移動商城、移動酒店等等。

           

          3、交互方式

          3.1觸控:

          這里分兩種,一種是通過按鍵控制;一種是通過觸屏控制。都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶,現在的趨勢越來越趨向重觸屏,輕按鈕,這樣不僅系統迭代成本小,功能可以動態分布。但是對于一些精準調節的功能還是按鍵控制好一些。

          微軟 的Surface Dial可以給我們很好的啟發,智能旋鈕可以解決大部分屏幕調節的不精準的痛點,而效率又高。

           

          3.2語音:

          在汽車人機交互中,語音交互被認為是車內場景下最自然的交互方式,而語音交互需要一個載體來傳達多樣化的情感。

          語音控制的前景主要在于兩個因素,一個是可以把除了界面以外的利用起來,一個可以與HMI自由交談,二是最小化HMI手動操作產生的干擾,增加安全性。

           

          3.3手勢:

          手勢交互是對語音交互、觸控交互的很好補充,能夠讓車主通過簡單的手勢和語音就能完成車內的交互任務,也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

          常用的手勢:單指滑動(上下左右)、雙指滑動(左右)、五指抓取等。

          HMI的交互手勢不同于手機和IPAD,手機和IPAD握在手里,左右手都可以操作,多指組合的可能性也多,而HMI的手勢定義,更多的是需要滿足駕駛員的使用場景,屏幕是固定在車上的,要規避掉一些不方便的手勢。比如雙指往上滑動就很不方便,向上推不靈活,也有阻力。

           

          五、六大車載系統開源網站

          大家要是想了解的更深入,或者想針對于某個平臺去做設計可以參考一下開源網站。

          1. 阿里 Alios 開放平臺

          https://miniapp.alios.cn/index#/document

           

          2. 百度車載生態開放平臺

          https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

           

          3. 騰訊-車載小場景 (私我領取PDF)

           

          4. 谷歌駕駛

          https://developers.google.com/cars/design/design-foundations

           

          5. 蘋果 Apple Car Play

          iOS – CarPlay 車載

           

          6. 華為車機三方應用交互設計規范

          https://developer.huawei.com/consumer/cn/doc/50902

           

          六、設計開眼

          如果同學們還是對中控設計的設計標準沒有一個概念的話,建議多去看些現有設計,去展廳試駕試乘實車,感受下交互,或者在網站上看看視覺不錯的界面設計都是可以的。

          部分圖片來源于https://dribbble.com/czx

          圖片來源于網絡,侵刪

          今天的分享就到這里!接下來我會分模塊去跟大家講解歡迎持續關注

          歡迎大家補充交流!

           

          原文地址:站酷

          作者:郝小七

           轉載請注明:學UI網》HMI設計需要遵循什么設計原則?


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

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

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

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



          版式教程 | 海報修改,構圖版式的變化

          lanlanwork

          咕嚕嚕

          圖片

           

           

           

          圖片

           

           

           

           

           

           

           

          這是今天一個學員發來要修改的海報,不管是重新還是修改設計,最重要的是能從圖中分析問題并進行改正。

          圖片

           

           

          1、主體不夠明顯

          文字在整個版面中的占比過大后,擠壓了主體視覺的產品展現,弱化了視覺信息。

          圖片

           

          2、信息缺少層次

          當文字越多時,就越要將內容的主次進行有效的區分,讓用戶在閱讀畫面時,清晰直觀的體現出文字信息,而如果所有的文字都一樣的大小并且每段文字之間都沒有很好的間隔和空間的留出,這就容易造成閱讀的障礙。

          圖片

           

           

          3、背景不匹配

          高飽和度的色彩雖然看起來鮮艷,但不代表就一定適用于所有的物體和設計中,比如畫面中的質感和主體的關聯,就很難體現出來。

          圖片

           

          4、字體不統一

          字體是要與主題、風格的調性形成一致性,當一個畫面中使用了非常多的字體在進行展現時,不僅無法展示出設計的美觀,也降低了整體的和諧感。

          圖片

           

           

          圖片

          當分析完這張圖后,我們用兩種構圖技巧可以在最短的時間內快速改正以上的問題,這里我做了2個修改示例供大家參考。

           

          示例一

           

          圖片

           

          1、首先我們運用三等分的構圖方法,也就是將畫布分成三個同樣等分大小的區域。

          圖片

           

          2、將重要的文字、圖形或者物體分別置入進這三個區域中。

          圖片

           

          3、這時會觸發新的問題,左右以及部分過多的留白應該怎么處理,可以將一些次要的文字或點綴裝飾性的圖形搭配在上面,以補足留白過多的問題。

          圖片

           

          4、之前我們分析修改前的海報中提到,主體被壓縮后不夠明顯,在這里面我們需要一個能明顯被注視的主體。

          圖片

           

          一個牛丸很孤獨,很孤獨。

          它需要人陪。

          于是,用手給它搓一下。

          一只手,肯定不行,得兩只手,但干搓也太難受了。

          還得加點水,讓畫面多點有趣的聯系。

           

          圖片

           

          就這樣,海報原本的問題就這么以合理的排版方式解決了。

          [優化輸出圖像]

           

           

           

          示例二

          圖片

           

          利用的是對焦線構圖的方式,這次我們以主體放置為先,看看后面不同的版式變化。

          圖片

           

          還是一個牛丸,很孤獨,很孤獨。

          它需要人陪。

          于是,我找到了它的同伴陪它一起。

          同伴說咱倆有點無趣,要不再叫點人一起玩。

          于是大伙紛紛跟上,并給它們加了點動力。

           

          圖片

           

          對角線的引導會幫助我們加深被引導的內容記憶,所以我們放置了LOGO,并且四周分布了信息內容。

           

          圖片

           

          隨之而來的就是新的問題出現了,

          下面很空,看起來它也很孤獨。

          于是我攜帶著它們,穿越季節,掠過高架,鋪在留白的框架之間。

          圖片

           

          而信息主次的變化就在文字的大小、粗細、比例布局之間形成。

          圖片

           

          我們最后再看下兩個示例中,不同的構圖帶來的變化。

          [優化輸出圖像]

           

          這就是今天帶來排版那點事!

           

          原文地址:修先森撩設計(公眾號)

          作者:修先森

          轉載請注明:學UI網》版式教程 | 海報修改,構圖版式的變化

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

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

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

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


          引起舒適!什么是好用的界面

          lanlanwork


          1. 怎么算好用

          用戶覺得軟件不好用通常是由于操作界面不符合常識,交互邏輯出人意料導致的。這里我們要引入三個模型的概念:實現模型,心理模型和呈現模型。實現模型是軟件的內部運行原理,用戶無需關心。心理模型是用戶期望中完成任務的方式,呈現模型則是軟件被設計來完成任務的方式。呈現模型越是接近用戶的心理預期,用戶的學習成本越低,也就會覺得這款軟件很好用。

           

          2. 理解業務訴求

          有個很恰當的比喻:用戶不是需要一把電鉆,而是墻上要有個洞。后來的研究理論更進一步:還得搞明白為什么用戶需要在墻上打洞,他要連接什么東西?能不能做成無線的?等等。

          圖片

          接到需求后產品經理一般會在 PRD 評審時向設計側講解需求背景和功能邏輯,在這個階段我們可以了解到產品經理規劃中的用戶流程和使用方式。產品原型呈現的只是無數解決方案中的一種,了解了業務訴求再回顧原型方案,經??梢詭砣碌囊曇?,并由此推導設計方案。下面我們就看下如何從組件,結構,功能,狀態幾個層面解決設計問題。

           

          一. 明確功能用途

          1.1 信達雅的文案

          文案是界面的重要構成,卻是界面設計中最不被重視的一部分。很多軟件之所以用起來有一層朦朧的隔閡感,罪魁禍首就是晦澀的文案。簡單的糾正文案可能會帶來煥然一新的使用感受。

          • 信:語義準確,明確事件的主體客體。
          • 達:避免無效或重復文案,減少被動語態,簡潔通順地進行描述。
          • 雅:優雅且有涵養地與用戶溝通。
          • 配圖:有些流程或者用詞比較特殊,單用語言難以描述,配上圖一目了然。

           

          1.2 視覺線索(功能可見性)

          圖形用戶界面誕生之初,界面元素對物理世界的模擬是為了便于用戶將現實中的常識套用到虛擬界面上;擬物化通過質感暗示用戶界面的交互方式;在扁平化時代,提供視覺線索仍然是必要的原則。拿拖拽操作來說,首先可以拖動的組件上要有把手,暗示可以被撿起。組件被拿起來時要明顯擴大的投影樣式描繪高度,并在列表中顯示一條瞄準線便于用戶精確定位。

          圖片

          再比如卡片式設計,和現實中的卡片相同,它可以明確地劃分出功能和信息的關系。要注意的是,視覺分區越多,頁面復雜度越高,設計時需要控制平衡。

          圖片

           

          1.3 熟悉的組件

          用戶點擊下拉選擇器的時候,自然會期望在周圍彈開一個選項浮層,因為他們用過的所有軟件交互都是這樣。這個就是習慣用法范式的應用[注],盡可能套用常規的交互方式讓軟件的操作容易預測,用戶理解成本低。

          圖片

           

          然而在常規組件無法承載實際需求時,有必要跳出慣用范式,通過差異的視覺樣式給用戶思想準備。例如一些原型圖中的選擇器使用了下拉的樣式,觸發的卻是選擇抽屜或者彈窗。這種意外的發生或多或少會降低用戶使用時的信心,因為他們再也不確定點擊下拉后會發生什么。通過特殊與常規的區分,其實也維護了慣用范式的一致性。

           

          二. 導航結構分配

          你一定遇到過這種棘手的原型:頁面導航又多又深,林林總總地鋪灑在導航區和功能區,信息密度堪比柯林斯英漢辭典。頁面導航是界面的基本框架,處理系統的導航方式是頁面設計早期就需要完成的工作。

           

          2.1 幾種反例

          圖片

          • 主導航級數過多:視覺樣式復雜,操作時需要頻繁卷展。
          • 內容區頭部導航堆積:用戶先看到的不是內容而是導航,瀏覽效率較低。
          • 橫縱導航分配不合理:不合理的結構會影響視線掃描和點選,且空間利用率低。以圖中的結構為例,一級導航下不一定都會有二級或三級導航,就會導致頁面版式差異過大。

           

          2.2 控制一級導航深度

          一級導航過深時,有必要進行降級。頂欄導航可以向邊欄導航卸載。邊欄導航是一級時,可將最低級的導航放到內容區吸頂;若層級仍然不夠用或導航條目較多,可以再增加一個縱向導航。

          圖片

           

          2.3 平衡內容區導航

          吸頂導航會占用內容區的縱向空間,但可以隨時跳轉。內容區內的導航性質更類似于篩選,能夠隨內容滾動,不便于隨時切換。頁簽類型區別大或是需要切換對比時,可以將導航吸頂;頁簽下內容形式近似或需要更多瀏覽空間時,可以將導航放在內容區。

          圖片

           

          2.4 減少空間浪費

          很多原型會習慣性地在頁面頂部配置一個頂欄。實際上里面的商標,賬戶信息,設置等功能可以整合到邊欄中,這樣內容區上方會多一些縱向空間。

          圖片

           

          三. 合理布置功能

          3.1 分級展示功能

          比如一些的圖表類頁面主要用于瀏覽而不是編輯,這種情況下將操作隱藏到省略號或者漢堡菜單中,不僅可以減少信息干擾,還能避免誤操作。

          圖片

          高級功能的隱藏很好理解,比如 macOS 的網絡配置只顯示基礎的連接功能,DNS 配置等高級操作被整理到了一個按鈕中。你可以想象如果所有的配置項都展示一個頁面,對于用戶日常聯網操作會有多么不友好。

          圖片

           

          3.2 拆分功能

          除了分級,當頁面或區域內的功能過于集中時,可以進行拆分以降低信息壓力。

          分離檢索與查看:列表同時兼具瀏覽與管理的功能,但在字段眾多,空間有限的情況下,可以選擇其中有代表性的字段在單元行中顯示,便于快速掃描和管理,完整的單元行信息放到下一個層級顯示。

          圖片

          分離表單區塊:當表單存在區塊表單時,可以只在表單中顯示區塊的預覽,將區塊的新增和配置放到抽屜中進行,由此減少功能堆積。

          圖片

           

          3.3 數據的編輯

          涉及數據編輯的頁面存在四種設計方式,需要綜合考慮表單的數量,用戶的操作頻次和使用方式來判斷采用哪種。對于此類問題的推敲,也可以在 StackExchange 的用戶體驗社區參考更多案例:

          例1:https://ux.stackexchange.com/questions/28210/inline-editing-vs-edit-view?rq=1

          例2:https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode

          查看模式:帶查看模式的頁面視覺效果整齊,信息干擾最小,且不會誤操作。但需要進入編輯模式修改頁面內容。

          圖片

          直接編輯模式:用戶到達頁面時,數據就可以被修改生效。常見于設置類頁面。該模式使用效率最高。但由于容易誤操作且視覺信息冗雜,不太適合大型表單。

          圖片

          行內編輯模式:頁面樣式類似查看模式,當鼠標懸停在數據上,界面會提示用戶此處可以編輯,用戶點擊后可以快速針對局部數據做修改。該模式只適用表單項少的情況。

          圖片

          實時保存:頁面長期處于編輯模式,系統會自動保存用戶的操作。常見于線上文檔工具。該模式誤操作風險最高,需要提供版本控制和操作撤回功能。

          圖片

           

          3.4 減輕視覺壓力

          業務層面上無法避免單頁出現大量表單時,可以在視覺上分節。注意!和真正的分步不同,這里的只是從視覺層面對頁面信息進行處理,沒有流程先后的概念,所以盡可能不要拆分頁面。以下圖為例,通過視覺上的劃分,即使在同一個頁面顯示同樣數量的表單,版面空間的呼吸給予了用戶喘歇的余地。錨點導航是個錦上添花的控件,空間允許時可以加上。

          圖片

           

          3.5 定制化交互

          3DS Max 的四元菜單是一個很有代表性的設計,在視口右鍵時會圍繞光標彈出4個內容敏感菜單而不是一個,這四個菜單顯示的工具甚至可以自定義。普通系統在處理此類問題時,要么采用需要滾動的長菜單,要么用聯級選擇器分類。而這個設計的優越性在于,通過分類并同時顯示四個面板,用戶點擊次數少,光標的移動距離短,大大提高了工作效率。

          圖片

          再比如 Spotify 底欄的探索頁簽,點擊會進入音樂探索頁面(頂部有搜索框),雙擊會直接進入搜索框,長按則會激活語音助手。這些定制化交互的特點在于,它們巧妙地簡化了操作流程,但是用戶不知道也絲毫不影響使用。

           

          四. 補救意外情況

          4.1 空狀態引導

          一個列表出現空狀態的可能性有:

          圖片

          • 確實沒有條目:如果能添加的話,可以提示用戶如何添加。
          • 應用了過多篩選器:提示用戶嘗試其他篩選方式或重置篩選器。
          • 加載異常:提示用戶刷新頁面。

          雖然后果一樣,但問題本質不同,解決方式自然也不同,此時需要分別給出對應的引導。

           

          4.2 異常引導

          再沒有什么比一行“操作失敗”的提示更讓人絕望,用戶不知道哪出了問題,也不清楚如何解決。異常流程時有發生,此時系統的引導會起到至關重要的作用,它能夠帶用戶走回正軌,減少無助感。

          圖片

           

          4.3 標明功能不可用的原因

          該問題的重災區是工具類軟件,用著用著一些功能突然就灰掉了,只能慢慢摸索是哪里的問題。功能之所以不可用肯定有個原因,不論是直接顯示還是鼠標懸停時顯示,有必要要讓用戶明白原由或者如何解決,避免把用戶困在死胡同。

          圖片

           

          4.4 提供幫助

          新手教程特別考驗用戶的記憶力,尤其是在新接觸軟件的學習爬坡階段,而且很難保證在一段時間不用后,用戶還能記得如何操作。當系統引入了晦澀概念或復雜交互時,最好在該功能周圍提供說明,或懸停時展示 tooltip. 使用戶無需長期記憶,在用到該功能時又可以快速上手。

          圖片

          我曾經寫過一篇介紹 Protopie 的文章,慚愧的說,由于日常項目中的交互大多比較基礎,其實用到 Protopie 的并不是很多,重新打開難免手生。但這款軟件界面上可以見到很多問號圖標,點擊即可跳轉到詳細的功能講解文檔,不論是對于新人上手還是發掘軟件功能都很有幫助。

           

          結語

          圖形界面的本質是人與機器交流的語言。與現實生活一樣,我們傾向與禮貌體貼的對象溝通。所以下手設計時要盡最大可能從人類的本性出發,才能在業務和產品邏輯的限制下,為用戶塑造更具親和力的界面模型。

           

          注:文章中均為設計時遇到的真實案例,為脫敏隱去了細節。三種模型和界面范式的內容整理自 About Face,分別在14頁和240頁, 有興趣可以詳細閱讀了解。

           

          原文地址:京東設計中心JDC(公眾號)

          作者:邢禹

          轉載請注明:學UI網》引起舒適!什么是好用的界面

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

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

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

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




          「設計心理學」Uber利用心理學改善用戶體驗

          ui設計分享達人

          “Uber是一種非常獨特的模式,沒什么可以參考的產品”

          ——Travis Kalanick


          Uber遍布全球65個國家,超過600個城市,擁有7500萬用戶,為很多人解決了交通不便的問題。


          這個規模和增長速度是前所未有的,Uber提到這其中獨特的商業模式和用戶體驗是驅動。


          所以哪些是最重要的用戶體驗問題,Uber又是怎么通過科學的方式來解決這些問題的呢?


          Uber用戶最大的痛點-等待

          -

          想象一下你在凌晨2點的冬天,獨自矗立在陌生城市的街頭瑟瑟發抖;或者是你要參加一個重要的會議,如果Uber準時到達的話那就正好趕得上。


          在這些非常緊急的情況下,人們對時間的感知是扭曲的,等一秒像是一分鐘,等一分鐘像是一個小時。

          不僅如此,人們還會用這種扭曲的等待時間來評價整體用戶體驗,為什么會這樣?這就用到一條心理學原則叫“峰終定律”(peakend rule).


          隱藏在“難以忘懷的用戶體驗”背后的科學

          -


          Image via UI Patterns.com


          峰終定律指的是人們基于最高峰體驗和最終體驗來評價整體體驗,而不是在這段體驗中的平均感受,這個定律對好體驗和壞體驗是通用的。


          對品牌來說,顧客會深刻記住這兩個點:最壞(或最好)的體驗、最后的體驗。

          Photo by why kei on Unsplash


          好體驗對“等待時間”的要求是非??量痰模@也是用戶給出好評的關鍵點,Uber花了無數時間來解決這個痛點,這就是Uber決定要應用心理學來完善用戶體驗的原因。


          在這份調查中,Uber發現了3個關鍵原則,可以解決“等待時間”這個痛點:厭惡無聊,操作透明化,目標趨近效應。


          1.厭惡無聊

          -


          “人們討厭無所事事,他們需要一個原因忙起來”

          ——researcher Chris Hsee

          Photo by Fabrizio Verrecchia on Unsplash


          最近對心理學、幸福和用戶體驗的研究,揭示出一個原則,就是“厭惡無聊”,指的是人們在忙碌時感到更快樂,即使他們是被迫忙碌。


          如何應用這一原則?


          可以讓用戶參與讀取信息、游戲化和增加視覺效果等方式,讓用戶保持忙碌的狀態。


          像下面Uber采用的方式,他們利用一個動畫來愉悅用戶,同時實時告訴你等待時間。

          Uber Blog Australia


          2.操作透明化

          -


          “當用戶從我們為他們創造價值的過程中分離時,他們會感覺我們沒有全力以赴。

          這時候他們較少重視或肯定我們的服務。”

          ——Ryan Buell,哈佛商學院

          Photo by Sitraka Rakotoarivelo on Unsplash


          操作透明化是一種能讓用戶看到公司如何運營操作的直接方式,這樣用戶就能看到我們在整個過程中付出了多少努力。


          根據最新的研究發現,操作透明化會讓用戶對產品的價值評價更高,讓人們感覺更好。


          如何應用操作透明化?


          及時告知用戶,讓關鍵信息可見,還要幫用戶理解信息來源。


          在下面Uber Pool的例子中,他們提供了到達時間的計算方法這一信息。通過一種簡便的方式告訴用戶,即使是沒有任何技術基礎的用戶也能看懂。

          Engineering at Uber(右圖詳細解釋:我們是如何計算到達時間的)


          3.目標趨近效應

          -

          目標趨近效應表明人們更愿意為即將達成的目標而付出努力,而不是他們已經走了多遠。

          Photo by Jonathan Chng on Unsplash


          越接近目標,用戶就越愿意采取行動更快的去完成這個目標。


          如何應用目標趨近效應?


          想象目標趨近效應是一條真實存在的終點線,用戶越接近終點,越能鼓勵他們積極行動。


          你也會經??吹?strong style="outline:0px;margin:0px;padding:0px;">這個原則應用在很多交互元素上,比如進度條,填寫完成度等,用即將完成來鼓勵用戶完成任務。


          Uber通過解釋幕后發生了什么來應用這一原則,他們解釋過程中的每一步,讓用戶感覺到為了達到他們的目標正在不斷的努力。


          最后

          -

          毫無疑問,Uber很大部分的收益來自利用科學改善用戶體驗,最先在Uber Pool運行的增加了厭惡無聊、操作透明化、目標趨近效應的實驗版本,效果非常好:


          “Express POOL團隊用A/B測試的方式,發現增加這些解決方案后,取消率降低了11%”

          ——“Uber如何大規模利用行為科學”


          如果你想在產品中應用這些原則,必須要結合非常嚴格的測試。一個原則的應用,可能要通過上百種實現方式對比實驗,才能找到最佳解決方案。

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

          文章來源:站酷 作者:彩虹BOOK
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          B端表格設計的基本交互形式

          ui設計分享達人


          藍藍推薦:這是一篇很實用的表格基本交互形式文章!
          譯文:
          如果沒有將數據可視化和具備編輯數據的功能,數據就毫無用處。未來行業的成功依賴于將數據收集與更好的用戶體驗結合起來,而數據表格的設計體驗則非常重要。

          固定表頭

          -

          固定表頭讓用戶隨時都知道自己所在列的名稱。


          水平滾動

          -
          當展示大型數據列表時,水平滾動是不可避免的。可以 將具有標識性信息的數據展示在第一列中,并固定第一列方便用戶對其他數據進行對比。


          調整每一列的寬度

          -

          調整列寬可以讓用戶看到所有的內容。


          設計表格樣式

          -

          表格的樣式有:白色和其他顏色相間的斑馬線設計,單純用線分割,自由形式等。

          正確的設計行樣式可以幫助用戶瀏覽表格數據,對只包含少量數據的表格來說,減少視覺干擾非常重要,這時候就可以采用去掉分割線、斑馬行的自由展示模式。但對于有大量數據的表格來說,自由模式容易讓用戶迷失,這時候用線分割,讓用戶能區分開每一行就顯得尤為重要。而斑馬線的設計樣式適合包含多列數據的表格,需要水平移動的大量數據表格。 


          表格密度展示

          -

          為列表設計不同的密度,用戶可以根據需要自行切換,比較緊密的行距讓用戶無需滾動就可以瀏覽更多的數據。



          數據可視化

          -

          讓數據可視化,提供表格內容的概括性預覽,讓用戶無需細讀每一條數據就能得到想要的信息。



          分頁展示

          -

          分頁設計方便用戶跳轉到相應頁面,但是也常常被無限滾動加載的方式取代,無限滾動加載指的是隨著鼠標不停地往下滾動,頁面內容也會隨之加載,這種方式適用于發現類的網站,但是對于考慮優先級的產品來說就不太合適了。


          懸停展示

          -

          當用戶懸停時顯示更多功能可以減少視覺混亂。需要注意的是,它可能會導致可發現性問題,因為用戶需要與表交互才能看到更多的功能。


          直接編輯

          -

          直接編輯可以讓用戶在當前表格內修改數據和內容,而不用額外再跳轉其他頁面進行操作。


          可擴展功能

          -

          可以擴展的表格設計允許用戶在不丟失上下文的情況下瀏覽更多詳細信息。


          快速視圖

          -

          與可擴展功能非常相似,快速視圖使用戶能夠在保持上下文的同時查看附加信息。


          彈窗

          -

          彈窗設計同樣可以讓用戶停留在表格視圖中,讓用戶更專注在附加信息和操作上。


          多層彈窗

          -

          多層彈窗功能對于活躍用戶來說非常強大,可以同時完成多種操作,或用來比較不同項目的詳細信息。


          點擊詳情展示

          -

          單擊鏈接會將表格轉換為左側為列表項和右側為其他詳細信息的視圖。它使用戶能夠解析大型數據,以及查看單獨的項目詳情而不會丟失它們的位置。


          可排序的列

          -

          排序允許用戶按照字母順序或數字順序對列進行重新排列。


          基本篩選

          -

          提供基本的篩選功能來搜索表格里的相關數據。


          列篩選

          -

          這種設計模式允許用戶將過濾參數分配給特定的列。


          可搜索的列

          -

          這種設計模式允許用戶在每列中搜索特定值。


          添加列

          -

          這種設計模式允許用戶根據需求在數據表格中添加列。


          可編輯的列

          -

          可自定義的列功能使用戶能夠選擇他們想要查看的列并進行相應的排序。 這個功能還包括保存預設后再修改的能力。


          ...


          為什么表格設計很重要

          數據正在成為全球經濟的原材料。對數據的追求推動了行業的重塑。能源、媒體、制造、物流、醫療保健、零售、金融,甚至政府都在經歷數字化轉型。


          然而,如果沒有可視化數據并對其采取行動的能力,數據就毫無意義。未來十年幸存下來的公司不僅將擁有卓越的數據;他們也將擁有卓越的用戶體驗。


          良好的用戶界面設計基于用戶的目標和行為。用戶界面反過來也會影響行為,從而推動進一步的設計決策。用戶體驗以微妙和無意識的方式改變了人類的決策方式。所看到的、呈現的位置以及交互的方式,都會影響行動。重要的是我們要做出能夠帶來更美好世界的設計決策,一個符合這個時代的數據表格設計。


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

          文章來源:國外  彩虹BOOK翻譯
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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





          B端兩大設計系統哪家強?

          資深UI設計者

          編輯導語:有效地利用 B 端設計系統,產品設計師將可以更高效地做出更好的交互設計。那么前段時間發布的 Arco Design 設計系統,和已有的阿里 Ant Design 系統,二者有什么區別呢?本文作者對兩大設計系統典型頁面發表了他的看法,一起來看一下。

          簡介

          前兩周字節發布了自己的中后臺設計系統 Arco Design,在仔細閱讀官網文檔了過后,想和大家聊聊我自己對于 Arco Design 設計系統的與阿里的 Ant design 的一些對比和差異分析。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ArcoDesign 是一套設計系統的簡稱,是基于字節跳動所有的中后臺產品。ArcoDesign 主要服務于字節跳動旗下中后臺產品的體驗設計和技術實現,主要由 UED 設計和開發同學共同構建及維護。

          Ant Design 是阿里打磨出的一個服務于企業級產品的設計體系, 通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          總覽

          Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue,設計價值觀和設計原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設計價值觀,試圖建立務實而浪漫的工作方式。在「設計價值觀」的堅持上,Ant Design 有四點與眾不同:「自然」、「確定性」、「意義感」、「生長性」。

          我的個人理解 Arco Design 是站在設計規范的基礎出發點考慮,希望給用戶傳遞出來的價值出發,讓用戶深刻感受到系統是「清晰」、「一致」、「韻律」和「開放」的,而 Ant Design 所傳遞出來的價值觀似乎更加玄學或者說格局更高,上升到更高的思維境界,即大自然思想和社會責任。

          當然這部分的內容相對比較虛,每個人側重點想法都不同,大家可以自己去理解一下這部分內容。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B 端典型頁面分析

          接下來會從工作臺、表格、表單幾個典型高頻的 B 端界面進行分析,看看兩者的差別。

          1. 工作臺

          1)布局

          Arco 的卡片列布局靈活,基于 24 柵格進行布局,將整個柵格區域 2:2:1 的比例進行分割,信息卡片的寬度根據柵格寬度進行自適應,這樣的工作臺頁面既靈活也能夠滿足業務需求。

          Ant 的卡片列布局采用 3:2 比例進行布局,同樣是基于 24 柵格。目前主流的 B 端頁面都是以 24 柵格為基礎進行設計。3:2 還是 2:2:1 這兩種卡片布局方式沒有絕對的優劣,主要是根據我們頁面的信息量以及行業屬性去確定。如果工作臺所展示的單個信息量較多可采用少列大寬度進行布局,滿足信息展示的最優布局。

          作為 B 端的工作臺頁面,核心訴求是能夠清晰找到用戶想要的信息,想要做的內容,所以我們設計師要優先保證用戶能夠快速定位到核心的信息,快速到達要到達的功能。

          2)信息展示

          Arco 針對同系列的模塊設計了兩種尺寸的間距,例如歡迎問候信息與下方的數據信息之間是大間距,數據信息與下方的團隊動態最近項目之間是小間距。

          格式塔心理學的接近原則指出:接近的事物會被認為是同一個整體,擁有相似的功能或特征。所以在這里設計師通過兩種間距的留白對我們視覺進行暗示,強調信息之間的關聯程度,便于區分信息層級。

          Ant 在卡片方面沒有為卡片間距設置兩種尺寸,從上下到左右都是一種尺寸,這樣做的好處可以讓視覺更加對齊,顯得頁面更加規整,不好的一點就是內容區域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦,顯得內容區域很散。標題方面沒有進行加粗重色強調,將內容進行突出,使用戶更加聚焦于內容。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          3)導航方式

          兩個系統默認都采用側邊欄導航方式,側邊導航在國內的 B 端產品當中最為常見的。將菜單欄放置在左側,頁面布局上基本為左右結構,將導航菜單放置左側固定。側邊欄導航擴展性強、展示靈活、能夠快速定位,缺點是不易閱讀、閱讀沉浸感低。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Arco 導航區域與內容區域都使用同類淺色,采用線的方式進行分割,整體視覺比較清爽。Ant 導航區域使用了傳統的重色與內容區進行區分。

          目前的設計趨勢流行淺色導航,有幾個產品的 WEB 端進行了一系列的大改,YouTube、Twitch、Twitter 都進行了重新設計,他們不約而同地將塊面去除,去掉多余的的灰色,通過留白和空間將頁面拉開。這否是下一個 WEB 端所要追尋的趨勢,我還不得而知,但是對于導航層級多的側邊欄導航,我仍然建議使用深色背景區分導航欄。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          有一個細節,在頁面背景有一個以登錄的用戶名形成的一個背景水印,在 B 端的頁面中,對信息的保密程度要求很高,這里是為了防止公司核心數據資料泄露,在截圖的時候會有水印的存在,增強了信息的保密級別,這是一個很好的設計洞察點。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          2. 表格

          1)表格樣式

          表格作為組織整理數據的手段,可以有效地向用戶展示數據信息,是 B 端產品中出現最高頻的模塊之一。

          用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化(關聯和區別)。好的表格信息展示設計,應當是能夠輔助用戶高效便捷地實現以上場景中的訴求。

          Arco 和 Ant 的表格設計樣式與市面上多數產品都類似,采用表格列無分割線條、表頭與內容左對齊、數字右對齊的方式。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          合格的表格設計要定義合理的表格行高,在具體設定表格行高時,由于表格中以文字信息為主,我認為可以參考文字排版的常用做法,將整個表格的行高分成文字行高、文字與分割線間距離,即上下間距兩部分來考慮。

          文字行高可以設定為字號的 1.2~1.8 倍,文字與分割線間距離可以設定為字號的 1~1.5 倍。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          2)信息展示

          表格行高決定屏幕內能呈現的行數,即用戶在一屏內能獲取信息的數量,主要影響用戶縱向對比數據的效率。

          在 B 端用戶使用場景中,數據量極大的表格的展示問題是體驗優劣的關鍵因素。對于 1920*1020(包含該分辨率)以上的大屏用戶,對于一屏顯示行數的感知不強,但對于 1366×768、1280*720 等這類小屏,顯示行數有限,用戶進行縱向數據對比的效率就會有所降低。在設計前,應當充分了解目標用戶的行為訴求,了解目標用戶設備屏幕分辨率的占比分布情況,有針對性的設置行高。

          B 端產品的特點之一是通用化,覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。產品為了讓不同用戶都能獲得較好的體驗,可以考慮把表格疏密度的設置開放給用戶,建議不是完全開放給用戶去調整尺寸,而是給出一定階梯度的快速選項,例如舒適、標準、緊湊三種高度來滿足用戶需求。

          Ant 的表格功能很齊全,很多功能都是 B 端產品的痛點,例如表格可以通過調整單元格行高來調整密度,緊湊模式下可以顯示更多的數據。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          3)操作路徑

          作為一個查詢表格,我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置,而將明顯的左上角放一個添加按鈕,如果存在多個查詢條件是不是要從右往左放置呢?這里我不是很理解,大家也可以說一下自己的想法,相互探討一下。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Ant 的表格使用路徑符合 F 型視覺動線布局,在 B 端的市場中這種表格的設計方式已經符合用戶的操作習慣了。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          在 2006 年時候,尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享,他們通過研究發現,用戶傾向于一種 F 模式去查看網站。F 模式,能很好地幫我們創建好的視覺層次結構設計,因為這是人們可以輕松掃描設計一種布局,它能讓大多數用戶感到舒適,因為我們用戶一直從上到下,從左到右閱讀。

          在設計之前,我們先要去確定哪些內容最重要,明確信息的優先級,只有清楚知道你希望用戶看到什么,才能將它們放在用戶視線熱點中。

          個人認為在表格設計的完整度和設計的合理性方面來看,阿里的 Ant 系統做得比字節的 Arco 更好。

          3. 表單

          表單在界面中主要負責數據采集的功能,任何一個表單都可以被拆解成三個最基本要素:

          標簽(標題)、輸入框和按鈕。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          1)表單布局

          Arco 的表單屬于復雜表單,當表單條目數在 7 個以上,可歸類到復雜表單,這時候就需要根據表單的復雜度、邏輯性、關聯性進行判斷,選擇合適的分組方式,進行歸納簡化,降低表單填寫負荷。采用 3 列布局,便簽與文本框上下左對齊,這樣的對齊方式有利于用戶瀏覽的效率、對齊的美觀以及國際化拓展頁面的對齊問題。

          Ant 的表單也是較為常規的布局方式,有一點差異就是文本框并沒有右對齊,這里阿里自己也做出了解釋:文本框是根據需要填寫的字段進行長度展示的,需要填寫內容比較長的文本框就會比較長。實際業務中,大部分 input 所需填寫內容都存在理想長度,input 的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

          2)標簽對齊方式

          Arco 和 Ant 都使用了頂標簽的形式對齊。

          標簽分為左標簽、右標簽、頂標簽三種,不同的對齊方式,使用場景不同。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          該如何選擇呢?我們需要從 3 個方面進行考慮:操作效率、標簽長度、屏效、視覺對齊。

          ① 操作效率

          根據 Matteo Penzo 的研究總結得到的瀏覽時間表發現,標簽移動到輸入框的時間,頂部對齊最快只要 50ms,其次是右對齊 240ms,左對齊耗費時間最長 500ms。

          因此當以操作效率為主時,推薦使用頂對齊的方式。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ② 標簽長度

          當標簽長度超過 8 個字,或者需要考慮中英文雙版本時,推薦使用頂對齊的方式,其容納的標簽文字更多,拓展性更好,比如 Ones 的建任務的標簽,就采用標簽頂對齊的方式:

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          ③ 屏效

          如果只考慮屏效,那么標簽左對齊右對齊均可,但是如果還考慮表單錄入效率,那么推薦使用標簽右對齊的方式,比如蜂鳥匯報:

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          顏色主題配置

          Arco 的顏色主題配置可以說是讓人眼前一亮了,可調整的范圍非常廣非常牛逼??梢跃庉嫷木S度從基礎的顏色、字體、陰影、 到組件的按鈕、導航、分類、表格 一共有接近 40 款組件的樣式,并且都是可以進行可視化編輯與實時預覽的。

          如果你用了 Arco 過后,或許不用苦苦地站在前端后面,讓他幫忙調整頁面,作為設計師自己就能夠搞定,并且每一個組件可以調整的粒度是非常之細,包含各種寬度、圖標大小、顏色、投影,等等…在這里可以編輯自己的主題,也可以在商城社區查看到別人發布的主題,真的是很方便啊。

          真的有些 amazing!假如你需要去設計一套官方的設計系統,完全可以通過 Arco 進行設計和預覽、落地。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          Ant 并沒有做這方面的功能,顏色主題配置這一塊確實是 Arco 很大的亮點。

          B端兩大設計系統哪家強?來看這篇超全面的對比!

          總結

          無論是 Arco Design 還是 Ant Design 設計系統,都代表了字節跳動和阿里兩家互聯網巨頭公司在 B 端領域的沉淀和競爭。對于 B 端交互設計師來說,兩個設計系統都值得我們去研究和學習,建議大家都去看看設計規范里面的內容,對于我們認識和熟悉控件以及和開發對接都很有幫助。

          文章來源:優設 作者:哄哄
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何去做好響應式設計?

          資深UI設計者

          對于大多數網頁設計師來說,你的成品需要在各種類型和尺寸的設備上進行外觀和工作,這是顯而易見的。創建多個設計來實現同一目標的日子已經一去不復返了。


          這一切都歸結為選擇響應式或自適應設計模型,以實現任何規模的一致網站設計。


          但是響應式和自適應之間有什么區別?它們真的只是一回事嗎?讓我們來看看并解釋你需要知道的一切。喜歡記得關注UI范,每天更新,打造你的知識武器庫!




          1.與設備無關的設計的兩種方法



          就其核心而言,響應式和自適應技術在最終用戶看來可能是一樣的。創建設計和開發方法都是為了使網站在所有設備類型上都具有良好的外觀和功能。
          主要區別在你如何使用響應式或自適應技術創建網站。




          2.響應式設計



          響應式設計是任何使用網站的人的“家庭”術語。也許幾乎令人驚訝的是,它并沒有那么老。它是由Ethan Marcotte在 2010 年創造的:

          現在比以往任何時候都更重要的是,我們正在設計旨在沿著不同體驗的梯度觀看的作品。響應式網頁設計為我們提供了一條前進的道路,最終讓我們能夠“為事物的潮起潮落而設計”。


          而這正是我們目前關于響應式網站的思想學派的起點。




          響應式設計是一種技術,其中網站在任何給定尺寸下“響應”瀏覽器的尺寸,以便針對屏幕優化設計。理想情況下,用戶應該從單個網站獲得相同的體驗,無論他們是在只有幾百像素寬的移動設備上手持它還是在超寬屏幕顯示器上觀看它。

          響應式網站使用了許多你可能熟悉的元素:媒體查詢、靈活的網格和響應式圖像。它可能是針對多種屏幕尺寸進行設計的最流行方法。(純粹主義者會注意到響應式設計與設備本身無關,只與大小有關,而不是自適應,它在完美渲染的道路上檢測設備類型等。)

          根據交互設計基金會的說法,響應式設計更容易,實現的工作更少。這可能是它被更廣泛使用的原因。


          響應式設計師創建一個單一的設計,用于所有屏幕,通常會從分辨率的中間開始,并使用媒體查詢來確定將對分辨率標度的低端和高端進行哪些調整。這往往會讓用戶感到高興,因為熟悉的網頁設計似乎保證可以轉換到任何設備的屏幕上。均勻性和無縫性是提供良好用戶體驗的關鍵考慮因素。

          此外,由于涉及開發時間,響應式設計通常是大型網站的選擇。響應式設計植根于網格系統,響應式測量(考慮百分比或最小值和最大值)可幫助設計以不同的尺寸擴展、收縮和堆疊。
          這種設計技術是新開發的規范。



          3.響應式設計的優點

          • 無論設備或瀏覽器如何,該設計都適用于任何視口尺寸。

          • 響應式設計對搜索引擎友好(谷歌甚至推薦它)。

          • 允許設計中的很多精確度,以便設計師可以調整任何或每一個細節。

          • 高度移動友好的設計選項。

          • 與你可能用于網站項目的大量主題、網站構建器和工具兼容的常見設計實踐。

          • 該設計將具有統一和無縫的外觀,這將提升整體用戶體驗。





          3.響應式設計的缺點

          • 確保響應式元素在不同尺寸(尤其是較小尺寸)下仍保持可讀性和可訪問性非常重要。
          • 通常需要比其他網站更多的編碼,這可能需要時間或導致重量。重要的是要注意并注意這里。
          • 你無法控制所有設備尺寸,最終可能會設計出與舊尺寸或更模糊尺寸不符的設計。
          • 元素可能會在你身上四處移動,并不時以奇怪的位置結束,甚至由于核心內容管理系統或網站框架更新,因此重要的是要隨時了解變化。



          4.適應性設計


          自適應設計幾乎與響應式設計一樣古老。該技術于 2011 年首次使用,涉及針對特定設備尺寸和類型進行設計,以獲得更加個性化的體驗。
          這是來自MDN Web Docs 檔案的一個很好的解釋:“自適應設計更像是漸進增強的現代定義。自適應設計不是一種靈活的設計,而是檢測設備和其他特征,然后根據一組預定義的視口大小和其他特征提供適當的特征和布局。”

          設計植根于六種固定變化(寬度):

          • 320 像素

          • 480 像素

          • 760 像素

          • 960 像素

          • 1,200 像素

          • 1,600 像素


          自適應設計最常見的用途是將舊設計轉換為更適合移動設備的設計。這并不是說它不會發生在新的開發中。




          5.自適應設計的優點


          • 移動設備會告訴設計它們是什么,以便設計非常適合該設備和瀏覽器類型。
          • 自適應設計在事物的設計方面提供了幾乎精確的控制。
          • 智能廣告是一種可能性,允許來自智能設備的鏈接。
          • 自適應設計在速度測試中的得分往往高于響應式設計。
          • 該設計可以使用更多的個性化功能,連接到智能設備的使用選項和適配。
          • 對于需要刷新的小型網站來說是不錯的選擇,因為你只需“設計”較小的尺寸。



          6.自適應設計的缺點

          • 由于配置錯誤,您在設計時可能會遇到一些不太常見的設備(例如平板電腦)的問題。

          • 自適應設計可能是勞動密集型的,需要更多的開發時間和成本。

          • 由于內容重復,搜索引擎在使用自適應網站時會遇到更多困難。

          • 有一個偷偷摸摸的現實,你設計同一個網站六次。

          文章來源:站酷 作者:UI范

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

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

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


          創建設計系統前,6 件必須知道的事情

          資深UI設計者

          編者按:資深產品設計師 Taras Savytskyi 將自己在初創團隊中的設計經驗濃縮成為今天的這篇文章,如果你也是設計團隊中唯一或者主要的設計負責人,需要考慮到設計系統的問題,那么這篇文章的6個總結,應該能夠給你不少幫助:

          創建設計系統前,6 件必須知道的事情

          成為公司當中唯一負責產品設計的設計師,其實并不是一件容易的事情。你可能會非常忙碌,因為你需要處理很多事情。你需要考慮產品的設計,交付物料,和研發人員協作,在溝通會上做QA,做用戶訪談等等。

          此外,你可能還需要保持你的設計技能持續精進。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持續關注。我們通常會使用 Figma 來作為主要的設計和協同工具,所有的設計、探索、頭腦風暴都在其中完成。

          我加入 Statflo 之后不久,作為公司唯一的設計師,我需要設計一個全新的 APP,在這個過程中我需要設計一個全新的設計系統,幫我足夠快速地創建后續的原型。

          1、無需猶豫,直接基于現有的開源設計系統

          創建設計系統前,6 件必須知道的事情

          剛開始的時候,你不需要太多的素材。你可以直接調用絕大多數的原子組件,比如按鈕、下拉菜單、表單、字體、配色,等等。默認初始狀態的樣式無關緊要,因為后續點擊幾下就能夠快速調整樣式。

          但是這也意味著,你需要在第三方設計系統當中,找到重要的、足夠靈活的、合適的組件來套用。你可以從下面幾個設計系統開始著手:

          免費: Ant Design Open Source, Lexicon DSL

          付費:Tetrisly , Venus Design System,73px

          2、主要關注基礎組件、顏色和排版

          創建設計系統前,6 件必須知道的事情

          在此之后,你如果要繼續推進你的設計系統,你需要首先關注幾件簡單的事情:配色、排版和基礎組件。

          完成這幾個部分能夠幫你更快地完成整個體系的搭建。比如你預設了不同狀態的配色,那么當你完成某個UI組件的默認狀態的設計之后,可以快速添加其他狀態的樣式。

          又比如,如果你不確定在輸入字段當中使用什么圖標,那么你只需要創建一個 16×16 的正方形,使用灰色填充,作為占位符,等后續圖標素材確定之后,再填充進去就好了。

          3、總是從一個組件開始設計

          創建設計系統前,6 件必須知道的事情

          當你是初創團隊中唯一的設計師的時候,你有很大概率需要自己構建一套設計系統。如果你想在這件事情上節省時間,那么最好的方法,就從你當前正在做的這一個 UI 組件開始,將其中所有的元素轉化為固定的組件,逐步拓展出設計系統。

          以這種方式來執行,可以節省大量的時間,并且這種方式能夠幫你更快明確哪些元素在一開始可能就是重要的。

          在理想情況下,你的設計流程是繪制小元素,然后逐步組件成為你所需要的組件,這樣的處理機制讓你無需花費時間來反復更新組件的設計。

          4、使用 Figma 當中的「Master」插件

          創建設計系統前,6 件必須知道的事情

          不過,以這種方式來創建設計系統的時候,你可能會碰到一個問題:你可能會忙于設計,而忘記將創建特定的組件,相反可能會復制一堆完全相同的畫板。這個時候,手動撤銷操作可能是一件極度麻煩和無聊的事情。這個時候,你就需要一個專門解決這種問題,這個插件名為 Master,創建者是 Gleb Sabirzyanov,它可以幫你將這些重復的畫板轉化成為一個固定的組件。

          但是這還不夠。如果你執行的操作足夠多,這些你所復制的元素可能已經應用多個畫板和頁面當中,這個時候,你需要借助名為 The Similayer 的插件,來幫你搞定相似組件的識別問題:它可以一鍵識別出分散在各處相同的元素,然后你可以將他們轉化成你所指定的 UI 組件了。

          創建設計系統前,6 件必須知道的事情

          5、利用項目間歇來完善設計系統

          有時候項目和項目之間是有間隔時間的,這個時間段就特別適合你去覆盤之前設計的組件,將其逐步改進融合成為一個系統。相信我,你在這件事情上所花費的時間,將會在你下一次創建新的功能和組件或者原型的時候,得到回報。

          我一直試圖在自己每周的日程表當中,騰出幾個小時的時間專門來做這件事情,幫我完成我的設計系統的增量更新和迭代。

          創建設計系統前,6 件必須知道的事情

          6、一開始不要糾結于正確命名

          在創建設計系統的過程中,尤其是當你在不同的項目過程中,各種組件總是沒法正確的命名。根據我的經驗,在設計的時候,怎么命名方便怎么來其實是很合理的,一開始一定不要糾結,留著在后面的階段再行解決都好,之后單獨梳理命名、路徑、結構、嵌套等等關系,比起你一開始做某個小組件的時候就糾結這些事情要更加合理,也更加方便。


          文章來源:優設 作者:VMIC UED

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

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

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





          最新 UI 設計趨勢及應用

          資深UI設計者


          字體圖標,完善字體系統


          圖標在 UI 中扮演著重要的角色,并且已被證明是過去幾十年 UI 設計趨勢的象征。在圖形用戶界面的發展早期,圖標在計算機的顯示技術限制內盡可能仔細地模仿現實世界的物體;它們旨在將用戶體驗從現實世界鏈接到計算機世界。這可以從蘇珊·卡爾 (Susan Kare)為第一臺麥金塔 (Macintosh) 設計的圖標和微軟 (Microsoft) 在 Windows Vista 和 7 中的擬物圖標設計中看到。

          當用戶界面從這種擬物風格轉變為 Windows 8 和 iOS 7 的“扁平”風格時,圖標設計也轉變為單色、線性風格。隨著 Android 12 的發布和谷歌新版設計系統—— Material You (或 Material Design 3) , 所有主要操作系統現在都使用這種風格。



          但是為什么各大設計系統都使用這種風格的圖標呢?設計師意識到圖標不僅僅是風格統一、為功能補充說明的輔助圖形——設計師制作的圖標等同于印刷師制作的字體。 這讓設計師意識到圖標對于用戶體驗來說和字體一樣重要。


          圖標的設計考慮與字體類似,并且經常出現在文本旁邊。
          — Material Design 3 指南

          Iconography [旨在] 與 San Francisco 系統字體無縫集成。
          — Apple 人機界面指南


          Apple 的 SF Symbols 就是最好的例子:它的圖標與系統字體具有相同的九種權重,并與文本的大寫高度對齊。這也意味著圖標可以遵從用戶對更粗的 UI 文本的可訪問性設置。


          Apple 的 SF Symbols 圖標集設計為與系統字體相同的九種權重。資料來源:蘋果



          它們還與系統字體的大寫高度對齊,以更好地補充文本。資料來源:蘋果



          Uber 的設計團隊也繪制了字體圖標來完善他們的 UI 字體 Uber Move,設置了三種不同的強調程度。


          資料來源:優步



          字體圖標旨在模仿書寫系統

          因此,為什么字體圖標是單色的并用輪廓繪制的原因就很清楚了:它們不是模仿物理對象,而是模仿我們的書寫系統?,F代字母,尤其是拉丁字母,基本上是由線條而不是填充形狀組成的。他們從類似物理對象(如埃及象形文字)的象形文字到更抽象的物理對象表示進行了類似的轉變。例如,你不需要畫一只鳥來談論一只鳥;您只需寫一組表示“鳥”的字母或符號即可。

          通過設計類似于字體的圖標,設計師認識到圖標是向用戶傳達信息的重要媒介。圖標可以打破語言障礙,而文本對于那些不熟悉圖標的人來說仍然是必不可少的。將兩者設計為看起來相似可以減少在閱讀文本旁邊的圖標時的認知負擔。

          默認為字體圖標的另一個好處是填充的圖標現在可用于表示狀態或強調,如粗體文本。例如,Material Design 3 中的“活動狀態用填充圖標表示” ,Apple 在他們的人機界面指南中建議“使用填充變體來表示選擇”或“賦予符號更多視覺強調” 。Twitter 2021 年的重新設計更進一步,活動頁面僅通過填充圖標和粗體文本進行區分,沒有任何顏色變化。


          Twitter 僅使用填充圖標和粗體文本來區分當前頁面。陪審團仍然不確定這是否足夠容易訪問。



          未來不一定能夠被準確預測,但是看看字體系統的歷史,已經有了明確的關于什么圖形代表什么意思的規范:符號“a”總是表示“a”,字母“ant”表示螞蟻。這些符號的繪制方式仍然存在差異(大寫字母 A 可以有襯線或沒有襯線),但它們在不同字體中的外觀基本相同。

          圖標似乎也朝著這個方向發展——上面的“添加文件夾”圖標在蘋果、谷歌和微軟的圖標集上具基本相同的設計:一個帶有“+”符號的文件夾。隨著圖標在 GUI 中變得越來越普遍,用戶對于什么符號代表什么意思的認知越來越趨同,就像字體一樣。



          如何才能使用字體圖標?在您的應用程序中使用圖標時,您應該使用使用您正在使用的字體設計的圖標集:如果您使用的是系統字體,這很簡單,現在系統字體都具有系統圖標字體。但是,如果您使用另一種 UI 字體,則可能沒有專門為該字體設計的圖標集。使用普通的線性圖標集就足夠了,例如開源Feather 圖標Iconic.app「1」。如果你像我們一樣使用 Material 圖標,你可以輕松切換到字體圖標。(似乎 Google 現在已將此樣式作為 Material Design 3 的默認樣式。)


          基于壁紙的個性化

          個性化正在成為 UI 設計中越來越重要的元素。雖然自 20 世紀 90 年代以來就存在自定義壁紙和主題,但設計人員現在正在尋找更多方法來個性化整個系統的 UI,主要是用戶選擇的壁紙。谷歌的 Material Design 博客說得最好:“用戶在物理和數字世界中使用個性化的圖像定制他們的桌面,并提供舒適和快樂?!?nbsp;壁紙是用戶首先看到的東西,并作為 UI 的背景。因此,讓 UI 的其余部分適應此元素是輕而易舉的事。



          將壁紙融入 UI 的技術已經存在一段時間了,從 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜單到 Windows Vista 中的半透明窗口標題欄和 7 的 Aero Glass 主題。眾所周知,iOS 7 為其 UI 的許多部分帶來了模糊的背景,整個屏幕(如通知中心和控制中心)都使用了可以透出用戶壁紙的毛玻璃效果。

          最近,墻紙開始影響幾乎整個 UI。當 Apple 在 macOS Mojave 中引入暗模式時,他們在基于壁紙的窗口背景中加入了一種色調,稱為桌面色調。根據人機界面指南,它“幫助窗口與其周圍的內容更和諧地融合在一起?!?



          后來他們在 Big Sur 的主要重新設計中擴展了這一點,將桌面著色也應用于光照模式:



          Windows 11 在其 Mica material 設計系統中引入了類似的元素,他們的設計指南將其描述為“一種不透明的材料,它結合了用戶的主題和桌面壁紙,以創建其高度個性化的外觀?!?nbsp;它還使用此色調作為當前活動窗口的標志。

          將它提升到一個新的水平是 Android 12 中的 Material You,它為應用程序的背景、按鈕和其他控件的明亮強調色以及更中性的文本顏色著色。整個調色板由每個用戶的獨特壁紙生成。

          這是他們新設計理念的一個關鍵元素,“如果形式跟隨感覺,而不是形式跟隨功能呢?” 這是對 UI 設計現狀的徹底拒絕,它尋求一種“通用”設計,具有技術上最先進的界面來滿足用戶需求。看看其他人是否效仿這種哲學會很有趣。



          Material Design 構建了一個顏色系統

          Material Design 團隊在他們的公告中遺漏的是他們如何做到了這一點,尤其是因為他們說他們“必須找到一種方法,讓任何顏色組合都具有可訪問的對比度 [...],而無需對每一種顏色進行測試。”深入了解 GitHub 上最近發布的Material color 實用程序存儲庫,揭開所有謎團:

          1. Material 團隊基于CAM16CIELAB(或 LAB)顏色外觀模型構建了自己的顏色系統:“色調、色度、色調”或“HCT” 。CAM16 是 LAB 的繼任者,旨在匹配人類對顏色的感知方式。

          2. 這些模型的關鍵是“色調”或 L* 值,它描述了顏色的感知亮度或亮度,L* 值 0 表示黑色,100 表示白色。這在創建可訪問的調色板時非常有用,可確保顏色根據感知亮度具有足夠的對比度。

          3. 在網絡上,WCAG 2 指南規定正文的最小對比度為 4.5:1。直接使用感知亮度作為描述顏色的值使這變得更加直接,正如材料團隊解釋的那樣:“與對比度不同,測量 L* 中的對比度是線性的,并且計算簡單 [...] 50 的差異保證了對比度比率 >= 4.5?!?

          4. 有了這些知識,剩下的就是生成具有不同色調或 L* 值的顏色調色板,并對其應用任何色調。然后為 UI 元素使用足夠對比的對。例如,一個按鈕可以有一個 L* = 40 的背景色和白色文本 (L* = 100),它很容易通過最低對比度要求(L* 差異 > 50)。




          我們其他人的 LCH

          這是一種輕松生成可訪問顏色的強大技術,但它不需要材質顏色實用程序。LAB 可以表示為 LCH(亮度、色度、色調),類似于 Material 的 HCT,其中 L 值可以用來計算對比度。(這比現有的 HSL 等表示更好,即使亮度相同,HSL 的感知亮度也會有所不同。)您可以在本文中了解有關 LCH 的更多信息。

          (此外,LCH 正在作為 CSS Color Level 4 的 一部分進入 Web 標準!因此您可以 lch (40% 44 49) 在 CSS 中編寫而無需將其轉換為 HSL 或 RGB,但目前僅在 Safari 中支持。Lea Verou,他編寫了上面鏈接的文章是 W3C CSS 工作組的一部分,正在開發這個非常標準。)

          因此,您只需要一個起始顏色,將其轉換為 LCH,然后修改 L 值以制作調色板。然后使用一對亮度差為 50 或更多的顏色,以確保可獲得的對比度。

          我們可以在下面的材質顏色系統中看到這種技術是如何使用的:調色板中的色調與 LCH 亮度值相匹配。(他們還修改色度(類似于飽和度)和色調略微跨色調。)我制作了一個小型網絡應用程序,顯示由材料顏色實用程序生成的調色板,以獲得下面的 LCH 值。



          在 Material 的 HCT 之前,LyftStripe的設計團隊探索了同樣的問題,Stripe 也最終使用了 LCH。我已經將他們的兩個探索聯系起來,這是極好的閱讀。


          我怎樣才能做到這一點?

          有一些工具可以在 LCH 之間進行轉換:



          我使用這種技術為Rowy添加主題,允許用戶選擇自己的強調色,同時保持可訪問性并為關鍵 UI 元素著色。源代碼具有我使用的確切 LCH 值。



          圓角很和諧

          當你想要設計一個帶圓角的“卡片套卡片” UI 時,內部的卡片應該具有較小的半徑,區別在于間距的大小。如果使兩者的角半徑相等,則內部卡片看起來不合適。這種技術在數字設計中已經有一段時間了,甚至是 CSS3 規范的一部分。



          這也存在于硬件設計中:屏幕的圓角與iPad Pro和 iPhone X 設計上的設備框架相匹配。在帶有圓形屏幕的 iPhone 上,底座與屏幕的曲率相匹配——Apple 甚至在軟件中提供了精確的點大小。您還可以在視頻播放器中看到與屏幕曲率匹配的其他元素。



          奇怪的是,這個原則不適用于使用單個圓角半徑的 UI 元素。在 Material Design 2 中,對話框和內部按鈕的圓角半徑都是 4dp,盡管它們之間有 8dp間隙。macOS 在優勝美地時代的設計中類似,Windows 10 幾乎所有 UI 元素都使用方角。

          但是,對于 Big Sur 和 Windows 11,通過增加較大 UI 元素的角半徑來近似這種效果。在 macOS 中,按鈕的圓角半徑現在為 5pt,對話框窗口的圓角半徑為 10pt,而且它們都使用“平滑角”來匹配 Apple 硬件的角。與此同時,Windows 11 以圓角以前的尖角而聞名,按鈕為 4 像素,窗口為 8 像素。



          總體而言,用戶界面似乎也變得更加圓潤:


          • Big Sur 增加了圓角半徑,使用了平滑的圓角,看起來更圓潤;

          • iOS 15 引入了帶有全圓角的按鈕樣式;

          • Windows 11 移除了大多數 UI 元素上的尖角;和

          • 與之前所有版本的 Material Design 形成鮮明對比的是,Android 12 增加了對話框導航抽屜和完全圓角按鈕的半徑。


          我怎樣才能做到這一點?


          將最小的 UI 元素設置為某個基本圓角半徑,然后將較大的包含元素(如對話框)設置為更大的圓角半徑。嘗試使它們與較小元素之間的距離成比例,或將較小的角半徑加倍以進行簡化。這是它在我們的應用程序中的外觀,角半徑加倍:



          OpenType可變字體

          最初開發字體時,它們是用金屬蝕刻的物理設計,具有固定的字體大小。當排版師為不同的尺寸設計相同的字體時,他們通過改變間距和比例等方面來將設計修改為最佳:這被稱為光學尺寸。您可以在本文中了解有關光學尺寸的更多信息。

          可變字體是一種基于 OpenType 的新字體格式,允許設計人員自定義字體設計的特定“變化軸”(或變量),例如非固定粗細、傾斜和光學尺寸。您可以在這個優秀的可變字體入門 中了解有關可變字體的更多信息,它使用Roboto Flex,這是谷歌 Roboto 字體的可變字體擴展。



          2021 年,所有主要操作系統現在都使用這種可變字體技術來實現 UI 排版中的光學大?。?


          • Apple 的系統字體 San Francisco于 2015年發布具有兩種光學尺寸:“顯示”適用于 20 磅及更大的尺寸,“文本”適用于所有更小的尺寸。2020 年,Apple 將這些字體發布為單一可變字體 SF Pro,以光學尺寸作為變化軸。Apple 的系統圖標 SF Symbols也使用可變字體技術

          • 對于 Windows 11,微軟將其系統字體 Segoe UI 重新設計為Segoe UI Variable,具有自己的光學大小軸。

          • 作為 Material Design 3 的一部分,Google 引入了GS Text 和 GS Variable,這是其企業字體 Google Sans 的演變。


          另外值得注意的是:這些字體都是不同風格的無襯線字體。舊金山是新怪誕的,Segoe是人文主義者,而Google Sans是幾何的。

          我怎樣才能做到這一點?

          可變字體是一項相對較新的技術,生產它們的成本很高,所以資源沒有那么多,尤其是在免費和開源領域。到目前為止,我發現的唯一具有光學尺寸的開源可變字體是Roboto Flex,但它似乎還沒有完成。Rasmus Andersson 被廣泛使用的 Inter 字體正在進行 OpenType 的 Bata測試。同時,為突出的標題使用更具表現力的字體可以提升您的設計。對于Rowy,我在小文本中使用 Inter 作為字體,在品牌表達的標題中使用 Space Grotesk。



          專注于內容

          扁平化設計已經存在了十多年,它的主要目標是通過剝離 UI 元素的雜亂和裝飾來專注于內容。在iOS的15設計指南狀態,“明快,漂亮的界面幫助用戶了解內容以及互動。”

          最新的操作系統版本通過更少的層級來迭代這個概念。導航欄在iOS 15Android 12 中是透明的,并在您滾動之前融入背景。



          在桌面上,macOS Big Sur 混合了標題欄和工具欄,直到您滾動或懸停在欄上幾秒鐘。Windows 11 中的一些應用程序根本不區分標題欄,而是將內容放在一個獨特的卡片式層中。




          這些元素都實現了相同的目標:減少周圍的視覺混亂并提升內容的視覺突出度。


          我怎樣才能做到這一點?


          如果您有一個??吭谶吘壍膶Ш綑冢堅诓恍枰獏^分時將其混合到背景中,例如當用戶尚未滾動時。如果您有主要內容,請將其放置在與背景不同的微妙層中。我們使用了一個 React UI 庫 MUI,它使我們可以輕松實現導航欄僅在滾動時區分的效果



          插入一切

          同樣,更多的 UI 元素被插入,不再占據其容器的整個寬度。當 iPhone X 引入屏幕上的主頁指示器代替主頁按鈕時,Apple 更改了他們的指導方針,規定帶有圓角的嵌入式按鈕,避開iOS 7 中引入的全角按鈕。許多其他固定到的元素的最佳實踐已更改屏幕底部適應新的 iPhone 設計。



          在 iOS 15 中,Apple 正在更多應用程序(如“設置”和“郵件”)中插入“表格視圖”。這似乎是為了應對 iPhone 屏幕尺寸不斷增長的情況,指南指出,“在緊湊的環境中,插入的分組表格可能會導致文本換行,尤其是在內容本地化時。”

          在 macOS Big Sur 中,他們將此設計擴展到郵件中的列表,與iPadOS 設計一致。它也出現在整個系統的菜單中,包括菜單欄。請注意,點擊目標延伸到菜單的邊緣,就像之前的全角設計一樣。Windows 11 在其菜單和導航項中共享相同的樣式。Android 12 的系統 UI 和應用程序通常也遵循這種風格。

          這種風格可以提高可訪問性,因為元素和它們的容器之間的分離現在擴展到所有四個方面,但我還沒有發現任何支持這一點的研究。當搭配和諧的圓角時,它可以使菜單看起來更現代。



          超越顏色的狀態變化

          設計師們正在添加更多的方式來顯示狀態,而不依賴于顏色,這對于色盲的人來說是無法實現的。以下是我注意到的一些例子:

          • Spotify 在 shuffle 和 repeat 按鈕下方添加了點,而不是在 2017 年僅僅依靠改變它們的顏色。

          • Material Design 3 顯示一個藥丸狀指示器,并在導航欄中為活動頁面使用填充圖標。

          • Windows 11 向列表和導航窗格中的選定項目添加了一致、獨特的行。



          這決定了重新設計Rowy 的切換按鈕:



          以及標準的開關設計


          在 Android 12 中,開關現在在主要操作系統中具有相同的基本設計。這使用戶可以更輕松地在這些平臺之間切換并減少認知負擔。

          UI設計走向何方?

          我在所有這些設計決策中注意到的首要主題是設計師將用戶界面設計置于透視之中。他們敏銳地意識到數字界面在哪些方面適合人類體驗并與物理世界互動。


          • 輪廓圖標模仿文本的融合認識到圖標在通信中的重要性。

          • 越來越個性化的界面元素——尤其是你所采用的材料方向——承認人們喜歡用自己的方式制作東西,包括他們每天使用的技術。

          • 和諧的圓角和插入元素的靈感來自實物和工業設計,因此我們的軟件與硬件更緊密地匹配。

          • 使用具有光學尺寸的可變字體可以追溯到排版的起源,并且與顏色以外的差異化元素一起,它們提高了所有人的可用性,尤其是殘障人士。

          • 更小的事情也有幫助:減少視覺混亂以提升內容使用戶能夠專注于他們想做的事情。并且使用標準的開關設計消除了確定 UI 元素功能所需的任何認知負擔。


          這種思維背后的UI設計使我們很好地起來為下一代對AR / VR計算為中心的虛擬實境,在虛擬實境一經驗將不得不回答他們是如何改善人類的經驗和交互與物理世界。設計人員已經在研究如何使設計系統適應這種變化??纯瓷厦娴臎Q定,應用色彩科學(Material 的 HCT 考慮到觀看條件)和提升內容的插入元素有助于這些 UI 元素從 2D 世界過渡到 3D 元世界。

          文章來源:優設 作者:Bearv5 

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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