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


          什么是彩虹光感?

          圖片
          彩虹光感也是最近這一年左右在設計圈蔓延,然后至今發現越來越多的設計師喜歡上這樣的風格,也許是因為單色漸變或者黑白灰看膩了,從而去選擇一些更能在平凡中凸顯競爭性彩虹色彩。
          圖片
          彩虹光感的形成,一般由多種色彩疊加混合而出來,通過色彩柔和過度或者擴散開的方式處理形成。這種色彩出來的效果十分驚艷,藝術感十足。
          圖片
          Microsoft Office 365
          譬如之前微軟一只影片里面,應用到了彩虹色彩搭配思路。在玻璃擬態輕質感的加持下,視覺效果讓人眼前一亮。
          或許有些設計師覺得彩虹光感,會有些花哨且也不高級。其實在在同質化嚴重的今天,嘗試下新的視覺表現形式,未必是壞事,也許它可以讓你的設計脫穎而出。
          圖片
          英國約克郡雕塑公園的舊教堂
          藝術家kimsooja 用彩虹色燈光,為教堂帶來新的生命力。在這種環境中,似乎讓我們感受到了色彩呼吸的聲音,放下生活中的雜事,聆聽色彩在歌唱,開始靜謐冥想。
          圖片
          apple watch
          就連蘋果的硬件產品設計,也采用了彩虹色彩搭配,這種與眾不同的新鮮感,有網友直呼太美了吧。也正是因為彩虹色的活力與年輕化潮流,受到越來越多人的關注。

           

          彩虹光感的特點

          彩虹光感由自然界中真實存在彩虹演變而來,如今在數字設計中越發廣泛的使用。因其特殊的效果,以及迷人般的色彩彌散處理,使得這種色彩雖然混合多種,也不會讓人產生厭倦感。
          圖片
          untitled macao
          基于目前彩虹色彩應用案例,我們可以分析出這種風格最大特征點有:豐富、多彩、年輕、活力、細膩的質感、充滿想象空間以及有一些瘋狂特征,似乎有著為年輕一代而出的風格。
          圖片
          圖片
          其實在早期從20世紀70年代開始,彩虹色彩就受到搖滾樂隊的喜愛,以及一些電影霓虹燈效果演變,也有些彩虹色彩蹤跡。
          圖片
          搖滾音樂CD封面
          直到今天,彩虹色的再次復興,已經延續到眾多領域中,例如裝置藝術,藝術展覽以及產品包裝、音樂節海報等各種領域的滲透,我想我們是時候思考它的價值以及接下來潛力。
          圖片

          圖片

          untitled macao
          圖片

           

          彩虹光感的應用

          如今不論裝置藝術,還是數字設計,彩虹色彩搭配都能有眼前一亮感受,這種效果不僅 能打破 枯燥配色,還可以活躍氛圍感,特別是一些涂鴉類型藝術裝置等、音樂海報、酸性風格和平面設計等大量出現,下面挑選一些優秀領域應用案例和大家分享下。
          #1. 平面中的應用
          圖片
          圖片
          圖片

          圖片

          圖片

          Behance/Canwei Lai 賴燦偉

           

          #2. 包裝中的應用

          圖片

          圖片

          圖片

           

          寫在最后

          彩虹光感慢慢開始成為流行文化中的一部分,特別是演藝海報與展覽裝置藝術等都在大量出現。這種色彩搭配的出現,更是一種前所未有的改變與突破,大膽而張揚的精神,極具吸引力。

          個人覺得彩虹光感的配色,可以讓產品在競爭中脫穎而出,彩虹色更有著年輕活潑的寓意。如今看到一些營銷,也在為Z世代年輕人打造產品,將彩虹色應用在產品中也是一種突破窘境的手段。

           

          原文地址:功夫UX(公眾號)
          作者:功夫UX

          轉載請注明:學UI網》最近超火的“彩虹光感”,別告訴我你是最后一個知道的

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

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


          文章來源:csdn

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

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



          系統化思維如何輔助設計實現

          seo達人



          “文中示例相關數據都為模擬數據,而非真正的商業數據,以此聲明”

           

          先給大家介紹一下酷大師的背景:

          1. 酷大師產品定位:面向設計領域的在線建模工具和內容平臺。

          2. 酷大師當前階段:0-1搭建并完善用戶體驗閉環。

          3. 酷大師階段目標:服務用戶增長的同時,提高用戶留存。(站點留存→引流→工具留存)

          在一周一迭代,交付任務緊的敏捷流程中。以下是我們在其中的一些實踐:

           

          1、以系統化的視角來分析業務

          酷大師項目啟動至今,已經大致完成了站點從0-1的內容搭建。站點的主要模塊包含:首頁、模型廣場、工作臺、幫助中心、活動中心、課程中心。他們相互獨立,又相互影響。獨立好懂,聰明的親們通過名字就能猜出各個模塊的功能,并且這些功能彼此都不可替代。那么他們是怎么相互影響的呢?這里引出一個詞:系統化

          請看下圖:

          圖片

          同樣一個事物,獨立的看,和把它放到一個系統中看,我們可能會有不同的理解。同理,當我們把酷大師站點當作一個系統來看時,再結合我們的業務指標,我們可以把這個系統轉譯成如下模型:

          圖片

          從抽象到具象,我們把整個模型分為三個指標類型:

          • 1、核心指標:整個項目為之負責的目標,是評判所有項目行為的基本準則。
          • 2、策略指標:影響核心指標的所有變量集合,是基于產品策略拆解出來的二級支撐性指標。
          • 3、行為指標:隨著策略指標的精細化,產品的策略指標最后都會對應到一個或者多個具體的用戶行為指標。

          我們可以通過模型找到影響業務核心指標的重點發力板塊,也可以通過最底層的行為指標去反推上層的策略指標,進而量化設計價值。到這里,我們也就可以在這個系統中,找到對核心指標影響較大的策略指標,他們分別是:注冊UV數、站點引流UV數和客戶端引流UV數。這三個策略指標對應的產品板塊分別是:游客頁、詳情頁和工作臺。他們就是設計接下來需要在酷大師眾多產品模塊中著重發力的項目。

           

          2、以系統化的方式來分析用戶

          說完了產品目標和拆解,我們來看看用戶。市場和用研同學往往可以在項目前期給我們輸入很多關于用戶的數據,在項目初期,我們可以把這些信息抽象成幾個有代表性的關鍵詞。下圖是酷大師用戶關鍵詞,可以幫助我們定制大的設計思路,不過在一些更細的業務場景中,這些信息并不給到更清晰的設計指導。

          圖片

          所以在此基礎上,我們可以把這些信息作為一個一個的內容切片,通過不同的標準來重新組織這些切片,進而得到一個相對系統化的用戶信息。

          我們換一個維度,再做一次梳理分析:

          圖片

          可以看到,當我們把酷大師用戶以不同階段做劃分,從新游客到資深用戶,不同階段的用戶對于產品的訴求有著明顯差異性。游客和新用戶更注重價值和需求的匹配;資深用戶更注重實際產品價值的最大化。并且我們對于不同的用戶群體,需要對應不同的產品策略,甚至不同的“端”來承接用戶需求。到這里,我們已經可以通過以上信息,在產品的不同鏈路里規劃不同的設計策略了。

          不過有時候需求對標的用戶群體比較聚焦,以上信息還是不夠說服我們自己的話,還有最后一個技能,就是找到和需求高度對標的用戶(注意,是高度對標),和他們深度交流,為他們做用戶畫像:

          圖片

          (圖中為虛擬數據,僅供參考)

           

          PS:這里的用戶畫像需要根據實際的業務需求來針對性的采集信息,這是一個比較靈活的過程,需要設計師拿捏其中的尺寸。

          通過以上三個維度的用戶數據,我們就可以根據產品的不同模塊,找到對標的用戶群體,然后為其做對應的設計策略。

          接下來就是第三步:

           

          3、以系統化的思維規劃設計策略

          面向資深用戶的設計策略(以客戶端改造為例):

          通過用戶訪談和調研結果看,如果用一句話來描述酷大師客戶端的用戶特點的話,應該是這樣的:

          圖片

          基于用戶特點和業務訴求,我們再結合服務模型,我們可以一步步推導出我們的設計策略。

          圖片

          (圖中為虛擬數據,僅供參考)

           

          當設計策略明確后,結合實際的業務需求,接下來就是有的放矢的設計實施過程。

          面向新用戶的設計策略(以游客頁改版為例):

          回想我們的生活,最吸引用戶眼球的傳播方式是什么?思前想后,我覺得是電視直播,因為通過它,自詡謹慎機智的我買了人生第一箱「生發水」…

          • 1、你是否有脫發的煩惱? → 訴求
          • 2、用了一堆產品,卻遲遲沒有效果? → 顧慮
          • 3、我們有北美硅谷防脫技術+南亞失傳生發秘方! → 優勢
          • 4、主持人和甲方撕破臉,工廠緊急調貨、買一送五?。?! → 驅動

          事實證明,「生發水」沒有白買,因為后來我發現這和酷大師游客頁的業務目標幾乎一致:“在沒有互動的情況下以很短的時間把用戶從游客轉變為消費者。”

          通過前面的用戶分析我們可以知道:對于酷大師的游客用戶&新用戶而言,他們更多關注于產品價值和自己需求的匹配程度。

          那么如何在短時間里向用戶傳達信息,并促成注冊轉化呢?

          我們從訴求->顧慮->驅動三個維度來去組織我們的優勢信息。

          因此在面向此類用戶時,除了對他們介紹酷大師的共性價值外,需要重點介紹酷大師的差異性價值,以及足夠有吸引力的驅動利益點。

          如下圖:

          圖片

          基于上文分析,我們再基于目前產品可提供的能力范圍,結合用戶反饋,把信息和用戶需求做一一對應,然后再給出設計解法。

          設計實現:

          正所謂:條條大路通羅馬,各個小道奔安康。只要設計策略是正確的,那么具體的設計方案就是合理的,篇幅有限,這里就不做展開。

          圖片

           

          4、以系統化的模型驗證設計成果

          萬物皆可度量,設計并不例外。系統是度量設計成果的最好“尺寸”。

          怎么度量?還記得最初的指標模型么?

          • 1、通過技術手段監控用戶的行為指標:“按鈕點擊、停留時長、滑動屏數、返回&跳出率…”
          • 2、通過行為指標反推對策略指標的影響。“按鈕點擊提高 → 頁面引流效果提高。”
          • 3、通過AB測試、上線前后變量監測等其他手段,對比出設計在數據上帶來的變化。

          通過以上方法,我們可以直觀的看到設計在整個項目中的貢獻。

          那么在酷大師項目中,這個成果是多少呢?請看下圖:

          圖片

          ps:圖中注冊轉化和老用戶登錄轉化是以設計為唯一變量帶來的數據提高

           

          以上就是酷大師從0-1過程中的主要思考點,從前期業務拆解分析、用戶調研,到制定設計策略,再到設計實施,最后到成果驗證。

          圖片

          到這里,我們也基本回答了最開始的問題:我們如何在業務迭代中抓重點,并有的放矢的“集中精力做大事”。

          以這樣的思路,我們就能以有限的精力,最大程度保證業務的目標的實現,也能對用戶的關鍵路徑做有效的體驗提升。

           

          寫在最后

          1):設計師不能盲目跟隨需求,更不能對需求一視同仁,什么都想做好的結果就是什么都做不好。我們需要有一個自己判斷標準。

          2):“系統”是一個標準,也是一個視角。他影響著我們對業務、對需求、對用戶以及設計的理解。

          3):“系統”本身不重要,用“系統”的思維來看待事物很重要。

          4):多個視角看到的東西,一定比單視角看到的更全面。

          以上內容,和諸位共勉。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:滄耳

          轉載請注明:學UI網》系統化思維如何輔助設計實現

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

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


          文章來源:csdn

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

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



          如何設計精美的應用圖標?

          seo達人


          圖片

           

          1.強調你的品牌

          應用程序圖標就像公司徽標。在大多數情況下,這是第一次互動,第一印象。解決方案應立即傳達你公司的品牌。這樣它就會變得更加可信。

          圖片

           

          2.使其與應用程序一致

          將圖標視為通向你的解決方案。這個外觀應該是你的應用程序之旅的開始。融入品牌元素,保持統一性。

          圖片

           

          3.將圖標與平臺指南對齊

          所有應用程序都是平臺生態系統的一部分。我們的大腦會很快注意到與環境不匹配的事物,并將它們視為不自然的。與平臺指南保持一致可確保用戶的眼睛將它們視為移動平臺不可或缺的一部分。

          圖片

           

          4.讓它獨一無二

          在圖標世界中模仿是失敗的快速秘訣。當用戶檢測到模仿時,它將不再信任解決方案。謹慎地傳達你的解決方案的價值,不要只是復制他人的想法。所有令人難忘的符號都是獨一無二的。

          圖片

           

          5.讓它變得簡單

          智者說,公司的好標志應該簡單到連5歲的孩子都能畫出來。環顧四周,大品牌都是這種符號。你的應用程序圖標設計應該具有類似的簡單性。

          圖片

           

          6.使其易于識別

          用戶瀏覽應用程序通常會看到每個應用程序圖標一兩秒鐘。這就是為什么你的產品應該在眨眼間被認可的原因。此外,無論人們在哪里看到符號(網站或博客),他都應該自動將它與你的應用程序連接起來。

          圖片

           

          7.使用矢量圖形

          使用矢量軟件來創建高質量的圖標設計是很好的。年復一年,具有更高密度的新設備出現在市場上。你的應用程序設計應準備好以最高質量呈現。你還應該避免在啟動器圖標中使用照片。

          圖片

           

          8.各種背景下的測試圖標

          有些圖標在深色背景上表現得很好,有些圖標在較亮的背景上看起來更好。你的用戶使用各種圖像和圖形作為背景,為此準備你的圖形。以正確方式設計的符號將始終看起來合適。

          圖片

           

          9.讓它美麗

          我們都喜歡美麗的物體。讓你的移動產品成為其中之一。你的圖標應該像一顆每個人都想吃的小糖果。花時間準備一個可愛的圖標。這項投資應該會及時回報。

          圖片

           

          10.總結

          記住這個簡單的提示可能會顯著增加你的應用程序成功的可能性。糟糕的圖標設計是移動市場初學者的基本錯誤之一。

          設計你的圖標簡單且與你的解決方案保持一致。使其獨特、可識別并始終符合移動平臺指南。在真實環境中測試你的圖形設計。使用矢量工具來創建它。最后,你美麗的藝術品將成為標志性的。

           

          原文地址:UI范(公眾號)

          作者:范范之道

          轉載請注明:學UI網》如何設計精美的應用圖標?

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

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


          文章來源:csdn

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

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





          通用設計和無障礙設計,誰才是「老大」

          ui設計分享達人

          什么是通用設計? 


          設計產品需要考慮許多不同的因素,包括功能性、可靠性、美觀性、安全性等。產品設計的主要目標之一是讓具有不同能力的用戶能夠有效地與產品交互。幸運的是,通用設計是一個框架,它允許產品創建者設計適合所有用戶的體驗。本文將為大家講解通用設計概念、其核心原則,以及針對不同受眾和設備間的實用設計技巧。


          通用設計適用于所有用戶

          通用設計是一套建議,以確保產品或服務適用于不同身心能力的用戶。不同身體感官、心理或智力能力的人可以使用同一種產品,而無需任何額外調整或修改時,設計被認為是「通用的」。


          通用設計對用戶和企業都有益處,因為更高的用戶可訪問性和滿意度會帶來更好的用戶留存率。認為體驗不錯的用戶,更有可能向他們的朋友和家人推薦產品,從而擴大用戶市場。


          關于通用設計的3個常見誤解

          盡管通用設計聽起來很簡單,但它卻是數字世界中最容易被誤解的概念之一。讓我們回顧一下關于通用設計的3大誤解


          通用設計和無障礙設計是一回事

          在了解了通用設計的含義后,大家可能會認為它是無障礙設計的同義詞。實際上,無障礙設計——指的是允許殘障用戶正確訪問產品或服務的設計,它是通用設計的一個組成部分。


          通用設計關注所有人的需求,包括殘障用戶。換句話說,通用設計旨在讓產品、服務和環境更容易為每個人所用。例如,超市中的自動開門器,方便了坐輪椅的人和攜帶雜貨的人。


          通用設計只關注功能

          為了最大化地提高產品的可訪問性、可用性,需要人們投入時間和精力來創建可靠的產品功能,但功能良好的產品還不足以讓用戶滿意。事實上,用戶通常偏向具有良好功能性和美觀性的產品——而美觀性對可用性是有直接影響的。美學可用性效應表明,如果用戶擁有良好的視覺外觀,他們往往會覺得設計更有用。


          通用設計是設計方法的一個很好的補充

          這種誤解的根源來自于對通用設計含義的不理解。有些設計師認為這是一個「結果」,但實際上它是一個「過程」。通用設計并不是一套用在設計結尾時的指導方針,而是一套從始至終就整合進設計過程內的原則。實踐設計協作非常重要,以確保團隊中的每個人在創建產品時也共享相同的通用設計理念。


          通用設計的核心原則是什么?

          通用設計的一個經典例子:幫助輪椅使用者從街道轉到人行道的坡道設計。圖片來源 Adobe


          通用設計的核心原則是由Ronald Mace和北卡羅來納州立大學的建筑師和產品設計師工作小組于1997年制定的。Mace 創造了「通用設計」這個詞,并用它來描述產品和環境的概念。


          最初,通用設計主要是為實體產品和環境考慮的,但后來這個概念被應用于數字產品。接下來概述的通用設計原則,目的是幫助當今的數字設計師創造更人性化的產品和環境。


          01 公平使用

          設計師應致力于為所有用戶提供相同的使用方式。如果無法為不同能力的人提供相同的設計方案是,那么產品創造者應該找到合適的相似方案。例如,當你設計一個網站時,需要讓所有人都能訪問它——包括有視覺障礙和使用屏幕閱讀器技術的人。

          視障人士在配有輔助技術的計算機上工作。圖片來源 Adobe


          02 靈活使用

          當你的設計投入使用時,它應該足夠靈活以適應用戶的節奏,以及不同用戶間的交互方式。例如,當你創建新設備時,它應針對右手或左手訪問進行優化。


          03 簡單直觀地使用

          你的設計應該簡單、直觀,并符合用戶的期望——無論用戶的知識或以前的經驗如何,都應該易于理解??偸窃囍ハ槐匾膹碗s性,包括使你的視覺設計盡可能簡約,以及在任務完成期間和完成后為用戶提供適當的反饋。此外,一定要使用簡單易懂的語言與用戶交流。


          04 可感知的信息

          你的設計應持續向用戶傳達必要的信息。重要的是通過多種方式提供信息,以適應感官能力不同的用戶。例如,在設計視頻播放器時,建議添加啟用字幕的用戶界面(UI)元素。字幕可以幫助聾啞用戶理解多媒體內容,對非母語人士也很有用。

          YouTube的視頻字幕。圖片來源YouTube


          05 容錯

          你的設計應將出錯的風險降至最低。為具有潛在危險的操作添加額外的「保護層」,防止用戶犯錯,例如不可逆轉的文件刪除。

          Apple macOS 中的對話框,在用戶嘗試清空廢紙簍時變得可見。此對話框通知用戶無法撤消此操作。圖片來源:Nick Babich


          06 最少的體力勞動

          你的設計應盡量降低用戶使用時所需的體力工作。具有良好的人體工程學設計、最少的重復操作,以及舒適的交互。自動人行道——機場中常見的一種運行機制,幫助身體各異的人快速移動——展示了這一原則的應用。

          在機場使用自動人行道的人。圖片來源 Adobe


          07 接近使用的尺寸和空間

          無論人們的體型、姿勢或活動能力如何,都應不受影響地使用產品。例如,當我們設計一個新的移動設備時,我們需要確保它適應手和握把尺寸的變化。對于許多項目來說,可以使用UI 套件去制作適合各種情況的UI元素。 


          如何將通用設計應用于學習?

          正如我們前面提到的,通用設計不是嚴格的指導原則,而是一種考慮用戶不同能力的設計方法。通用設計的目標不是創建一個一刀切的解決方案(很少能找到這樣的解決方案),而是探索不同的設計解決方案,并選擇更具包容性、可訪問性和教育性。由于每個產品都不同,因此實施通用設計方法可能因組織而異。以下是基本上適用于所有項目的一些建議。


          01 進行用戶研究以了解你的用戶

          了解你的用戶是產品設計最關鍵的方面——但如果你想實踐通用設計,你也應該了解用戶的多樣性。用戶研究在設計過程中起著關鍵作用,因為它直接影響我們的設計,這也是為什么所有設計過程的第一步都是收集用戶需求。旨在了解用戶的需求、行為方式以及與產品互動時的想法。


          在進行用戶研究時,你應該:

          -確定你的目標受眾;

          -找到你目標受眾的正確代表。

          -采訪代表以獲得有關用戶偏好和行為的寶貴見解。


          在這個過程中實現用戶多樣性非常重要,這意味著你應該采訪目標用戶群中不同年齡、不同心理和不同身體能力的人。它將幫助你設計和開發可供不同類型用戶訪問的強大UI。在此階段結束時,你應該了解用戶的性質、目標以及使用你的產品想要完成的任務。


          02 創建心智模型

          根據你在第一步中收集的用戶研究,是時候創建用戶心智模型了。這些模型描述了用戶對系統的了解(或認為他們了解)什么,這使你可以了解特定人員看待情況的視角。將殘疾視為心智模型的一部分也很重要。例如,在為色盲用戶調整產品設計時,請確保顏色不是用作交流的唯一方式。


          03 用戶流分析

          用戶流分析是最有價值的用戶體驗 (UX) 設計方法之一。用戶流顯示了用戶如何與產品交互——包括用戶為實現目標而經歷的步驟,以及在此過程中每一步實際發生的操作或交互。用戶流分析使設計人員有機會了解不同交互發生的背景。


          在進行用戶流分析時,建議設置一個量表,讓你能夠恰當地評估用戶交互:

          1級:與產品交互時沒有重大問題;

          2級:對特定產品功能有困難;

          3級:大多數產品功能有困難;

          4級:無法使用產品。


          在此步驟結束時,你將了解產品的實際復雜級別。這些信息將幫助你在用戶有效性、效率和滿意度方面優化產品需求。


          設計提示:使用同理心圖會讓你的用戶流分析變得更容易。當你站在用戶角度,去考慮用戶在使用時的所見、所想和所感時,它可以幫助你的團隊建立對用戶的同理心。


          04 應用迭代式原型

          原型制作是一個將團隊最初概念轉化為實際有形的過程,例如在紙上繪制模型(低保真)或創建功能設計模型(高保真)。應用迭代原型對探索和測試非常有用,因為原型可以在產品發布前幫助收集用戶豐富的反饋信息。它還允許關鍵的項目利益人或合作伙伴設想系統的未來樣子。


          雖然原型制作是通用設計過程里的重要組成部分,但最大限度地減少構建原型的所需時間也同樣重要,產品設計師可以依靠UI套件來加快原型制作。


          05 進行可用性測試

          在這個階段,確保你的用戶不再遇到任何產品問題至關重要——可用性測試是實現這一目標的完美技術??捎眯詼y試使可以幫助你直接觀察目標用戶與產品的交互。它可以是直接的(適度的可用性測試)或遠程的觀察。可用性測試允許設計人員從單個功能后退一步,從整體上審視產品、服務或環境??捎眯詼y試的目的是評估你當前的設計,并明確改進的方式。


          06 將用戶反饋環路整合進設計過程中

          通用設計需要用戶的積極參與,因為你需要用戶的輸入讓設計運行起來。這意味著你的用戶時刻向你共享他們的反饋。通過反饋循環機制(例如共享產品問題、關注點和意見表單),能幫助你設計出更符合用戶期望和需求的產品。


          設計應吸引所有用戶

          通用設計期望造福任何人,因為它促進了產品的可訪問和可用性。在整個設計過程中考慮所有人的需求和能力,可以創造出真正滿足用戶需求的產品。

          文章來源:站酷   作者:UX詞典

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

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

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



          設計師的年中總結這點事兒

          seo達人


          01.年中總結到底重不重要?

          靜下心來仔細想想,年中總結到底重不重要?我覺得對于設計師來說非常重要的!因為通過年中總結可以更好地了解上半年的產出,有什么亮點。技能上是否成長,其中哪些不足,都可以在這個階段進行復盤。分析遇到的問題,解決問題并總結歸納。
           

           

          02.怎么才能使內容更出彩?

          我們在總結之前,不要著急上來就寫,要先列出一個基本的框架,要進行分析,捋清邏輯。
           
          首先要羅列出在這上半年做了多少個項目,想不起來可以翻一翻以前的周報,把項目進行歸類,可以分為3類:重點項目、常規項目和其他參與的項目。
           
          然后就可以列出一個基本的總結框架,按照這個框架在結合自己的實際情況,就方便多了!下面是我列出的一個基本框架,可以根據自身情況進行刪減。
           

          圖片

          ·自我介紹

          這個在開講之前都會講一下,尤其在大廠,向領導們匯報,首先要介紹你是誰,主要負責哪個業務線,主要負責什么內容。但是如果是小公司或者是在組內進行匯報,那這個環節就省去了!因為領導和大家對你是比較熟悉的。
           

          ·內容引言

          可以用幾個關鍵語句來概括一下半年的工作,能給人留下深刻的印象。要以工作的核心價值為主,比如:我把這半年我在業務能力的顯著提升總結出3個關鍵點

          1.品質感的提升

          2.解決問題能力的提升

          3.善于思考

          簡單明了,定好主題后,下面內容都圍繞著主題去說明論證。

          圖片

          ·重點內容講解

          很多人有一個誤區,覺得總結的內容越多越好,如果缺乏重點,也只會讓大家覺得你努力但是卻沒有成績的印象。以這個我在年中總結中摘出來的一個紅包雨小游戲項目來說:
           
          1.首先要向大家介紹一下這個項目的背景,讓大家了解這個項目是干什么的,以及玩法是什么。
           

          圖片

           

          2.介紹此次項目中設計的亮點

          沖擊力、層次豐富、光影質感

          PPT上面文字不用太多,提煉出關鍵點,簡單明了,容易被大家閱讀,在講的時候在把細節具體的展開來說,充分的介紹你的設計思路。

           

          圖片

           

          3.完整的界面展示

          把項目的設計思路以及亮點介紹完之后,要把項目的所有的頁面都展示出來。并在PPT中用數字展現出來,要進行量化。

          圖片

          圖片

          圖片

           

          4.遇到問題如何解決的

          那這個部分是非常重要的,因為可以展現出你解決問題的能力,設計師不僅僅要把界面做的美觀實用,還要在遇到問題是能給出一個解決問題的好方法,這也是設計師必須具備的能力之一。

           當時這個紅包雨的因為每一個界面都涉及動效,所以和開發溝通起來很難去描述細節,最后產出的效果不理想的話改也是很麻煩的,所以干脆出一個demo,把想要實現的效果直接展示出來,這樣就什么問題都解決了!

           

          03.自我反思

          這是對自己半年的評價,這部分可以分成自己的優點和缺點兩類來說,優點可以說設計滿意度,技能是否提高,設計能力是否提高,哪方面有提高;缺點可以說還有哪里不足需要加強。

           

          04. 明年規劃

          經過反思,你會了解到自身的不足,可以根據這些不足制定下半年的計劃,在明年的相同地方至少可以不走彎路,快速超車,最終到達目的地。

           

          05.結語

          都說干得好不如ppt寫得好,其實無論是在年中或者年底的大總結還是日常的小總結,要想出彩,必然離不開平時兢兢業業的工作。但只有苦勞是遠遠不夠的,總結也是一種日常積累,我更希望我們每個人做的不僅僅是年中這種大一點的總結,而是每月總結,每周總結,甚至每天總結,曾子之所以有偉大的德行,是歸功于他的“吾日三省吾身”。如果能夠做到隔段時間就把過往工作做一次梳理,重大項目完結都做一次總結,那總結匯報時必然能交上像樣的答卷。
           

           

          原文地址:58UXD(公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》設計師的年中總結這點事兒

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

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


          文章來源:csdn

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

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


          設計沉思錄|設計價值難量化?掌握這套方法就夠了

          seo達人


          01.目標導向的來源

          目標導向在我們身邊隨處可見,大到公司建立的使命、愿景、價值觀,小到公司的規劃的3年、5年的發展戰略,再聚焦一點便是每個季度制定的OKR。大大小小的目標形成一條路徑,使得公司上下多個人、多個團隊共同合作,為實現最終目標而不懈努力。

          a

          02.目標導向方法幫助設計師解決什么問題

          作為設計師,參與的目標鏈路絕大多數處在偏下游的一環。設計師需要明確自己的價值,并且產出自己的價值。通常我們拿到的目標是比較宏觀的,這就需要我們不斷拆解為更小的子目標,每層目標便是上層目標的實現路徑。
           

          圖片

          目標導向的設計方法能幫助設計師在整個系統中梳理清楚我們要承接的上層目標是什么,也就是設計職能對業務的價值,幫助我們了解工作要求是什么,設計需要達到什么樣的標準,向下拆解我們能產出怎樣的策略。

          a

          03.目標導向的設計分析方法

          第一步:明確設計目標

          1.首先要了解什么是清晰的目標。清晰的目標由2個部分構成,一部分是預期結果,另一部分是現狀,其中必然存在一定的落差。那么這個落差便是我們要解決的問題和要完成的任務,所以一個清晰的目標需要包括預期和現狀。

          圖片

          2.符合Smart原則:具體的、可衡量的、可實現的、相關的、有截止期限的。

          制定的目標不能含糊,能否達成一定是可以被證實的,不能不切實際。除此以外,制定的目標需要和其他的目標有所關聯,在準確的截止日期完成。
           

          圖片

          3.明確我們的設計目標需要從項目目標切入,通過不斷向上追問,補全業務的背景和目標。同時基于業務目標,拆解出設計目標,并且為設計目標找到可衡量的指標。

          圖片

          第二步:拆解目標的兩大步驟

          通常人類有兩種思考方式:直覺思維和結構思維。直覺思維大多是在極短的時間內大腦做出的判斷,想到的方案大概率是不完整的。結構思維是經過系統分析后作出結論,對大的目標拆解成要素,最后形成一個影響目標的結構圖。通過補全所有的視角,從中找到最后那幾條或者一條關鍵的解決方案。帶入這樣的思考方式,我們如何對目標進行拆解呢?
           

          1.找拆解維度:

          麥肯錫 6W3H方法:

          what\where\which\when\why\how\how much\how many

          通常解決一個問題,要從提出一個好的提問開始,提的問題就是切入的角度。6W3H中問到最多的是“Why”,往往也是最核心所在。通過不斷的提問,打開的視角越廣,認知才能越廣。 

          圖片

           

          2.系統拆解:

          找好拆解維度,怎么判斷是不是一個好的拆解呢?可以看它是否符合Mece原則:同一維度,不重不漏。它是麥肯錫的第一個女咨詢顧問巴巴拉·明托在《金字塔原理》中提出的一個很重要的原則:各部分之間相互獨立 ,所有部分完全窮盡。

          圖片

          常見的拆解模型有以下5種:

          A.二分法:把信息拆解成A和非A兩個部分。

          B.過程法:按照事情發展的時間、流程、程序,對信息進行逐一的拆解。

          C.要素法:可以是從上到下,從外到內,從整體到局部進行拆解。

          D.公式法:按照固定公式設計的要素去拆解,比如CTR、GMV等計算公式。

          E.矩陣法:根據重要緊急程度構建價值矩陣對應四個象限:重要緊急、重要不緊急、不重要但緊急、不重要也不緊急。

          圖片

          同時,在目標拆解中也有一些小技巧:

          A.要夠多:對一個拆解維度的拆解方式越多,找到關鍵因素的概率越高;

          B.要夠細:在逐層拆解的過程中,需要不斷檢查最細要素是否已無法再進行拆解;

          C.要夠準:拆解時,要檢查是否可以推導出具有指導意義的結論。

          第三步:定位重點

          定位重點,可以分為2個維度構建價值矩陣:

          1.重要程度:看如何構成目標;

          2.提升空間:看橫向對比,看時間變化。 

          圖片

          第四步:挖掘策略

          通常情況下,在前面步驟做到足夠充分的時候,對應的解決策略也會相應成型。挖掘解決策略同樣也有4大步驟。

          1.明確研究內容:依舊采用6W3H的方法,進一步細分明確要研究的內容;

          2.選擇研究方法:桌面研究、數據分析、用戶研究、競品分析等;

          3.提取研究結論:通過以上方法研究得出的結論可能會有相同與不同之處,對最終的信息進行分析及整理,得出最終的研究結論;

          4.提煉策略:基于研究結論,提煉出相應的解決策略。

          圖片

          a

          結語:

          以目標導向的設計方法可以有效地幫助設計師通過對目標的逐層拆解,從宏觀看到微觀,從模糊到清晰,從方向轉變為動作。在此過程中了解設計職能在整個產業鏈條中起到什么作用,幫助設計師們在可發揮的空間內大展拳腳,實現價值最大化。
           

          推薦閱讀:

          《麥肯錫問題分析與解決技巧》

          《麥肯錫教我的思考武器:從邏輯思考到真正解決問題》

          《金字塔原理》


          文地址: 58UXD(公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》設計沉思錄|設計價值難量化?掌握這套方法就夠了

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

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


          文章來源:csdn

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

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

          用戶體驗設計法則應該怎么用?來看看這些應用原理!

          seo達人

           

          1、菲茨定

          圖片

          選中目標所需時間與移動距離長短和目標面積大小有關。(與距離負相關,與面積正相關)

           

          現實中的應

          圖片

          在商場中尋找洗手間取決于標志的大小及步行的距離。為了滿足這兩個標準,標志設計得更大、更容易接近。

           

          設計應用

          圖片

          ▲ 左側頁面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區分;右側頁面CTA按鈕尺寸很大,能讓用戶清晰識別。

           

          2、??硕?/strong>

          圖片

          決策所需要花費的時間隨著選擇的數量和復雜性增加而增加。

           

          現實中的應

          圖片

          與餐廳相比,快餐店的菜單選項有限。因此顧客點餐速度更快,門店提供的服務也更快。

           

          設計應用

          圖片

          ▲ 在Whatsapp上轉發消息時,會在“最近聊天”列表上方看到“經常聯系”的3個好友。這對用戶來說是一種簡單的交互,幫助用戶節省操作時間。

           

          3、共域定律

          圖片

          被一個顯而易見的邊框包圍起來的多個元素,被視為一個群組。(從屬于格式塔理論)

           

          現實中的應用

          圖片

          在服裝店中,衣服按照類型被分到不同的架子上來展示,即使對這家服裝店一無所知,顧客也會將一個貨架內的商品關聯成相似的東西。

           

          設計應用

          圖片

          ▲ 過濾器被封閉在產品頁面之外的單獨區域中,因此可以清楚地識別左右兩部分的差異。

           

          4、雅各布定律

          圖片

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的使用方式。

           

          現實中的應用

          圖片

          假設家中的陽臺是一扇推拉門,我們可能希望酒店的陽臺門也以同樣的方式操作。因此如果酒店有一個滑動門,我們可能會下意識地先去推門。

           

          設計應用

          圖片

          ▲ 以上是國外知名的電商網站導航欄設計,這幾個網站導航欄中顯示的信息及其結構都非常相似:左側是品牌標志,中間為搜索欄,右側為其他選項(購物車/個人賬戶)。

           

          5、系列位置效應

          圖片

          用戶更容易記住系列中出現的第一項(首因效應)和最后一項(近因效應)。

           

          現實中的應用

          圖片

          我們通常更容易記住某個電話號碼的前4位或后3位,這條法則也是銀行卡號被分成4組數字的原因。

           

          設計應用

          圖片

          ▲ 在亞馬遜主頁上,網站的第一部分總是顯示最重要的內容:導航包含logo、搜索和其他重要功能;輪播圖通過圖形設計吸引用戶的目光,引導新的交易或優惠。

           

          6、馮·雷斯托夫效應

          圖片

          又稱隔離效應。當存在多個相似物體時,與眾不同的物體最容易被記住。

           

          現實中的應用

          圖片

          在商場購物時,相較于普通裝飾的門店,我們更有可能記住或將注意力轉移到具有霓虹燈效果的門店上。

           

          設計應用

          圖片

          ▲ App上有新消息時,會在圖標上用紅點顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導用戶點擊并查看消息。

           

          7、審美可用性效應

          圖片

          用戶通常認為漂亮的設計更易用。

           

          現實中的應用

          圖片

          當參觀汽車展廳時,我們通常會對汽車精美的展示感到驚嘆,并立即對這個品牌產生積極的印象。

           

          設計應用

          圖片

          ▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當訪問像愛彼迎這樣干凈簡潔的網站時,我們會下意識地信任這個產品,也確保了用戶對品牌的信任。

           

          8、峰終定律

          圖片

          人們評論體驗優劣,大多基于峰值和結束時的感受,而不是所有環節的平均值。

           

          現實中的應用

          圖片

          在足球比賽中,整場的觀看體驗將根據比賽結束(誰獲勝)和比賽高潮(誰進球最多/比賽中最激動人心的時刻)來判斷。

           

          設計應用

          圖片

          ▲ 在夜晚非常饑餓的時候,我們使用訂餐App選擇食物時,卻被告知付款失敗。這時候App界面設計的再好看也無關緊要,訂餐失敗就是從這次體驗中收獲的結果。

           

          參考:uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

           

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

          作者:Clippp

          轉載請注明:學UI網》用戶體驗設計法則應該怎么用?來看看這些應用原理!

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

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


          文章來源:csdn

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

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


          掌握這幾點輕松應對扁平人物插畫!

          seo達人


          圖片

          01.流暢的線條

          第一步肯定離不開線,國內外大神的優秀扁平人物插畫可能風格不同,但一定離不開流暢的線條。對于人體和物品的輪廓一定要進行高度概括,最后凝結成流暢簡練的線條。當然說起來容易做起來難,對于人物姿態的概括能力還是需要大量的臨摹練習和對于鋼筆工具的熟練運用!但是當你有意識的注意這方面的練習,提升也就很快了。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          q

          02.簡化的造型

          不僅線條簡約流暢、造型也要貼近簡單的幾何圖形。這樣不僅操作起來快速省時,幾何圖形也讓畫面更有張力,更富美感。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          1

          03.夸張的比例

          這類插畫中很多大神都會特意去放大或縮小人物身體的某個部分的比例,常見的有身體拉長或放大、頭部縮小,這種適當的比例夸張反而使整體更具有個人特色和風格。

          圖片

          圖片

          圖片

          圖片

          圖片

          3

          04.大面積色塊

          大面積的色塊運用可以很快抓住人們的眼球。有了前面說到的幾何形態的造型,不管是鮮艷明快的撞色還是統一協調的色彩搭配都可以很好的融合。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

           

          轉載請注明:學UI網 ? 掌握這幾點輕松應對扁平人物插畫!

          UI設計細節系列② | 讓設計細節更高級的12個實用小技巧

          seo達人



          在這篇文章中,我整理了一些小的設計技巧,來幫助你快速改進自己的設計。有時只需要一些小的調整,就能快速提高設計的品質。

           

          1. 使用全小寫英文讓畫面更有氣質

          圖片

          圖片上使用較粗的字體或開頭大寫有時候會顯得過于正式。嘗試在某些界面上使用小寫或者比較細的字體,讓畫面看起來更加有氣質。

           

          2.使用粗細、大小和顏色來表達內容主次關系

          圖片

          設計文字內容時,沒辦法時時告訴用戶哪個內容信息是主要的哪個是次要的,但可以通過調整字體粗細、大小、顏色,讓我用戶一眼就能分辨內容主次關系,避免閱讀中出現任何混亂。(彩云注:要對比就要足夠強,不要模棱兩可。)

           

          3.深色背景應加粗文字

          圖片

          在淺色背景使用深色文本時,有時可以選擇較輕的字體粗細。但如果在深色背景使用淺色文字時,最好考慮把字體粗細稍微加粗一點,特別是長文本段落內容的,以提高文本的最佳可讀性,避免使用戶視覺疲勞。

           

          4.選擇能正確氣質的字體

          圖片

          試著為呈現的內容選擇合適的字體。用戶是精明的,并且對內容氣質會有直觀感受。所以選擇合適的字體很關鍵,能讓用戶獲得對應氣質的閱讀體驗。(彩云注:上圖中的區別在于,左邊的字體偏古典,而插畫偏現代,所以右邊就會更合適一些)

           

          5.界面中的字體最好控制在2種以內

          圖片

          對于我來說,設計最好選擇一種類型的字體。但如果項目需要,最好控制在兩種字體以內,不要太多。對于沒有經驗設計師來說,頁面使用多種字體視覺是很難把控的。所以建議最多使用2種字體類型,然后改變字體的粗細,大小,顏色,這樣的設計會看起來更加統一協調。

           

          6.字體全大寫時,注意拉大字體間距

          圖片

          使用全大寫的文字時,只要稍微拉大下字母間的間距,就能使字母間更加容易區分,單詞更加容易閱讀,提高用戶的可閱讀性,還能使大寫字體視覺上更加美觀。

           

          7.設計元素風格保持一致性

          圖片

          無論是網站或APP設計都應該保持一致性,這也是設計的最基本的原則。比如布局、圖標、顏色和按鈕都要始終保持一致,減少用戶混淆,提高用戶體驗。(彩云注:同一個界面中的元素樣式應保持一致)

           

          8.設計適當增大留白

          圖片

          設計界面適當使用留白不僅讓界面看起來更加有空間感,主次分明,還能給人一種明朗、簡潔的心理感受。想讓設計視覺更加集中,有呼吸感,適當留白則是改進頁面視覺最簡單的方法之一。

           

          9.設計開頭段落樣式,吸引用戶

          圖片

          如果你處理的是長篇內容,比如博客文章,那么將讀者吸引到內容中是很重要的。為了達到這個目的,開篇段落的外觀和內容本身一樣重要??梢院唵握{整下,如調整字體大小,行高,粗細和顏色,都可以改善第一印象。

           

          10.長文本使用短段落設計

          圖片

          在處理長篇內容時,盡量保持段落簡短有力,清晰呈現。確保用戶在短時間內快速閱讀內容信息。(彩云注:人的耐心很有限,盡量把長段落拆分,我自己寫公眾號文章時也會這樣做,我給自己規定一個段落最長不超過5行,并一直執行這個標準。)

           

          11.定好主色調,并在設計中保持一致性

          圖片

          怎樣讓用戶界面看起來更專業?那就是從一開始就定義好主色調,并在整個設計中始終保持一致性。如果界面隨機使用大量的顏色來設計,視覺效果只會讓用戶看起來很亂,分不清主次。

           

          12.當使用8點網格系統時,圖標布局要一致

          圖片

          當使用圖標和 8pt 網格系統 時,你會發現大多數構建良好的圖標集的圖標都位于8的倍數框架內(即 16×16、24×24、32×32 等)。但在設計中我們常常很容易忽略這一原則。若想讓你的設計圖標在布局中保持一致性,最好確保你設計的任何圖標都在8的倍數框內。

           

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

          圖片

           

          原文地址:medium

          作者:Marc Andrew

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

          譯者:彩云Sky


          轉載請注明:學UI網》UI設計細節系列② | 讓設計細節更高級的12個實用小技巧

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

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


          文章來源:csdn

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

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


          設計要知道-HMI設計必看!車載中控的前世今生

          seo達人


          首先先普及下HMI的概念

          HMI:- Human Machine Interface : 人機界面,現在多指車載交互系統體驗設計。

          既然說到人機界面,我們先來設計的載體是如何演變的。

           

          一、車載中控儀表盤演變過程

          1886 年,由卡爾·本茨發明的第一輛汽車。當時根本就沒有所謂的儀表盤概念,所以載體還得從1908年T型車(Ford Model T)說起,到2012年劃時代的特斯拉Model S,汽車儀表盤目前經歷四代。

           

          1、第一代:以按鍵為主

          機械式儀表盤: 第一個時代儀表盤為機械芯儀表,一般包含了車速里程表、轉速表、機油壓力表、水溫表、燃油表、充電表等,之后汽車儀表還需要裝穩壓器來穩定儀表電源的電壓,抑制波動幅度,保證汽車儀表的準確性。初代的汽車儀表盤主要以傳統的熱式和動磁式,顯示的信息極為有限,更多的是車輛物理信息“通信員”的角色。

          在機械時期中控臺哪有什么屏幕可言,那時候的中控臺就是收音機和空調的調節器,而且都是實體按鍵的,只能滿足駕駛的基本需求,沒有屏幕,都是照搬飛機中控布局,以實體按鍵為主,功能簡陋單一。堆砌功能按鈕儀表,沒有交互可言。

           

          2、第二代:電氣式儀表盤+小中控屏

          第二個時代的電氣式儀表盤終于誕生,從真空熒光顯示屏(VFD),發展到采用液晶顯示屏(LED)及小尺寸薄膜晶體管顯示器(TFT),顯示屏顯示的信息越來越清晰、快捷。目前電氣式儀表在市場的保有量最大,且一般采用機械儀表結合數字儀表的方式,例如車速、轉速信息采用指針,指示燈信息采用LED等點亮,其它信息則采用TFT屏。

          雖然相較于第一代機械機芯儀表增加了不少功能,汽車信息反饋也更全面更及時,但是其發展速度卻明顯與汽車行業不相匹配,對于更深層次的駕駛需求,電氣式儀表仍無法滿足。

           

          3、第三代:全數字化儀表

          汽車儀表盤領域在不斷追求更新,于是劃時代的全數字液晶儀表盤孕育而生,也是就我們常說的虛擬儀表盤。全數字汽車儀表盤使用了一整塊液晶屏取代了傳統的指針和刻度表,所有信息都通過這塊屏幕顯示出來。

          單從外觀上來看就能給人以一種比較高大上的感覺,這類儀表盤上往往沒有指針等部件,所有信息都通過屏幕傳遞出來。功能更強大、信息顯示更具邏輯性,駕駛者接受信息更快,提升行車安全。也可以根據個人喜好調整相應參數,比如比亞迪的儀表盤就可以改變背景顏色。在高級點的,像寶馬的全數字儀表就可以切換N多種模式。

          2007年iPhone問世后,大屏、輕薄機身、高清顯示屏、可安裝應用等功能引領了整個行業的革命。電動汽車行業飛速發展,智能AI和人際互聯等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發精細起來,結果就是屏幕越來越大。

          2013年上市的特斯拉Model S,座艙里最驚艷的就是那塊17寸的大屏。超高的分辨率和流暢的操作,和漂亮的UI設計,最初讓很多美國民眾瘋狂。就像蘋果手機顛覆了傳統手機業,特斯拉也顛覆了傳統汽車行業。

          2014年換代的奔馳S級將兩塊12.3寸屏幕連在一起,合成了一塊23寸大屏,比特斯拉的大屏還多出6英寸。

          拜騰M-Byte,48寸巨屏,橫向貫穿儀表臺,再一次顛覆汽車的內飾設計。

          比亞迪系列汽車的旋轉大屏,玩出新花樣,可以旋轉控制,就像手機橫屏和豎屏的場景。

          縱觀下來,其實不難看出,雖然汽車的中控屏幕也是往著越來越大的方向發展,但因為空間以及功能需求的不同,相比起手機來說,中控屏幕的變化更具備多樣性。

           

          4、第四代:HUD顯示屏

          從上世紀80年代,抬頭顯示技術在汽車領域已經開始被使用,直到現在才開始逐漸展露頭腳。

          HUD抬頭顯示器(Head Up Display),又叫平視顯示系統。它可以把重要的信息,映射在風窗玻璃上的全息半鏡上,使駕駛員不必低頭,就能看清重要的信息。

          戰斗機是率先應用HUD抬頭顯示器的。飛行員在空戰中,需要交替觀察艙外目標和艙內儀表,易產生瞬間視覺中斷,因此會導致反應遲緩、操作失誤,并有可能貽誤戰機,采用HUD抬頭顯示可克服這一缺點。

          第一架使用HUD抬頭顯示的飛機是美國海軍的A-5艦載機。民用航空最早使用HUD抬頭顯示是法國達索飛機公司的mercure飛機。

          在復雜多變的道路上開車,駕駛員雙眼離開車輛前方,是個非常危險的事情,尤其是在高速公路上更是明顯。于是很多車型,就給車輛配備了一個不需要挪開視線,就能知道車輛基本信息的配置,這就是HUD抬頭顯示。

          HUD作為一款新技術,優勢顯而易見。當駕駛員需要查看儀表盤或中控臺上的信息,視線至少需要轉移0.3秒,而HUD投影的信息就在駕駛員平視的正前方,駕駛員可以將更多的注意力放在路面上。將駕駛體驗及駕駛員對于路況信息的認知能力進行革新式升級。

           

          二、六大車載系統的特點

          現在各家系統百家爭鳴,各家車載系統設計有哪些不同?

          1. 阿里 斑馬智行

          簡介:

          1、阿里車載小程序是一種無需下載安裝即可使用的“應用”,旨在為用戶打造“隨時可用”、“用完即走”的使用體驗。

          2、AliOS作為互聯網汽車操作系統,原生地支持阿里小程序,引入阿里生態服務的同時也面向開發者開放,圍繞車場景為用戶提供從出行到生活的各類智慧服務。

           

          特點:

          1、設計特點:

          獨立的大卡片式的內容界面模塊方便車主在行車過程中單手操作,其配色鮮艷,風格扁平,符合使用場景和國人的使用習慣。

          2、功能特點:自帶場景智能感知的基因。

          得到車主授權后,車載小程序可以圍繞行車場景,實現上車前、行車中、下車后自然串聯的智能化場景服務。

          用戶可以在車上通過觸控、語音、手勢等多模態交互方式,咨詢附近的推薦餐廳,小程序會基于用戶的喜好作出推薦,還可以預約排號;到達餐廳附近,系統會自動喚醒小程序,為用戶找到停車場;下車后,車載小程序會無縫連接到手機小程序端,用戶可以在手機上查看餐廳的預約信息等。

          △ 斑馬智行2.0系統設計

          斑馬智行,采用智能手機界面和應用商城下載 APP 的使用方式,實現車載和手機的雙重控制。

          強大的云端特性在語音識別和線上互聯方面提供了良好的使用體驗,車主可以連接手機藍牙后,讀取其手機通訊錄,實現利用車載系統撥打和接聽電話的功能。支持 USB 接口,通過 U 盤實現播放音頻、視頻文件等。在娛樂生活方面,內置蝦米音樂,蜻蜓FM,喜馬拉雅等,支持在線搜索,在線播放以及在線廣播等服務。

          同時,斑馬智行依靠阿里強大的技術和資源支持,打通停車場,加油站,高速公路支付等,使用戶駕車時產生的費用均能通過支付寶支付。

           

          2. 百度 Car Life和Apollo

          簡介:

          1、打造智能車載服務生態,滿足用戶出行、娛樂、生活等多元化需求,構建人-車-家一體化互聯閉環成為時代趨勢。

          2、智能小程序,是百度提供的一種技術解決方案。開發者基于此開發出來的服務,在各類宿主環境(手機 App、車載系統、IOT 設備等)中,可做到用戶無感知安裝,即點即用。

           

          特點:

          1、設計特點

          車載端主界面分別采用藍、綠、紅、灰四個色塊對應四個功能模塊,「發現」集成音樂、娛樂、聽書、電臺等特色音視頻服務,采用紅色在界面中最為突出,其設計風格整體扁平,面性 icon 利于識別與點擊。

          2、功能特點

          智能小程序包括“車后服務”、“資訊”、“休閑游戲”、“視頻”、“購物”、“親子”、“旅游”、“工具”等8個類別,一共80多款。車企可以根據車型定位和自身需求自行定義和組合可供使用的車載小程序。

          百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒,但在生態的開放性上,百度車載小程序則做得更為徹底,可以在百度App、百度地圖、百度貼吧、百度網盤百度系App上運行。

           

          3. 騰訊 Ai in Car

          簡介:

          1、“騰訊小場景”是專為出行場景打造的車載輕應用生態,部署在云端,不需要下載,即用即走,并支持語音交互。

          2、分為3類,出行服務小型車、生活服務小程序和視聽服務小程序。

           

          特點:

          1、設計特點:

          運用的FutureLink3.0系統,FutureLink3.0 基于安卓平臺開發,在 12 英寸的中控屏幕上并沒有將大量的圖標堆砌在首頁,反而以地圖為背景,將六大功能模塊以大板塊的形式布局在地圖下方,整個界面設計簡潔。

          2、功能特點:

          最大特色:基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候,有些購買和支付的服務就會主動彈在車機上,用戶再通過語音完成操作。

          手機小程序是“人找服務”,那么騰訊車載小程序則進化成“服務找人”。

          △ 騰訊在車載場景下的生態布局

          Ai in Car,顧名思義,基于 AI 的連接能力和生態,融合騰訊內容生態的優質資源,包括資訊、視頻、IP、文學等板塊,為車主提供更豐富的內容消費。風行搭載的 FutureLink3.0 車聯網系統,就是和騰訊深度合作而誕生的優質案例。

          △ FutureLink3.0系統界面

          只在設置頁中,才會出現二級子菜單列表,而且提供的設置項目也不多,界面層級簡單,不累贅,也給司機帶來輕松愉悅的操作體驗。同時,基于行車安全考慮,在類似天氣、股票等查詢功能上,比較依賴語音控制。在娛樂生活方面,打通手機和車機賬號,用戶無需切換賬號就可以與車載導航、電臺、QQ音樂、微信等功能無縫銜接,支持車主組建聊天組,在行車途中與好友進行實時溝通。

          從整體來看 FutureLink3.0 的設計,它更像是一個把需求頁面展現在車主面前的「輕應用」,沒有傳統概念上的主界面、多層交互菜單以及相應的「系統特質」的設計,它更希望把海量資源建立在云端,終端只給車主呈現其所需要的服務即可。

           

          4. 谷歌 Android auto

          簡介:

          Android Auto 系統的工作原理是將手機連接到兼容的汽車,讓駕駛員可以使用汽車屏幕和語音操作與手機的應用程序進行交互。它提供了一種導航、收聽媒體和消息等的簡單方法。

           

          特點:

          1、設計特點:

          在 UI 框架設計方面,主屏幕以卡片的形式顯示通知、活動、導航和消息,右下角有啟動語音命令的麥克風圖標和底部的活動欄,這些特性屬于全局 UI。在它下方,應用程序內容區域顯示應用程序啟動器或當前使用的主應用程序的內容。

          △ Android auto手持設備與車載設計系統

          Android auto 將 Android 平臺擴展到汽車上,它有兩種使用方法:在手機上或在兼容的車載屏幕上。

          它有一個簡單的界面,標準化的用戶交互模型和強大的聲音動作,其目的是幫助司機盡量減少分心。需要注意的是,為汽車設計交互式應用程序與手持式設備的設計有根本上的不同,其應用程序的交互界面應該簡化,以確保司機的眼睛和手集中在開車上,減少司機分心。

          △ Android auto車載系統UI框架

          卡片上提供如消息字符串、圖標、圖形和操作等內容,會根據用戶最近的使用情況和優先級來確定卡片的大小。主屏幕會限制卡片的數量,以保持列表的簡短和相關。因此,當新的、更相關的內容出現時,應用程序的通知可能會從屏幕上消失。同時,抽屜式的交互方式,提供了簡單的操作和導航。每個抽屜項目必須提供一個單一的觸摸目標,避免在抽屜里放長的列表,或者在相同內容的視圖之間切換。這里官方給出的最佳 UI 做法是簡化內容,關注上下文,顯示新鮮的、有用的和大多數不滾動的項目,使用單行,對決策至關重要的較長字符串使用兩行。

           

          5. 蘋果 CarPlay

          簡介:

          CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布,最早出現在一些制造商的汽車展覽上。

           

          特點:

          1、設計特點:

          基于手機映射,所以界面除了橫向布局外,icon都和手機端統一。以簡潔的布局提供有用的、重點突出的信息,便于從駕駛員座椅上進行掃描。不要用不必要的細節和不必要的裝飾來弄亂屏幕。

          在整個應用程序中保持整體一致的外觀。一般來說,具有相似功能的元素應該看起來相似。

           

          2、功能特點:

          作為車內輔助、操作、娛樂的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景,而它的設計原則也圍繞著這一場景來規劃:

          • 成熟?;谧钍煜さ?iOS 應用,來設計界面元素,并提供熟悉、直觀的體驗。
          • 簡短。采用盡可能簡短的交互,不過度引人矚目
          • 相關。屏幕顯示信息高度相關,提供盡可能少選項,不需要復雜決策
          • 語音?;赟iri,以語音交互為核心,司機無需視線離開前方,手也不用離開方向盤即可完成交互。

          全新的電子車鑰匙,加上 Apple CarPlay 車載流暢的使用體驗,讓 iPhone 能在旅途上發揮更多作用。地圖、電話、信息、音樂、日歷、一言、一觸、一旋隨你駕馭。

           

          6、華為車機應用

          簡介:

          HMS for Car是華為終端云服務打造的智慧車載云服務解決方案,基于HMS(Huawei Mobile Services),通過AI場景引擎結合華為生態資源,為用戶提供精準豐富的出行場景內容和服務,助力汽車從交通工具向具有交互和服務的能力的智能終端進化。

          華為快應用是一種基于行業標準開發的新型免安裝應用,其標準由主流手機廠商組成的快應用聯盟聯合制定。開發者開發一次即可將應用分發到所有支持行業標準的手機運行。

          HMS Core提供端、云開放能力,幫助開發者實現應用高效開發、快速增長、商業變現,使能開發者創新,為全球用戶提供精品內容、服務及體驗。

          1、全球化分發。已上線超過170+國家和地區。

          2、全終端接入。全面支持從小屏幕到大屏幕各種智能終端。

          3、全場景支持??鞈弥边_鏈接和卡片嵌入全終端場景。

           

          特點:

          1、設計特點:

          在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一個個的APP圖標,需要點擊啟動進入后才能使用。筆者認為采用這樣移動端過于笨重的交互方式并不適用于車載場景;HUAWEI HiCar的設計理念是”安全便捷、自然舒適、智能貼心“, 對車載端的人機交互要素重新布局規劃設計,采用桌面卡片的設計方式,以滿足復雜駕駛狀態下的使用需求。

          桌面卡片是應用內容和功能特性的重要載體,用戶通過對卡片的快捷操作直達應用的核心功能,提升交互的便捷性。應用可通過接入 HUAWEI HiCar 桌面卡片的方式呈現最核心的功能和服務,并根據自身的需求特性,自行組合卡片元素以滿足不同場景下的用戶訴求。

          • 背板:背板樣式可以為色彩填充或設置背景圖。背景色支持黑、白、彩色三套。應用需提供三套背板以適配卡片主題切換。
          • 品宣區:品宣樣式為圖標+文字,應用可根據在此區域顯示品牌圖標和名稱。
          • 內容區:展示與應用場景相關的信息,其內容可以是圖片、文本或圖文樣式。
          • 操作區:操作區為文字或圖片按鍵,最多 3 個控件或 1 個控件組。

           

          2、功能特點:

          華為智慧助手,可結合用戶使用場景,以卡片形式推送提醒、服務和行程,實現智慧化服務找人。例如,送孩子上學時,車機端華為智慧助手將自動推送”有聲續播”卡片,用戶點擊卡片,即可一鍵續播孩子在華為手機上沒聽完的有聲兒童內容;用戶在開車下班回家路上,進入離家500米范圍內時,車機系統可自動啟動”回家模式”,提前打開家中的窗簾、空調等設備,方便用戶享受愜意生活。

          My Car功能面向車企開放華為手機等智能硬件系統級入口能力,能夠實現遠程控車、查車、汽車服務/告警關鍵信息等反向推送能力。遠程控車功能,可以滿足用戶高頻控車訴求,例如,遠程開關空調、尋車、查看門窗狀態等。另外,當車輛胎壓不足、門窗未關閉時,用戶也能通過手機、車機及時收到提醒。

           

          三、系統的開源地址

          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#h2-1587181522014

           

          參考來源:

          你真的了解車載顯示屏嗎?一文讀懂汽車中控屏幕發展歷史

          http://www.woshipm.com/ucd/896089.html

          https://www.qctt.cn/index/news/show/id/573724

          http://mp.ofweek.com/instrument/a045683023236

          https://www.zcool.com.cn/article/ZMTI3MzQ1Mg==.html

           

          原文地址:站酷

          作者:郝小七

          轉載請注明:學UI網》設計要知道-HMI設計必看!車載中控的前世今生

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

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


          文章來源:csdn

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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