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

          首頁

          藍湖產品經理:產品設計協作的前世今生

          seo達人


          圖片

           

          設計協作的發展歷程

          回顧生產方式的發展歷史,我們可以窺探到團隊協作的變化。青銅器時代是以人力為主的作坊式手工生產。到 18 世紀 60 年代的第一次工業革命,機器生產逐漸代替人力生產。再到一戰后,美國人福特(Henry Ford)和通用汽車的斯隆(Alfred Solon),將歐洲人創造的技藝性生產方式改為流水線、大批量生產方式,使制造業發生革命性變化。

          圖片

          從發展歷程看出,不同時代基于生產目標,會發展出相應的生產工具和協作方式來解決團隊的生產效率和質量問題。

          著眼當下,現代互聯網科技高速發展,軟件生產團隊隨之快速擴大。根據艾瑞網2021年《中國協同辦公市場研究報告》顯示,2020 年中國的協同市場增速達到 43.5%。市場上出現了數以萬計的協同產品希望解決團隊中的協作效率、項目管理等問題。

          在產研協作流程中,和設計師關系更加密切的設計協作發展如何?

          在這篇文章中,通過觀察設計工具的變化,我分別從生產創作、設計評審、資源管理三個維度來分析其發展歷程。

          圖片

          f

          第一階段:通用單體工具 —— Photoshop / Adobe Illustrator

          這個階段互聯網剛剛起步,出現了用于完成精細化圖像設計的工具。在 1990 年 2 月,Photoshop 的 1.0 版本正式發布。Photoshop 是一款位圖編輯軟件,主要處理以像素所構成的數字圖像。因其豐富強大的圖像編輯繪制功能,當時被廣泛應用于各行各業,如早期 PC 端網頁的 UI 設計、門戶網站運營圖設計、廣告海報設計、照片后期處理等。

          而 Photoshop 的兄弟產品 Adobe Illustrator 則是一款矢量圖形設計軟件。相比于 Photoshop,它不依賴于圖像的分辨率,無論顯示器大小如何,矢量圖都不會降低質量,非常適合創建基本的圖形,如 Logo 的設計、字體設計等。

          當 Photoshop 和 Adobe Illustrator 被廣泛的應用時也暴露出明顯的體驗問題。如,設計師交付時需要手動標注和切圖。線下設計評審的方式,需要預定會議室、協調參會人時間,效率極低。還有一種常見評審場景,幾位同學圍著一位設計師的電腦屏幕發表意見。這樣雖然信息傳遞很直接,但也嚴重影響了設計師的工作體驗。

          隨著團隊和項目的發展,設計產出物越來越多,團隊需要將其沉淀消費。而在 Adobe 時代,創作工具和存儲工具的相互獨立,且多次更新需要多次上傳。割裂的工具使團隊資源不便管理且難以再利用。

          第一階段的創作、評審、管理資源的效率提升空間很大,隨著互聯網的發展上述問題影響范圍也隨之擴大。

          第二階段:細分垂直領域的設計工具  —— Sketch,Zeplin

          2010 年后大而全的工具已經無法滿足設計生產需求,針對 UI 領域垂直化工具開始替代傳統設計工具,出現了細分垂直領域的設計工具 Sketch,Zeplin。

          首先在生產創作方面,Sketch 相比 Photoshop 體量更小、占用內存更少、響應速度更快,這些特點讓設計師們逐漸從 Photoshop 切換到 Sketch。將 Sketch 創作的設計稿上傳到 Zeplin,可以省去手動標注切圖的工作,這對設計師生產力的釋放無疑是巨大的。不過,Zeplin 本地安裝的方式以及操作流暢度等問題,依然阻礙團隊協作效率的提升。

          第三階段:多人在線實時協作工具 —— Figma,MasterGo

          到第三階段,互聯網企業規模繼續擴大,去中心化的組織結構要求工具不再受平臺和系統限制,以 Figma、MasterGo 為標桿的在線多人實時協作工具應運而生。(下文以 MasterGo 為代表進行闡述。)

          MasterGo 通過將工具云端化,把剛剛我們談到的生產創作、評審、資源管理融合。對于設計師而言,在線創作后只需要生成一個分享鏈接,團隊成員即可獲取到最新設計稿,節省之前反復修改上傳操作;不再需要手動標注切圖,這些功能對于設計生產力釋放無疑是巨大的。

          同時,MasterGo 相比 Sketch 更輕量、響應更快,這也是其獲得更多設計師親睞的原因。對于團隊,設計評審不再是一件繁瑣耗時的工作,評審人可以根據自己的安排隨時在線評審,提出修改意見。

          在線的方式,保證了項目信息的互通性,每位成員得到的信息是一致的,最新的,打破了團隊成員之間存在的信息壁壘。

          第四階段:產研協同平臺 —— 藍湖

          除了生產方式的重大變革,隨著團隊角色和分工進一步細化,產研協作流程的逐漸規范,僅靠優秀的生產工具已經遠遠無法滿足團隊的需求。更需要一款能夠產品/設計的生產、協作、任務和資源管理整個產研流程串聯的一站式的平臺化工具,來提升團隊協作的效率。
          藍湖目前集中在設計協作環節提效,未來會以設計協作為原點逐漸向產品/設計創作、實時協作及研發生產的全流程輻射,形成一站式產研協同平臺。

           

          國內產研協作的痛點問題

          目前國內產研團隊的協作模型是怎樣的呢?根據調研,大部分團隊處于瀑布式開發或敏捷式開發方式。

          產品經理寫完需求文檔分享到團隊內部溝通群中,團隊成員在 IM 中提出修改意見,或者線下會議評審。產品文檔定稿后,設計師根據產品文檔輸出設計稿,并進行設計評審。之后進入研發階段,研發完成后進行上線前驗收,最后灰度上線。

          圖片

          在這樣的產研流程中,存在非常明顯的幾點問題:

          圖片

          1、項目過程文件割裂,溝通信息流轉失真

          團隊產品文檔/設計稿分散在不同平臺,像一個個信息孤島,割裂的形態成為團隊成員間信息互通和項目信息流轉的天然障礙。比如,研發同學在查看一個項目的產品文檔、設計稿、項目進度時,需要分別進入到不同平臺,操作成本很高。尤其在評審時,大家在 IM 平臺上階段性的瞬時溝通,你一句我一句,使整個溝通信息難以記錄,且信息極易失真。

          2、產品文檔設計圖評審體驗差

          如今,雖然線上評審的形式已經逐漸被大家接受,但依然有很多團隊采用線下評審的方式。線下評審雖然可以直接接受對方的信息甚至情緒,但協調多方人員時間、記錄跟蹤評審意見,追溯文檔修改都影響團隊協作效率。

          3、低效的手動標注切圖

          以往低效的手動標注切圖的方式,一旦漏標或錯標,不僅會消耗大量人力,還會帶來反復確認修改的額外工作。

           

          一站式產研協作云平臺

          藍湖作為一站式產研協作云平臺,是如何解決這些問題呢?

          圖片

          藍湖最初被大家認可是因為高效的自動標注切圖功能。不過,除了大家直接使用到的工具屬性外,藍湖更重要的是作為工具背后的高效協作和管理的理念。

          1、產研團隊資源整合

          當前藍湖集中解決產品文檔與設計稿的整合,即產品經理可以上傳 Axure、word、PDF、PPT 等文檔到藍湖項目中,設計師也可以把項目的 Sketch 、Photoshop、Xd 設計稿上傳,這樣每個團隊成員可以在藍湖一個平臺上基于輸出文檔和設計稿無障礙的溝通協作。

          圖片

          更重要的是,項目過程中產生的設計圖/產品文檔等組織過程資產對于團隊的成長是極其重要的。相信如果有做團隊管理的朋友一定深有感觸,做好團隊的資產管理,不僅局限在資產的存儲和分類,更要做好全生命周期的管理,資產的生產、流轉和消費每一步沉淀價值都是巨大的。

          2、產品文檔、設計文件在線協作評審

          設計師將 Sketch 、Photoshop、Xd 的設計稿上傳到藍湖后,團隊成員可以在線評審,減少線下低效會議。同時線上評審可以精確到設計稿的具體某一點提出意見,信息傳遞更精準,評審環節更高效也更友好。

          圖片

          有時評審后上傳的新設計稿差異很小,只是加了一條分割線,研發同學很難發現。為了幫助研發同學快速分辨設計圖更新點,我們上線了歷史版本對比功能,通過圖像算法的像素級比對能力,自動標記版本間的差異,更新點一目了然。

          3、設計稿自動標注切圖,自動生成代碼

          圖片

          調查顯示,目前藍湖能夠幫助團隊節省每周 2 個工作日的開發時間。但藍湖為產研團隊賦能的能力遠遠不止于此?;谠O計圖一鍵生成整頁代碼功能,可以節省 30% 的開發時間,大幅提升研發效率。并且生成的代碼高度還原了設計效果,設計師不再需要反復走查驗收。

           

          協作與藍湖的未來

          未來的協作趨勢是融合的,藍湖也在持續探索最佳的設計協作方式,不斷打破工具的邊界,進一步解決產品研發協作效率。

          圖片

          藍湖未來不僅會在設計協作每個節點滲透更深入,提供更多最佳實踐。同時會在文檔協作、項目管理、設計創作等多個環節提供解決方案。歡迎大家持續關注藍湖~

          期待我的分享能對你有幫助,更期待我們能在藍湖相遇。

           

          原文地址:藍湖產品設計協作(公眾號)

          作者:藍湖產品設計協作

           

          轉載請注明:學UI網》藍湖產品經理:產品設計協作的前世今生

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

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

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

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



          工作經驗|設計資產庫中的組件,應該如何命名?

          seo達人


          設計系統的基礎工作之一就是給組件命名。這個工作看上去并不起眼,似乎還有些機械重復,但實際上卻需要具備嚴謹的邏輯和對細節的錙銖必較。

          組件的命名方式并不唯一,你可以按照你對組件構成的理解,來規劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例,呈現出組件的命名邏輯:

          圖片

          可以看到,我們在命名時分了 5 個層級,依次是類別,元件,模式,等級,狀態。

           

          1、類別

          類別指的是組件最本質的作用和寬泛的應用場景。通常我們會分為:通用、導航、數據錄入、數據展示、反饋等幾個類別,類別以及其中的部分組件如下圖所示:

          圖片

           

          2、元件 / 組件

          元件即具體的、單一的組件,比如 “導航” 這個類別下就包括了固釘(返回頂部)、面包屑、下拉菜單、導航菜單、分頁、頁頭、步驟條等幾個組件:

          圖片

           

          3、模式

          目前的模式通常會分成暗黑模式(Dark Mode)淺色模式(Light Mode)兩種,但隨著對用戶體驗的不斷重視,未來也有可能會出現 “護眼模式”、“色盲模式”、“高對比度模式” 等模式。

           

          4、等級

          等級的分類和數量由組件的基本功能和在產品的具體需求決定,有些組件比如 “分頁器”、“面包屑” 通常只有一個等級,在命名的時候就可以不體現;而有些組件如 “按鈕”、“標簽頁” 、“導航” 則會有多個等級:

          圖片

           

          5、狀態

          狀態即組件在交互時的變化樣式,通常包括普通(默認)、懸?。☉彝#?、點擊、失效(禁用)等,根據不同組件的特性,也可能會包括危險提示、聚焦等狀態。

          根據上述這個規則,我們就可以對所有組件進行有規律的命名,下圖中組件懸停狀態的命名為:Navigation/Sidemenu/Light/Primary/hover

          圖片

          圖片

           

          組件命名的注意事項

          在給組件命名的時要注意以下幾點:1. 含義清晰

          組件的命名能夠清晰的體現組件的性質和狀態,不要僅僅使用數字 1、2、3 來代替狀態。舉個例子,你的產品品牌色主色名稱的結尾應該是:“……brand/primary”,而不是 “brand/blue1”,或 “brand/ #E60326”。

          除了色板,我們對于組件也是要盡量清晰的描述組件的類別和狀態,而不是它的外觀。比如按鈕在“懸停狀態”的時候是淺藍色,你命名到 “懸?!?nbsp;的狀態就可以了,這時你的按鈕名稱后半部分應為:“……/button/primary/hover”,不需要提及按鈕的顏色變化。

          這種命名結構可以最大程度上確保組件與系統一起發展,如果當主按鈕的顏色發生變化,你也不必在整個系統和組件中更新其名稱。

           

          2. 遵守邏輯

          命名結構要有邏輯,名稱根據一定的邏輯結構進行推導,以便于當組件有新增、或組件庫有革新時可以順暢的添加和修改。

          由于不同組件的等級和狀態千差萬別,建議你也可以先梳理出上文圖中的命名邏輯層級表,按照表單進行工作,簡單清晰,也方便團隊的其他設計師一同協作。

           

          3. 良好習慣

          養成良好的工作習慣,建立標準的工作流程和規范,包括:

          • 用斜杠 “/” 分隔單詞
          • 不要隨意添加空格
          • 僅使用小寫字母
          • 盡量使用英文單詞
          • 修改內容后及時同步給團隊等等

           

          在公眾號后臺回復 “組件”,會看到更多與之相關的干貨講解。如果你還有其他與組件相關的問題,歡迎向我提問。

           

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

          作者:元堯

          轉載請注明:學UI網》工作經驗|設計資產庫中的組件,應該如何命名?

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

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

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

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



          UI設計思路受限?來試試這5個界面設計通用技巧

          周周

          做設計是很難的。不僅要創建解決問題的設計,而且理想情況下,它們還應該使人們開心并感到愉悅。設計是一種技能,它是一種手工藝品,而且這種手工藝品做起來并非很容易。


          設計師如何高效溝通需求

          周周

          “有效的溝通取決于溝通者對議題的充分掌握,而非措辭甜美。”——英特爾創始人葛洛夫

          如何快速制作3D樣機-作品包裝神器

          seo達人

           初識操作界面 

          先來看一眼這款神器的操作界面吧,無需安裝,在線版更方便。軟件界面簡單易操作,基本沒有什么學習成本。(溫馨提示:如果英語不好的同學可以使用谷歌瀏覽器自帶翻譯)

          圖片

           

           

           

           樣機模型選擇 

          軟件里面為大家存儲了手機、筆記本電腦、臺式電腦等基礎模型供選擇,可以獨立使用,也可以疊加選擇到畫板中進行組合創造。

          圖片

           

          除了樣機模型以外,也提供了一些裝飾元素,比如一些操作手勢和設備零部件等,方便設計師進行自由創造。

          圖片

           

          當然,還有更多各式各樣的模版,傾斜的組合模版、各種顏色搭配的組合模版、各種手勢的組合模版等等。方便一些基礎薄弱的同學可以直接選擇使用,也是非常的便利。

          圖片

           

           

           強大的操作界面 

          了解了各類預存的資源后,黑馬哥帶大家看一下軟件的操作界面。非常的簡單易懂,基本一看就會。

          當我們選擇好基礎樣機模型之后,可以通過左側操作欄調整樣機的顏色、位置、透視角度、大小等。點擊上傳可以選擇自己設計好的界面替換到模型中,畫質還是很高清的。

          圖片

           

          下方就有類似于圖層的操作,可以管理多個組合樣機模型,復制、隱藏、刪除等操作。

          圖片

           

          在畫板底部也有一些常規的功能操作,可以進行調節。比如畫板的背景色、視角、陰影設置等。

          圖片

           

          在畫板右側可以對整體的燈光進行設置,滿足我們環境渲染的需要。調節的方法也非常簡單,大家可以動手嘗試一下。

          圖片

           

          當然,如果覺得通過各種參數調節透視比較麻煩,你也可以像操作 3D 軟件一樣,直接在畫板中操作 X、Y、Z 軸來隨心所欲的創造,是不是很酷呀!

          圖片

           

          好了,說了這么多相信大家能夠上手了,更多的功能操作就留給大家啦!希望這款神器可以帶給你作品包裝的新大陸,創造出自己滿意的設計效果。

          3D樣機神器網址:
          https://things.morflax.com/

          溫馨提示:僅作為學習交流,勿做他用。

           

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

          作者:黑馬青年

          轉載請注明:學UI網》如何快速制作3D樣機-作品包裝神器

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

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

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

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


          用動效創造可用性:動效設計的基本原理

          seo達人


          在用戶界面中,動效不僅僅是一種視覺裝飾,而是一種強大的力量,它可增強產品參與度并擴展設計交流的范圍。

          本文給大家介紹了十二項最基本的動效設計原理,這些都適合用于UX/UI設計項目中,是非常有用的運動原理,建議收藏反復食用。

           

          原理一:緩動 Easing

          緩動效果模擬了現實世界中對象隨時間加速或減速的方式,它適用于所有運動的元素。自然界中沒有東西是從一點呈線性地移動到另一點。現實中,物體在移動時往往會加速或減速。我們的大腦習慣于期待這種運動,因此在做動畫時,應利用此規律。自然的運動會讓用戶對你的應用感覺更舒適,從而產生更好的總體體驗。

          線性動畫

          沒有任何速度上的變化的的動畫稱為線性動畫,如坐標圖所示,運動的曲線成直線狀態。這種動畫效果往往顯得很僵硬,不自然,讓用戶覺得不協調。一般來說,應避免線性運動。

           

          緩出動畫

          運動的開頭速度很快,結尾處逐漸減速的動畫稱為緩出動畫。運動曲線呈拋物線狀態,緩出動畫最適合界面里面的動效,快速的入場給人反應很快的感覺。

           

          緩入動畫

          和緩出相反,緩入動畫是開頭慢結尾快,這就像自然落下的球體一樣,速度越來越快。但是,從交互的角度來看,緩入可能讓人感覺有點不自然,因為結尾很突然;在現實中移動的物體往往是減速,而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果,這會對網站或應用的響應速度給人的感覺產生負面影響。

           

          緩入緩出動畫

          把緩入和緩出曲線連接在一起,就是完整的緩入緩出動畫,它的運動過程可以想象一輛汽車從起步到停車的動作,可以實現比單純緩出更生動的效果。由于開頭慢、中間快和結尾慢,動畫將有更強的對比,會讓用戶感到愉悅。

          因此,緩動原理實際上是使動畫不再那么尖銳或生硬的過程。

           

          原理二:變形 Transformation

          變形是由一個形態變成另一個形態,這種形變是動畫里最引人注目的。通過元素形態的轉變,告知用戶元素的狀態或作用發生了改變。

          例如這個下載動畫,下載完成后變形為按鈕,其實是符合用戶預期的。這種無縫轉換,可以提高用戶的認知度,提

          升了動畫的連貫性。

          在動效中,利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的,通過物體運動的變形狀態就能很好的體現出來。

           

          原理三:克隆 Cloning

          當元素被克隆時,可表達出元素與元素之間的某種連續性。在此原理中,如何讓物體的出現和離開具有連續性、關系和過渡,是信息準確傳遞的關鍵。

          例如這個發布按鈕,點擊它會創建多個新對象,引導注意力,非常清晰的表達了他們之間的關系。

          還有這個運動健康頁面,在添加練習項目時,從主按鈕克隆生成一系列練習項目,選擇完成后原路返回。

           

          原理四:覆蓋 Overlay

          利用覆蓋原理能讓原本有限的空間得以延伸,用以顯示額外的可見元素,補償了用戶體驗中的單一統一視野或“客觀視圖”。覆蓋原理在UI設計中常用于列表橫滑,通過覆蓋,隱藏相關操作,以減少視覺上的干擾。

          在某種程度上,作為設計師,“層”的概念是顯而易見的,不言而喻。我們用層來設計,層的概念被深深地內化了。但是,我們必須小心區分“制作”和“使用”的過程。

          作為不斷參與“制作”過程的設計師,我們要非常熟悉我們正在設計的物體的所有部分(包括隱藏部分)。然而,作為用戶,那些不可見的部分是根據定義和實踐,在視覺和認知上隱藏的。

           

          原理五:偏移和延遲 Offset & Delay

          偏移和延遲原理是表明元素之間的層級與關系,在新元素入場時利用偏移和延遲讓信息或界面元素按照秩序進退場,定義對象關系和層次結構。

          在上面的示例中,浮動操作按鈕 (FAB) 轉換為頭部背景。數據圖表在時間的延遲下依次出現,暗示用戶這里的信息與其他元素之間的區別,吸引用戶注意力。

           

          原理六:遮罩 Masking

          遮罩是決定元素變化的結果是什么,通過暫時使對象顯示和隱藏,以連續無縫的方式轉換,保持了敘事流程的效果。雖然對象本身保持不變,但因為它有了邊界和位置,這兩個因素決定了對象是什么。

          例如這個轉動的咖啡杯,借助遮罩,通過改變logo的位置和吸管的朝向,造成杯子在自轉的假象。

          在上面的例子中,音樂封面改變了邊界形狀和位置,但沒有改變內容。轉換發生在用戶執行操作后激活,是相當巧妙的技巧。

           

          原理七:父子關系 Parenting

          父子關系是將界面元素關聯起來的重要原則,創建出空間和時間層次關系。它最適合作為“實時”互動,例如拖動列表順序時,其他信息會同步跟上。

          回想一下,很多元素屬性都可以創造這種聯動的繼承關系,例如不透明度、位置、旋轉、縮放、形狀、顏色等。

           

          原理八:數值變化 Value Change

          文本和數字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒有給它們帶來區別和嚴謹來評估它們在支持可用性方面的作用。

          數字和值表示現實中正在發生的事情,既可以發生在實時活動中,也可以發生在非實時活動中。它可能是時間、收入、速度、游戲得分等。當我們使用動態的數值變化時,它激活了一種“神經反饋”,用戶會覺得自己與這些數值有關聯的。如果這些值是靜態的,就感覺與現實的聯系會減少。

          數值的變化在各類金融理財和日歷APP中經常出現,數據的動態表達和交流可能會對數據的價值產生影響;如上圖中的數值的動態變化,讓用戶感知到自己可能有能力影響到數據,提升了參與活動的意愿。

           

          原理九:蒙層 Obscuration

          蒙層與原理四的覆蓋類似,只不過蒙層帶有透明屬性,它擋住了后面的信息,但又沒有全擋住。iOS中常見的毛玻璃效果就是如此,它讓用戶意識到正在操作的對象,還有另一個世界。拓展了Z軸的層次結構,補償用戶體驗中的單一視野。

           

          原理十:視差  Parallax

          當用戶滾動時,在視覺平面中創建空間層次結構。其目的是為了建立各元素的層級關系,移動速度更快的交互式元。對用戶來說顯得更接近,較慢的非交互式元素,會退回到背景顯得更遠,從而更好把內容和環境區分開來 。

          設計師可以利用時間本身來創建這些關系,告訴用戶界面中的哪些對象具有更高的優先級。用戶不僅認為界面對象現在具有超出視覺設計中確定的層次結構,而且現在可以利用這種層次結構,讓用戶意識到設計之前掌握用戶體驗內容。

           

          原理十一:多維 Dimensionality

          維度是將界面的元素多維化,使元素看起來像可翻轉的,可折疊的,浮動的??梢允共煌腢I元素實現無縫的過渡銜接,它通常以折紙維度、浮動維度和對象維度這三種方式來呈現。

          此外,維度原理克服了視覺平面中的分層悖論,其中缺乏深度的物體存在于同一平面上,但出現在其他物體的“前面”或“后面”。

          折紙維度可以被認為是“折疊”或“鉸鏈”的三維界面對象,它由多個元素組合成“折紙”結構,隱藏的物體在空間上仍然可以說是“存在”的,即使它們不可見。

          浮動維度為界面對象提供了空間起源和離開,使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實現的。

          對象維度會產生具有真實深度和形式的維度對象,可以看到,雖然在2D層,元素卻可以3D視角呈現真實的維度。

           

          原理十二:平移與縮放  Dolly & Zoom

          平移與縮放是電影概念,指的是與相機有關的對象的運動,以及畫面中圖像本身的大小從遠景平滑變化到特寫鏡頭(反之亦然)。

          在某些情況下,無法判斷對象是否正在縮放。可能是在在 3D 空間中向著相機移動,也許是相機在向對象移動,又或者是對象自身在放大縮小。以下三個示例說明了可能的情況。

          鏡頭平移:被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止,而被攝物體進行遠離或接近鏡頭的前后移動。

          鏡頭縮放:鏡頭與被攝物體在位置上保持靜止,而被攝物自身進行縮放。

          縮放:是指視角和對象都沒有在空間上移動,而是物體本身在縮放(或者我們的視野正在縮小,從而導致圖像放大),這向觀看者傳達了附加界面對象在其他對象或場景“內部”的信息。

          移動還可以結合維度原則,從而產生更多空間和深度體驗,并向用戶傳達當前視圖“前面”或“后面”的其他區域或內容??s放允許無縫轉換 – 實時和非實時 – 支持可用性。在創建空間心智模型時,Dolly & Zoom Principle 中采用的這種無縫性非常強大。

          以上,便是有關動效設計的十二條基本原理,希望能給你帶來一些啟發。

           

          參考資料

          https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn

          https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

           

          原文地址:站酷

          作者:印跡_

          轉載請注明:學UI網》用動效創造可用性:動效設計的基本原理

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

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

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

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


          設計師應該關注的用戶體驗設計模式

          鶴鶴

          我們在周圍的世界中看到了許多熟悉的設計模式。例如,大多數道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區使用不同的系統,司機將不得不為他們想要駕車經過的每個國家/地區學習新的駕駛模式——但這不切實際!

          UX 設計模式的工作原理類似。它們使用戶無需學習新系統即可熟悉瀏覽數字產品或網頁。

          什么是用戶體驗設計模式?

          UX 設計模式是用于構建用戶界面的常見構建塊。設計師使用 UX 設計模式作為可重用組件來解決常見的可用性問題。

          例如,我們經??吹降囊环N設計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。

          UX 設計模式如何改善用戶體驗

          設計模式為設計人員提供了構建塊以更快地創建用戶界面,但它們也增強了用戶體驗。

          UX 設計模式通常遵循用戶熟悉的通用設計標準,從而減少學習和瀏覽新產品或網站所需的時間和認知負擔。

          在《我們如何決定》一書中,作者喬納·萊勒 (Jonah Lehrer) 寫道,識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關的化學物質。當用戶體驗模式按預期工作時,多巴胺命中會增加。

          使用有效的UX 設計心理學技術的設計師,例如熟悉的 UI 設計模式,可以增強用戶體驗并使產品交互更加愉快。

          UX 和 UI 模式之間的差異

          大多數設計師交替使用UX 模式和UI 模式這兩個術語,因為區別很小,有很多重疊,并且可能會引起混淆!

          UX 模式:用戶流和導航的可重用模式——在社交媒體平臺或網站上無限或連續滾動。用戶認識到他們可以向下滾動以刷新頁面。

          UI 模式:用于視覺和交互設計的可重用模式——一個漢堡圖標。用戶知道漢堡包圖標將打開導航。

          何時以及如何應用設計模式

          知道何時使用設計模式對于產品設計和用戶體驗至關重要。設計人員必須僅在有明確的可用性原因時才使用設計模式。

          以下是識別用戶需求和應用設計模式的四步、以問題為中心的方法:

          查明問題——您可以通過分析和可用性測試的組合來識別問題。例如,您注意到在獲取客戶詳細信息時,您的產品注冊流程有很高的流失率。通過可用性測試,您了解到一個常見的痛點是注冊過程耗時太長——您的注冊表單要求填寫全名、電子郵件、年齡、性別、城市和手機號碼(其中許多細節與使用產品無關) 。

          通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設計庫,以找到常見的 UI 模式來解決您的問題?;氐轿覀兩厦娴睦?,您會發現競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄,從而簡化注冊流程。

          自定義設計模式——您必須自定義新的設計模式以匹配您的品牌和現有設計系統。對于我們的用戶注冊示例,此自定義可能包括調整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標簽和錯誤/成功消息將使用您的樣式指南中的顏色。

          測試您的設計模式——最后,您必須始終測試新的設計模式實現,以確保它們滿足可用性和品牌要求。

          上面的例子展示了可用性測試的重要性——識別和應用用戶界面設計模式以測試開始和結束。

          不要因為競爭對手有一個設計模式或者你認為這是正確的做法就添加一個設計模式。例如,您的網頁設計是否需要面包屑導航?對于電子商務,可能有必要讓用戶返回到產品類別或知道他們在結賬序列中的位置。但是,對于大多數其他網站,它只是添加了額外的數據點供用戶處理。

          UX 設計模式的常見示例

          設計模式分為六大類:

          A. 數據輸入輸出

          B. 內容結構

          C. 導航

          D. 社交媒體和分享

          E. 激勵

          F. 等級制度

          數據輸入和輸出

          數據輸入和輸出是最常見的用戶/產品交互之一。用戶輸入信息,系統返回數據或完成一個動作。

          一個很好的例子是許多網站和應用程序使用的日期選擇器。盡管它們看起來略有不同,但大多數日期選擇器顯示類似的布局和功能——標題中的月/年、星期幾和日期。

          當用戶單擊一個日期時,它會突出顯示以選擇。最后,有一個 CTA(有時是一個取消按鈕),用戶可以在完成并準備繼續時單擊。

          數據輸入和輸出的其他示例包括:

          a) 表單提交

          b) 成功/失敗消息

          c) 應用通知

          d) 進度條/步驟

          內容結構

          你有沒有注意到大多數界面使用類似的塊布局和圖像縮略圖?或者,管理界面的左側導航面板和右側的內容如何?

          使用這些熟悉的內容結構和 UI 模式可以幫助用戶快速瀏覽新的數字產品或網站。目標是最大限度地減少摩擦(例如學習新界面),以獲得無縫和愉快的用戶體驗。

          導航

          熟悉的 UI 模式可以幫助用戶輕松瀏覽網站或數字產品。桌面和移動界面有不同的導航模式。

          例如,主導航位于桌面網站或應用程序的標題中或左側。在移動應用程序中,主導航欄位于頁腳中,只需用拇指觸碰即可。

          無限或連續滾動是 Instagram 和 Pinterest 使用的典型導航設計模式。當用戶滾動時,系統會刷新以顯示更多內容。這種設計模式很熟悉并增強了用戶體驗,因為用戶不需要單擊下一步按鈕或分頁來查看更多內容。

          社交媒體與分享

          設計師可以使用多種社交媒體和共享設計模式,包括:

          a) 鏈接的品牌社交媒體圖標

          b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標

          c) 引言——用引號引用此人的姓名和形象

          這些熟悉的設計模式可幫助用戶找到社會認同,以建立對您的產品和品牌的信任。

          這些設計模式利用心理學,鼓勵用戶執行所需的操作。這里的目標是在用戶和產品之間建立聯系。

          激勵

          激勵 UX 模式利用設計心理學來鼓勵用戶執行任務和操作,從而創建用戶/產品關系。

          設計師鼓勵使用設計模式通過積極的反饋、認知、游戲化等來吸引用戶。

          例如,游戲化模式鼓勵用戶邀請朋友來獲得獎勵。UI 模式將通過 CTA 向用戶顯示他們當前的積分,以邀請更多朋友賺取更多。

          等級制度

          層次結構模式類似于內容結構,因為它們為用戶創造了即時的視覺熟悉度,以便快速瀏覽界面并知道如何完成所需的操作。

          博客的兩種常見層次結構模式包括標題和目錄。用戶可以滾動頁面以快速找到他們想要的內容或使用目錄跳轉到特定部分。

          面包屑是電子商務網站用來幫助用戶瀏覽產品頁面和結賬流程的另一種層次結構模式。

          總結

          UX設計模式是用戶體驗的重要組成部分,因為它們最大限度地減少了產品的學習曲線和人類認知負擔。設計師必須知道何時使用這些 UX 設計模式,而不僅僅是出于習慣或模仿競爭對手而實施它們。

          分析和可用性研究可幫助設計人員確定界面中缺少哪些 UX 模式,然后測試他們是否實施了正確的模式。

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

          文章來源:站酷 作者:對啊設計君
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          2022年標志設計趨勢:標志的未來

          鶴鶴

          2021年,標志設計師朝著更大膽、更具創新性的設計邁出了一大步。與平面設計趨勢類似,品牌推廣大量采用軟循環動畫和鮮艷的配色方案。它還開辟了實驗排版,鼓勵創造性思維重新審視標志設計。

          2022年的標志設計趨勢很可能會延續這一大趨勢,我們希望看到上述美學在全球范圍內得到重塑。您會看到設計師同樣選擇極簡主義和卡通標志、3D 和平面標志、花卉和文字標志。我們認為2021年是創作自由的一年。然而,看起來在2022年,我們將看到它真正的肆無忌憚。

          1) 簡單的幾何圖形和基本形狀

          2) 高大的標志

          3) 飽和顏色和漸變

          4) 象征主義和極簡主義代替現實主義

          5) 涂鴉和草圖

          6) 粗體字標標志

          7) 無襯線標志

          8) 花藝和微妙的裝飾

          9) 黑白標志

          10) 3D與平面樣式

          簡單的幾何圖形和基本形狀

          在2022年,擁有基于復雜圖形的標志幾乎會很少見。此類標志通常難以記住,客戶可能會很難發現在品牌與其圖形表示之間的聯系。對于尋求加強存在感和提高品牌知名度的大企業來說,這可能是一個巨大的問題。因此,公司傾向于拒絕此類標志,而傾向于使用一些基本的東西。

          基本的幾何形狀是各種三角形、圓形、正方形、點和線,它們使標志設計成為簡單的圖像。作為優化,建議設計師使用充滿活力或獨特的配色方案。或者相反,切換到黑白,將這種極簡效果發揮到極致。最后,還有負空間,這是另一種采用簡單幾何形狀并保持視覺趣味的好方法。

          高大的標志

          雖然2022年的大多數標志設計趨勢與我們兩年、三年或五年前曾經擁有的一切產生共鳴,但高大的標志就像一口新鮮空氣和創造力。反對過度使用的三角形、方形和圓形標志。正如我們從多個Behance項目中看到的那樣,它們的美學非常適合尋求領先的時尚公司、精品店、創意工作室和大品牌。

          高大的標志部分借鑒了裝飾藝術風格,它們特別喜歡優雅的垂直框架。高大的標志同樣具有波西米亞風美學和現代幾何元素。事實上,這種標志設計趨勢的根源并不那么重要。真正重要的是新的形狀讓設計師想出了新的標志創意,所以在這里我們希望他們以不同的方式處理字體和圖形元素。

          飽和顏色和漸變

          實踐表明,標志的顏色工作和色彩的選擇是一個非常個人化的故事,通常很難跟蹤全球趨勢或與特定顏色相關的任何標志趨勢。有人更喜歡黑白標志。有人會選擇現在特別流行的單色、裸色或大地色。然而,如果我們看看大品牌,我們將能夠在標志設計中使用生動、飽和的顏色來定義一個巨大的趨勢。

          對標志設計中顏色的興趣已經發展到這樣的程度,創作者不僅要增加飽和度,還要選擇純粹、生動的解決方案,同時盡可能地簡化標志。太多的細節和顏色會造成混亂的外觀,因此選擇其中一個至關重要——在極簡主義時代,選擇很明確。然而,我們不禁強調鮮艷的色彩很難處理——尤其是糖果色。它們可以使品牌標識看起來廉價甚至業余。因此,當您關注這一標志設計趨勢時,重要的是要取得平衡——否則您將面臨使用可疑標志的風險。

          象征主義和極簡主義代替現實主義

          有多種與簡化標志和極簡主義相關的標志趨勢——這可能是最能說明問題的。我們每個人都將標志創建為一件真正的藝術品。動物、花卉、神話和生物——在標志內,它們展示了精湛的技藝和對細節的迷人關注。誠然,這樣的標志確實看起來很引人注目,但從響應式設計的角度來看,它們失去了其他類型的標志。

          您可能還記得響應式標志,這個術語是在大約4年前引入的。這些是可以適應不同屏幕尺寸或其他媒體的標志。為此,設計人員可以刪除字標、簡化或隱藏標志。今天幾乎沒有人認為響應式標志是一種獨立的現象或趨勢。相反,響應性是標志的自然特征,象征主義和極簡主義的運動正好證明了這一點。

          涂鴉和草圖

          2022年,草圖和涂鴉將作為圖形設計趨勢回歸,因此它們作為單獨的標志設計趨勢出現。其復興的關鍵是人們對設計師個人品牌方法的興趣增加。顯然,沒有什么比以獨特風格繪制的快速草圖、卡通人物和形狀更好的了。

          因此,要為標志設計中的更多涂鴉以及企業品牌中草率的卡通標志和快速繪制的吉祥物做好準備。以快速和樸實的方式制作的手繪標志也受到歡迎,我們已經看到以這種方式書寫品牌名稱的項目和團隊。

          粗體字標標志

          如果我們考慮2021年的標志設計趨勢,粗體字標志將是最好的例子。于2020年底推出的實驗排版項目專注于不常見的幾何解決方案。難怪品牌和標志設計師不能忽視這種大規模的圖形設計創新——在這里,我們在標志設計方面有了一個全新的方向。

          許多跨國公司選擇字標標志。例如H&M、可口可樂、Zara、谷歌、Visa等品牌。然而,幾乎沒有人認真考慮使用實驗字體進行品牌重塑。這就是為什么此類文字商標標志主要在獨立工作室、小型企業、精品店、沙龍和個人創作者中傳播。也許,這些大膽標志的特征是其吸引力的另一個關鍵。您可以將它們視為那些知道要注意什么的鑒賞家的標志——或者那些想要感受品牌美學的人。

          無襯線標志

          雖然使用大膽的實驗排版并不是每個人的趨勢,但無襯線字體是每個人都知道和理解的。自從設計師拒絕花哨的腳本和襯線字體而支持無襯線字體以來,已經有一段時間了。但由于存在普遍趨勢,我們可以說它仍然是2021年的標志設計趨勢——順便說一下,這得到了我們上面寫的極簡主義和基本幾何形狀的流行的支持。

          拒絕花哨字體的動機非常簡單——使用無襯線字體要容易得多。使它們適應不同的屏幕和畫布尺寸并不復雜,因此它們更適合響應式標志。有趣的是,幾年前,我們觀察到了一個相反的過程:許多公司從無襯線字體切換到襯線字體,因為復古設計非常流行。今天,隨著復古狂熱慢慢釋放出來,健康的實用主義出現了,無襯線字體再次相關。

          花藝和微妙的裝飾

          我已經不知道設計師和產品創造者用極簡主義制作了一系列標志多少年了。與此同時,許多小企業繼續選擇和使用它們,所以這些標志不會退縮——就好像它們剛剛出現在市場上一樣。所以請放心,它們將與您共存數個季節,同時還會定期推出新款式,例如2022年風靡一時的Boho。

          也許,這種標志設計趨勢是最流行的。優雅的線條看起來令人著迷,因此使用它們的誘惑很大。2019年如此,2022年依舊如此。 事實上,這種微妙的視覺風格并不僅僅集中在花藝上。有很多日常用品:從家具到文具和衣服。重要的是這些標志模板是如何制作的!

          黑白標志

          隨著我們繼續從各個方面學習了解極簡主義,讓我們在這個市場中傳遞2022年的另一個自信趨勢:黑白標志。實際上,將黑白色調視為一種趨勢是很奇怪的,因為它是一種經典的解決方案,并且它的存在與時間和風格的變化無關。所以,我們需要讓您注意到對此類標志的興趣是日益增加的,其中最重要的例子是GoDaddy的重新設計之一。他們逐漸簡化了他們的標志,現在他們似乎到達了最后階段——帶有帶有無襯線字體和保留標志的黑白標志。

          黑白標志的最佳之處在于它們令人難以置信的風格靈活性,這使得它們在品牌設計師中流行起來。它們完美地適應了品牌的審美,因此可以將它們用于字體、裝飾元素和幾何形狀的各種實驗。極簡主義、創造性的排版、花卉、象征主義、原始幾何——一切都與黑白標志相得益彰。

          3D與平面樣式

          3D是2021年最有前途的圖形設計趨勢之一。隨著技術的發展,這種圖形變得如此龐大,以至于我們永遠無法預見。甚至可以在直觀的在Spline或 Procreate的最新更新中進行高質量3D對象的制作。圖像質量也得到了發展。

          然而,在標志設計中,情況頗有爭議。設計師將平面樣式的 logo 轉換為3D,反之亦然,力求使 logo 風格更加生動和簡潔——后者對于舊版本的3D和假3D尤為典型。出于同樣的原因,他們付出了很多努力來探索類似于3D的方向——等距藝術。它允許在視錯覺、鮮艷的色彩、漸變、陰影和形狀的幫助下獲得大量圖像??赡芩雌饋肀?D更適用于標志設計——但時間會證明公司和客戶會習慣什么。

          最后

          顯然,2022年和2021年的標志設計趨勢沒有明確的界限。大多數處于巔峰的趨勢已經伴隨我們很長一段時間了。

          但是,我們可以肯定地說,例如之前非常受歡迎的故障風格,不太可能成為本季標志設計的主角。在過去的幾年里已經有很多這樣的事情。動畫標志也是如此,這是2021年最有希望的標志趨勢之一。動畫本身繼續引起人們的興趣,這是展示品牌的一種成功技術——但不幸的是,它并沒有被證明是可行的。

          最后,3D的命運也沒有確定,我們還不能說3D或扁平風格的標志設計是否會成為一種趨勢。我們已經寫過,設計師的立場是模棱兩可的,一個方向和另一個方向都有品牌重塑。


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

          文章來源:站酷 作者:對啊設計君
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          實用的設計原則

          鶴鶴

          設計原則是設計師為規范和塑造他們的作品而制定的規則。這些原則強調焦點設計元素,遵循它們有助于幫助設計師與廣泛受眾產生共鳴。

          盡管設計原則聽起來可能限制了自由,但它們的創建是為了支持設計師的工作,而不是設置障礙。您可以將它們視為建立一般順序但不干擾作者創造力的拼寫規則。因此,設計工作依賴于設計原則,一旦使用得當,就會開始吸引觀眾的注意力和興趣。理解這些原則意味著理解并控制整個項目、創建它的過程以及每個涉及的設計元素。

          不同的團隊和工作室區分不同數量的設計原則。然而,七項原則被認為是基本原則。它們是平衡、層次、統一、對比、強調、比例和重復/節奏。

          1. 平衡

          平衡可能是最明顯和最容易理解的原則。這也是讓視覺內容感覺舒適的一個重要功能。這個想法是設計的每個元素——比如字體、顏色、圖形、背景、形狀、圖案、按鈕、文本等——都有它們的視覺重量。較重的元素會迅速吸引觀眾的注意力,而較輕的元素則不會,主要用于完成整個場景的整體性與和諧性。

          有兩種類型的平衡,對稱和不對稱。對稱平衡是通過沿中心軸對齊的等重元素實現的。不對稱平衡與鏡像相反。它使用不同權重的元素并且更常見。這樣的構圖圍繞一個或幾個突出的部分排列,因此創作者尋求輕元素和重元素之間的平衡以獲得視覺圖像。

          2. 層次結構

          層次結構是網頁和應用程序設計中最重要的設計原則之一。它用于對設計元素進行優先級排序,并根據其重要性設置重點。這里有一個簡單的規則:如果一切都標記為重要,那么一切都不重要。

          層次結構引導用戶跨界面從焦點對象到二流對象,并有助于按邏輯順序了解事物。如果忽略了這一設計原則,構圖就會顯得雜亂無章,而且很難找到必要的信息。

          設計中有兩種主要類型的層次結構:視覺和排版??梢酝ㄟ^場景內對象的比例和顏色強調獲得視覺層次。排版層次結構是通過不同的字體、大小和字體粗細來實現的。

          3. 統一

          你可能遇到過這樣的網站、印刷品,甚至是室內設計概念:大量的元素很難融合在一起,所以整體形象看起來一團糟。為了解決這種圖形的混雜,使用統一的原則,應該創造視覺和心理的和諧。

          統一意味著與品牌理念和信息的聯系,因此每個制作的設計,無論是網站頁面、T恤印刷品還是廣告,都應該成為其中的一部分。它與設計系統密切相關,是大多數平面設計公司和項目應該考慮的原則。

          4. 對比

          雖然統一和平衡創造了易于交互的視覺上可接受的設計,但多樣性增加了吸引注意力的細節。如果沒有多樣性,即使是最平衡、最精心組織的概念也會缺乏對比,變得單調乏味。

          這個設計原則為項目添加不同的視覺元素、圖案、符號或排版。事實上,這是設計師可以盡情發揮創造力并順應潮流的地方。

          5. 強調

          強調是通過在構圖中設置焦點元素來創建畫面的設計原則。這意味著它們會吸引觀眾的眼球,但不會超過其他元素,否則平衡就會傾斜。這就像一個好的海報設計:你立刻就能看到正在演奏的樂隊,并且找到細節:音樂會的日期和地點、門票價格等。

          強調可以通過比例、重量、位置、顏色、形狀和樣式來實現。創建一個大膽的、色彩鮮艷的元素是不夠的,因為一切都應該在一個設計中連貫地顯示。

          6. 比例

          比例是指元素相互之間的大小,是最全面的設計原則。調整比例并根據物體的大小和視覺重量對物體進行分組有助于突出重點并保持構圖的統一。

          設計組合中比例的主要思想是,越重要的元素越大,不重要的元素越小。就像著陸頁、文章或海報一樣,對象之間的比例關系與其對讀者的重要性相關。

          7. 重復/節奏

          這兩個設計原則相輔相成,相互補充。重復是指在設計中實現相同或相似的元素:如圖像、按鈕、顏色、字體或形狀。它用于創建統一性和一致性。通過使用相同的圖標、背景或風格化元素,可以輕松實現重復。如果使用得當,它可以控制瀏覽者在頁面上的移動,因為重復元素可以成為吸引和引導注意力的絕佳方式。

          元素重復的方式創造了一種節奏感。當設計中有節奏感時,觀者將其視為旋律。有五種類型的視覺節奏:隨機、規則、交替、流動和漸進。

          隨機— 沒有特定規則間隔的重復元素。

          定期— 重復進行相同的間隔。它通常是通過創建一個網格或一系列垂直線來獲得的。

          交替— 允許在設計中重復多個元素。

          流動— 模仿自然流動并顯示遵循各種彎曲和曲線的重復元素。

          漸進式— 通過在重復時改變元素的一個特征而獲得。

          最后

          定義要使用的設計原則并不總是有意義的,因為它們可能會在創作過程中參與和拒絕,而設計師的主要目標仍然是傳達重要信息,創造和諧構圖,設計可用的界面。

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

          文章來源:站酷 作者:對啊設計君
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          2022 年頂級網頁設計趨勢

          鶴鶴

          設計趨勢可以塑造一切,從設計師的創作方式到用戶界面設計,再到從網站到包裝設計的未來迭代。

          讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021年末開始出現的趨勢,這些趨勢是為來年奠定基礎的,以及一些即將流行的趨勢設計。

          有趣、樂觀的設計

          時尚的形狀、顏色,甚至是面孔都可以帶來很多樂趣。設計師正在使用網頁設計趨勢,為從網站的所有內容提供有趣、樂觀的設計。這些設計的共同點是它們為世界注入了一點額外的快樂。

          充滿樂趣和樂觀的圖像具有面孔、較輕的字體,以及散發出積極情緒的顏色。為了充分利用這一趨勢,請考慮更輕的元素,并避免選擇較重的字體或顏色。

          黑白配色方案

          黑白配色方案是今年最鮮明、最美麗的設計趨勢。沒有顏色,你可以在限制范圍內思考和設計。

          大膽和實驗性的排版

          在2022年,沒有錯誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網站設計趨勢時,請考慮字體將如何響應以及如何最大限度地對訪問者產生影響。

          三維設計元素

          雖然2020年和2021年有很多設計師網站處理完整的3D 設計,但新興趨勢是將3D元素與更扁平的整體美感結合起來。

          具有3D風格的元素可能包括陰影、動畫或圖層效果,以創建深度和維度。

          三維設計也延伸到視覺敘事??紤]如何以突出景深和陰影的方式捕捉您的故事或產品。

          近乎野獸派

          野蠻主義是人們想要加入的網站設計趨勢,但對于大多數項目來說,它過于苛刻和尖銳。

          這些設計使用了許多相同的鮮明效果。不是單色字體,更容易看到襯線是常態。即使有一些明顯的邊界和線條,元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果,只留下顏色和文字來真正承載這些項目。

          滾動文本元素

          雖然總是希望文本元素可讀,但它們也可以是動態的。滾動文本元素——通常使用超大字體、幾個詞、在一個位置——可以增加對關鍵詞的強調并激發用戶的興趣。

          輪廓字體是一種流行的選擇,保持可讀性的關鍵是使用簡短、常用的單詞或短語。

          玻璃態

          玻璃態的第一個展示于2020年末和2021年初的新態,并演變成現在流行的更完整的玻璃效應。

          正是您可能想的那樣:設計元素的外觀讓人聯想到玻璃??赡苡型该鞫取⒗涞蚬鉂傻脑?。

          設計師們一直在Dirbbble上以一種主要方式使用這種風格,并找到了網站設計的方法。

          更多漸變

          漸變是不斷出現的設計趨勢。2021年,設計中的大部分漸變出現在背景中。

          到 2022 年,漸變將采用兩種新形式:

          1) 用于文本顏色填充(例如上面的示例)以提供最大的影響和強調

          2) 作為用其他線條填充插圖或圖標以創建紋理深度效果

          沒有圖像的主頁

          無需圖像即可設計,您將在 2022 年緊跟潮流。

          使用不同類型的用戶界面或設計技巧來充分利用沒有圖像的主頁。在此處的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之間具有疊印效果。超大的排版和手寫風格的字體有助于將它們融合在一起。

          分屏美學

          分屏美學重新奏效。幾年前的趨勢當時出于可用性和響應的原因而起作用,現在它更像是一種新設計。

          這些視覺效果可以包括水平或垂直分割的屏幕,每一切面有不同的功能。

          交互式字體

          在屏幕上與您一起移動的文本是交互式字體背后的支柱。在大多數情況下,這可以使用懸停狀態,盡管您可以嘗試一些其他更復雜的效果。

          在考慮交互式文本元素時,請考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。

          包容性設計

          設計師正在努力打造一個更具包容性的網絡,它幾乎在所有發布的內容中都有體現。從圖像到語言再到替代文本,沒有理由不嘗試讓您的項目更加包容所有人。

          包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網站應該以這樣的方式組合在一起,以便任何想要訪問內容的人都可以訪問內容,并且人們也可以在屏幕上看到他們可以與之相關的其他人。

          結論

          就網站設計趨勢而言,新的一年已經開始以非凡的方式爆發。如何將這些元素合并到現有項目中是作為設計師該考慮的問題。

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

          文章來源:站酷 作者:對啊設計君
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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