<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


          1、什么是原子設計?

          原子設計是創建設計系統的理論方法,分為原子、分子、組織、模板、頁面五個層次。從最基礎的原子開始,原子構成分子,分子組成組織,相互協作以創造出更有效的頁面。

          原子設計借鑒了化學中看待事物的方式,并將其應用在數字產品中。例如我們看的界面是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

          圖片

          原子設計是一種思維模式,并不特指某一種設計風格或框架。通過原子設計理論,將產品和頁面聯系為一個有機的整體,其中的每個小元素都發揮著至關重要的作用。

           

          2、原子設計方法論: 從原子到產品

          原子設計有特定的框架,方便幫助設計師組織思路并在設計過程中作為指導。

           

          原子

          原子指化學反應不可再分的基本微粒,雖然基礎但會對分子和個體的形成產生很大的影響。

          同理在設計中,原子是構成設計的最基礎的元素,可以是一個icon、一種字體…本身不具備特有的功能但這些基礎元素同樣值得重視。

          圖片

           

          分子

          分子由原子構成,以一定的次序和排列方式結合成分子?;氐皆O計中,多個設計元素組合在一起,也會創造出一種新東西——具有明確功能性的組件

          圖片

          原子設計強大的地方在于,可以為分子(組件)的創造分配時間,以確保組件具有明確的意義和功能。

           

          組織

          不同的分子組合形成組織,在設計中各種不同的組件組合在一起,形成一個完整的功能模塊,例如在首頁輪播圖模塊,有圖像、文字等元素,還有按鈕、導航箭頭等組件。

          利用組織這個概念能幫助設計師建立模塊化意識,對頁面結構有更深入的理解。

          圖片

           

          模板

          通過元素、組件和功能模塊的相互關聯,從而得到產品的模板即產品框架,也可以理解為產品的低保真線框圖。

          圖片

          在這個階段,產品的信息架構和可視化的層次結構變得非常重要。產品頁面、搜索結果頁、主頁等都有各自的模板,會顯示內容的結構和基本的原型,方便后期使用。

           

          頁面

          在模板基礎上,繼續添加需要的細節,最終會形成完整的頁面,即產品的高保真原型。

          這個階段中需要注意的是,頁面中所有的占位符盡可能提供真實的內容——真實的圖像、真實的文案。

          圖片

          對于完成的頁面,我們可以利用原子設計的靈活性來調整和優化頁面設計。

          比如當有某些地方的設計沒有達到預期,可以靈活調整頁面中的某個分子或組織模塊來實現想要的效果。

           

          3、原子設計的優勢

          靈活性和適應性

          原子設計是在設計過程中構建事物的方式,但它并不限制對環境變化做出反應的自由。

          通過為產品中的每種類型的內容創建組件和模式,獲得一個靈活的系統。模板為產品的一致性提供了一定的支撐,后期既可以按這些模板原型快速設計,也可以根據需求靈活調整。

          原子設計相當于將設計內容納入到一個模式里,組成的頁面不僅擁有準確的內容,并能以最好的樣式展現出來。

          圖片

           

          系統模式

          原子設計鼓勵設計師投入時間和精力來創建整個系統,以便在產品設計的最后階段,能夠以一種高效的方式靈活地完成設計工作。

          圖片

           

          更少的組件,更高效的開發

          利用原子設計可以確保在項目過程中組件的數量會受到一定的控制,避免團隊重復設計同一個組件的多個版本或提供樣式差不多的副本。

          圖片

          控制UI組件的數量,帶來的好處之一就是開發的效率會變得更高。有了以原子設計方法為基礎的理論架構,設計過程的每個環節會緊緊串聯在一起,避免混亂。

           

          最后

          原子設計成為一種用戶體驗設計方法,以全新的方式帶領大家設計每一個元素、組件以及頁面,通過這樣的方法論有助于設計師構建一個完整的設計系統。

           

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

          作者:Clippp

          轉載請注明:學UI網》原子設計方法論!值得一學的設計思維模式

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

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

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

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



          2021 必備的超贊神器,用上它,效率都要提升三倍!!

          lanlanwork


          圖片
          上圖就是這個神器制作出來的一些效果,之前看Dribble上面有很多類似的設計,現在終于知道它們大部分來源于這個神器。
          下面我也找了一些案例,大家一起來看看。
          圖片
          圖片
          圖片
          這樣看,效果還是真的不錯,它支持顏色修改、樣式修改,目前一共有11種幾何樣式。
          圖片
          好了,現在下面正式介紹這個傳說中的神器,我相信大家一定會喜歡上的。
          圖片
          上圖就是這個神器的基本外貌,一共11種基礎類型,當點擊其中一個進去后,可以進行編輯。
          這里我點擊上圖中的第二個模式(MIXTAPE)進去。
          圖片
          如果大家英文不好,可以將整個頁面翻譯成中文,Google自帶的翻譯。
          進入這個頁面,大家可以根據自己喜歡的風格調整樣式,同時還可以修改顏色。
          圖片

          比如我可以選擇8X12列和行的幾何布局。

          圖片
          對顏色、列和行、開啟陰影調整,得到如上效果。
          圖片

          最終可以導出一張高清大圖(3240X4860),尺寸是完全夠用的。

          圖片

          隨便調整下又是一張不錯的幾何背景,還可以作為作品集封面。好了,關鍵時刻來了,神器的網址已經打包好,大家可以拿去使用。

          領取方式如下:添加小編微信,備注:神器699,小編會將下載地址發給你(小編不是機器人,回復會慢一些,大家稍等)。

           

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

          轉載請注明:學UI網》2021 必備的超贊神器,用上它,效率都要提升三倍??!

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

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

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

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



          需求太碎?設計師如何在小業務中提煉價值

          lanlanwork


          Chapter One .
          理清小業務的業務目標

          相對于大業務(例如網站改版),小業務因為簡單,其業務目標界定常容易被忽略。在日常設計中常會遇見設計師在不知道業務目標是什么、目標模糊、目標不正確的情況,直接從梳理小業務具備哪些功能入手,分析下現狀問題后開始制定設計策略,這往往會導致設計出現解決不了關鍵問題、出現偏差情況。產品功能本身只是滿足用戶需求和實現業務目標的服務載體,只是策略的表象。理清小業務所承擔的業務目標是前提,那么如何理清呢?

           

          理清業務目標

          小業務目標來自大業務目標,對大業務的業務目標進行一級級向下拆解后,即可獲得小業務對應的目標。目標拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標的拆解有一定難度)

          圖片

          Dapp設計詳情為例,在酷家樂大增長業務背景下,用戶活躍和用戶留存為核心的目標,設計詳情處于設計路徑的一個節點,拆解得到設計詳情的5個主要業務目標:

          • 設計詳情-用戶周活躍
          • 設計詳情-新用戶留存
          • 設計詳情-老用戶留存
          • 設計詳情-內容投稿數
          • 設計詳情-內容分享數
          圖片

          業務目標可分為2個類別:

          • 第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達成;
          • 第二類別:不符合用戶意愿,如內容投稿、內容分享,用戶不太會主動去完成,需要去創造動機,激勵用戶進行。

           

          Chapter Two .
          挖掘小業務關聯的用戶需求場景

          有小業務的業務目標后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現業務目標的達成。梳理清楚小業務服務了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?

           

          用戶訪談——獲取相關用戶需求場景

          用戶需求場景可以幫我們清晰了解到用戶使用產品的原因。用戶需求場景可以一句話進行界定,包含四個關鍵要素,其中需求本身最為核心,需要挖掘出當前訴求和其背后的潛在需求。

          “在【某環境下】,【某用戶】做了【某事】來滿足【某需求】”

          圖片

          用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設計師。梳理出設計詳情相關的8個需求場景:

          圖片

          訪談信息整合如下

          圖片

           

          規整用戶需求場景

          在業務訪談中獲取的場景往往都是碎片化的,碎片化場景對設計指導容易出現偏差,需要把場景結構化,為后續的方案設計提供依據。我把獲得的場景按照設計師設計流程進行規整,按設計前、設計中、設計后三個階段進行劃分。

          圖片

          以上梳理了設計詳情相關的用戶需求場景,再來看原設計詳情只基礎滿足了資料管理和方案展示的2個單一場景,在設計師的整個設計流程中只占了一部分。從設計層面來看,該2個場景局限在方案設計大場景中,設計更多做的是對其方案設計操作的體驗優化,在原有較好操作體驗的現狀下,其對給用戶創造價值上沒有很大增量。再從以上業務目標來看,2個單一場景很難去促使用戶對內容進行分享和投稿。

           

          Chapter Three .
          梳理產品功能矩陣

          在理清小業務的業務目標和需求場景后,下一步就是按照場景去梳理產品能力。

           

          小業務功能現狀分析

          老版app設計詳情的功能進行初步的現狀分析,設計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現,如營銷、談單;從業務目標來看,通過當前功能有較大的優化空間,如當前投稿很難讓用戶知道投稿有什么價值。

          圖片

           

          產品能力梳理

          分析現狀發現功能不足以支撐用戶需求場景,有獲取功能2個方向:

          1. 挖掘現有能力:可以擴大梳理范圍,從小業務所在的上一級業務到整個平臺,一級級往上梳理場景對應的現有功能。
          2. 打造新能力:圍繞場景,打造出新的功能

          圖片

          挖掘平臺上現有能力,可對業務的能力價值最大化利用,與其他業務形成互通,實現1+1大于2的業務價值。亦可圍繞場景打造新能力,可反推產品去發倔新功能。

          以下是設計詳情涉及所有場景的產品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進行了能力拓展。

          圖片

           

          Chapter Four .
          拆解每個場景的設計目標和策略

          在梳理出產品能力后,需要通過設計策略把產品能力有效組織起來,讓用戶快速感知快速上手使用。設計策略推導自設計目標,那如何得到設計目標?

          基于用戶需求場景將行為事件拆分,提煉行為事件再推導出設計目標,再基于設計目標給出設計策略。

          圖片

          Dapp設計詳情受制于移動端能力,只涉及設計詳情中5個相關場景,其設計目標和設計策略的拆解結果如下

          圖片

          拆解出設計目標后,基于目標分析產品現狀得到存在的設計問題。為什么要基于目標分析現狀?首先需要明確什么是問題,問題是導致目標和現狀不一致的原因。只有明確了目標才可以理性分析與現狀存在多少問題。在日常中時常看到設計師會直接得到問題,很多情況是默認假設了一個預設目標,但這目標得到不嚴謹、不全面,容易導致得到的問題本身也出現偏差。設計策略基于設計目標或問題得出,其最終都來自設計目標。

          圖片

          對老版Dapp設計詳情現狀進行了分析,得到了問題:

          圖片

           

          Chapter Five .
          設計策略落地

          在上一步得到設計策略后,圍繞著設計策略是設計方案。本段將不全部展開說明,只選3個關鍵點講述設計方案的思考

           

          設計詳情框架的設計

          Dapp設計詳情涉及5個場景的承載及產品功能繁多,設計三步思考:

          第一步:簡化功能認知,對功能結構化,以場景的維度重組織功能,并以場景打造功能集合的認知,建立場景能力區;

          第二步:梳理場景共同涉及的內容,作為聯系的載體承載場景的放置,設計詳情中展示態的方案涉及到了5個場景中的4個場景;

          第三步:提取場景中即時性和高優先級功能,打造快捷功能區

          框架如下:

          圖片

          建立框架后,填充具體的能力和內容。如場景入口放置于底部,并根據場景優先級做了主次的區分。

          圖片

          設計詳情框架建立后,打造細分場景中的設計。

           

          營銷獲客場景設計

          營銷場景的設計,將營銷組成拆分為可營銷內容、營銷的渠道、渠道內容展現三大類,就可以清晰去梳理出現有的功能,以及可從內容、渠道各自去拓展挖掘。內容和渠道清晰后,再傳達各渠道提供的價值激勵用戶去觸發行為。

          圖片

           

          談單場景設計

          談單場景關鍵在方案詳情上,談單面對不同情況,存在多種內容形式去展示方案。在上面內容梳理中最主要是3個內容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解,亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航,可快速切換到需要講解的地方。

           

          Chapter Six .
          上線驗證

          上線后數據平穩后觀測,設計詳情的周活提升了89%,每個場景下的功能數據都得到顯著的提升(tips:有部分數據因技術原因沒有采集到)。除了改版了Dapp側的設計詳情,后續對PCweb側的設計詳情進行迭代,同樣起到不錯的結果。數據的結果驗證了方法的可行,并起到了積極的效果。

          圖片

           

          Chapter Seven .
          思考小結

          以上是我應用這套設計方法去做了塊小業務優化,反向推動進入產品迭代,上線后取得了不錯的成績。在本次賦能后,對小業務中多了一些感悟

          • 小業務是大業務的縮影,可以作為去賦能大業務前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業務改動影響面也小
          • 因知識廣度和深度的限制,不是所有設計師都可以一開始就可以把控大業務,小業務可作為打磨設計深度專業度,一些小業務的復雜度并不低于大業務
          • 該設計方法同樣適用于大業務,但方法是死的,不是所有情況都套用,得需要把握重點靈活應用
          • 不要總想著搞個大新聞,在能力未被業務方認可時,小業務的賦能可以成為一個很好的發聲口
          • 不要輕視小業務,有可能是你根本還不了解

          以上內容,感謝閱讀!

           

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

          作者:小波

          轉載請注明:學UI網》需求太碎?設計師如何在小業務中提煉價值

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

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

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

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


          B端設計也“好色”

          ui設計分享達人


          我們需要什么樣的配色方案?


          B端的系統的主色代表著一個系統的氣質,與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案,目的就是期望從它們身上找出共性,引領我們的系統找到最適合的方案,這是知彼。

          光有“知彼”是不夠的,我們還要清晰的知道自己是誰?這樣我們才可以說我們的配色方案是最適合我們的,有理有據的方案。


          B端系統的真正使用人群比較復雜,具有年齡跨度大,文化水平參差不等,從事行業廣泛等特點。



          源于自然之美的色調,突顯靈活性與再生的創意!


          依據彩通色彩研究所專家的說法,紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩,這些色彩的百搭性質穿越季節,容許更多的選擇自由,適于表達原創的風格,也足夠靈活來適應現代新的更片斷化的生活方式 。

          “2021春夏的色調呈現出大自然,強調我們渴望擁有全年皆宜的靈活色彩,這一季的色彩充滿道地真實的感覺,這種感覺對色彩而言愈來愈重要,同時結合了某種程度的舒適與輕松感,并散發出活力,激勵振奮我們的心情”


          說到這里“主題色”如何來選擇?


          色彩對于人的大腦的沖擊力大于造型,比如淘寶,我們會記憶起淘寶的主色是橙色;色彩是影響人類視覺思維的重要因素,色彩能直觀的體現產品的性格和氣質,所以選擇一款適合產品的主色很重要。


          我們的用戶在更替,如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題,新的用戶群體從小接受的教育和喜好決定著產品的發展方向。

          比如:我們這次顏色升級中律動、青春活力是核心關鍵詞,而藍色則可以讓產品視覺符號得到延續。



          對于主題色的選擇指標有哪些?


          通過關鍵詞圖片像素化提取顏色,同時參考B端產品顏色流行趨勢和當年的年度流行色,以及竟品顏色分析結果,獲取藍色的色相、純度、明度范圍。


          2020潘通年度顏色經典藍(19-4052 Classic Blue),顏色值為#174A7B(H207 S81 B48)

          2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver,顏色值為#02569D(H207 S99 B62)


          假設:竟品的主題色藍色的色相范圍為205-225;純度的范圍為70-96,平均值為86;明度的范圍為70-98,平均值為88,B端產品流行趨勢的主色也多是藍色系,色相范圍為200-232;純度的平均值為70;明度的平均值為68。



          色彩的使用范圍及色階有哪些?


          色彩的應用場景包括:關鍵行動點,操作狀態、重要信息高亮,圖形化等場景;針對這些使用場景只有一個色值是不能滿足所有場景使用的,所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級,或傳達信息,或強化界面層級。


          在色彩系統中,常使用 Tints and shades 系統來建立調色板,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板,在符合無障標準的區域,選擇不同明度飽和度的色彩,形成有梯度、有層級的彩色調色板。



          B端產品中光有“主角”是不夠的,還要有“配角” 所以我們還要看一下輔助顏色是如何定義的?


          輔助色是為了幫助頁面區分狀態和層級而設立的顏色,主要包括圖表類儀表盤顏色和功能色,通過合理的顏色傳遞產品正確的信息,讓其信息傳達更明確清晰。


          輔助色的作用是配合襯托產品主色調,在不同的產品中,輔助色運用的策略是不同的,比如我們在竟品調研中發現,輔助色經常是取自主色的鄰近色、對比色和互補色等。


          儀表盤配色:通過對竟品的分析可得知,優秀的儀表盤的配色有多系列及低純度的特點,多系列配色是為了滿足用戶個性化的需求,而低純度是考慮用戶在長時間使用產品,色彩對其心理的影響。


          功能色:這類顏色在系統一般不會隨意更改,而且特定的語義一般都有固定的色相,只需改變其純度和明度,使其視覺上符合主色的氣質,使其搭配和諧。


          1.通過默認主題色選擇輔助色及默認儀表盤顏色

          我們以默認主題色為#467FEA(H 219 S 70 B 92) 為起始點,S(飽和度)、B(明度)保持不變,H(色相)以180°為起點,以15°為增量或減量標準,生成24色色板。這個色板是我們選取輔助色的重要依據。



          以鄰近色、互補色、對比色為原則選擇豐富的顏色


          鄰近色:在色相環中,相差15°的顏色為鄰近色,凡在60°范圍內的顏色都屬于鄰近色的范圍,主色和鄰近色的色系組成的搭配,可以在同一個色調中構建出豐富的視覺層次感和質感,賦予不同的功能含義,信息表達明確,和諧統一感很好,視覺上的趣味性,顏色的搭配顯得很柔和。


          對比色: 在色相環中,角度相差120°-180°之間的色彩,這里使用了120°為角度來選擇對比色。


          互補色: 在色相環中成180°角的兩種顏色,互為補色;主色可以和其互補色的兩個色彩的搭配,該色彩可以為鄰近色,例如:藍色和黃色、橙色的搭配;這種搭配既能保持互補色搭配強烈的對比度,區分關鍵信息,次要信息,又能增加視覺上的趣味性,色彩看上去豐富多彩。


          例如:藍色作為主色,互補色黃色作為輔助色應用在圖表、圖標和標簽上,再選擇黃色的鄰近色橙色作為另外一個輔助色,應用在不同的關鍵信息上,有助于用戶更好的閱讀產品的功能和內容。



          獲得輔助色-9色相


          通過鄰近色、互補色和對比色的選擇,我們從24色色相環中得到了9色相色環,9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。


          校正輔助顏色


          雖然我們保持相同的飽和度和明度,使用科學的方法得到了較為合適的色相,但由于色彩本身自帶感官明度屬性,導致在視覺感受上的感官體驗并不同頻。


          黃色、綠色的明度即發光度較高,藍色就稍微偏暗一些,導致色板看起來不一致,為了讓不同色相看起來更加協調,需要調整色板的明度和飽和度,以保證視覺感官體驗同頻且更加和諧舒適。


          校正后的顏色主要用于功能色和儀表盤顏色。




          從輔助色中提取功能色及儀表盤色系


          通過對竟品的分析總結同時結合默認主題色分析得出的9色色環,歸納分離,最后形成系統的默認儀表盤顏色。


          功能色的目的是明確信息及狀態,比如成功、出錯、失敗、提醒、鏈接等;功能色的選取需要遵守用戶對色彩的基本認知,結合分析得出的9色色環,顏色校正,得出系統功能色。




          輔助色的色階


          為了度量不同的可視化從高到低的數值,我們儀表盤顏色遠遠不夠,所有為了保證視覺上的統一性,我們需要加入輔助色的明度色階來區分數據層級。


          同時我們產品有深色和淺色兩種模式,由于視覺對比的原因,在深色的場景看下看的顏色,和淺色場景下看到的顏色是兩種感受,深色場景下顏色會發亮,所以為了保持視覺上統一,我們也需要加入輔助色的色階。


          輔助色色階建立方法與主色的色階建立方法一致,使用 Tints and shades 系統,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板。



          模擬方案一主色、輔助色及消色匯總


          通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶,我們分別給顏色取了名字和編號,命名方式采用植物色彩命名,這也是200多年前顏色數值出來之前的命名方式,最早見于1814 年出版的《維爾納色彩命名法》



          本期交流就先到這里,希望這個配色的思路能夠幫到大家,感謝大家的耐心觀看!

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

          文章來源:站酷  作者:Evan繪酷設計

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

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

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



          當你設計時,你應該思考些什么

          ui設計分享達人

          作為設計師的我們總會在自己的閑暇時間去做設計有關的練習,那么我們到底有沒有深入思考過我們怎么去練習以及如何思考才是最有效的呢?也許有的人練習了很久發現自己的進步速度很緩慢,有的人練習的不多,但每次輸出的作品質量跟上次相比卻提升很多。那么其中的差異到底是出現在哪些方面呢,我之前也一直在思考這方面的問題。現在將自己領悟出來的一些方法分享給大家,希望能夠起到一些幫助。



          前言:什么是最有效的學習方式


          在開始正文之前,我希望大家能夠理解什么是最有效的學習方式。在當前的大環境下,各個平臺學習類的教程或者文章層出不窮,我們似乎總是有學不完的知識,每天也都在積極地學習,當時看完覺得收獲頗豐,但一天工作下來也許看過的東西就忘了50%,甚至過了一周后發現自己已經什么都忘了。


          那么你有沒有思考過為什么會產生這樣的結果呢?對于自身的學習和思考方式我們是不是還有待改進的方法?我們可以先來了解一下學習金字塔這個模型:

          學習金字塔是美國緬因州的國家訓練實驗室研究成果


          從圖上我們可以看出,我們平常用的最多的聽講或者閱讀的學習內容留存率[兩周以后還能記住內容的多少]僅僅只占5%~10%這個區間,而討論/實踐/教授給他人等這種需要自身參與性強的學習內容留存率則高達50%-90%,平常通過閱讀等獲取信息很容易遺忘的原因也有一部分在于此。


          不難發現,前四類的學習行為都是屬于被動輸入型學習,而后三類學習行為則是屬于主動輸出型學習。這也就是常說的“最有效的輸入方式就是輸出”。


          因此要想提高聽講或者閱讀的學習內容停留率,我們需要將被動輸入轉化成主動輸出,即我們在進行這類活動時需要調動大腦積極思考,將大腦接觸到的信息與我們已經掌握的知識產生關聯去想一下我看了這些內容可以運用在哪些方面以及怎么去運用,并在最后真正用于實踐[經歷過實踐去輸出你才會發現那些潛在性的問題]。我們才能更為有效地去消化一篇文章或教程。好了,希望大家看完能積極思考一下本文所闡述的內容,能夠擁有一些不一樣的收獲就是我寫這篇文章最大心愿。那么接下來進入正題。



          01 明確自己的設計目的


          做任何事情都應該擁有一定的目的,因此我們在開始一項設計練習時,第一件需要做的就是確定我們的練習目的,即你通過這次練習想要表達什么,這種表達可以是技法的展現或者說內心情感的表達,只有明確當前的目的性,你才能有更精準的方向。

          但很多人會發現即使自己設立了目的卻總是會因為各種原因而中途放棄掉,那么能讓我們去堅持完成目的的核心是什么呢,就是去量化你的目的和設立明確的截止日期。量化目標就是要將你的大目標分解到具體每一天應該完成的小任務,這樣拆解不僅降低了目標的難度,也能清楚知道每天該做什么,有明確截止日期的話就能避免拖延。


          比如拿“在一個月內我的練習目的是做電影界面的設計“和”在1月1日至1月30日期間我要完成30張電影界面“相比,顯而易見后者的目標更具象,更具操作性。只要我保證每天一張界面,即可在規定時間內完成任務,偶爾如果遇到特殊事件也能及時彌補落下的部分。前者模糊不清的目標很容易讓我們三天打魚兩天曬網,一張界面也是練習,一百張界面也是練習,也許一個月下來發現自己就做了那么幾張界面,完全達不到練習效果。



          02 目標的確立要跳出我們的舒適區


          很多人會說,我確立了明確的目標啊,也有在堅持練習,可一段時間下來卻感覺自己的能力沒有很明顯的提高。這有可能就是你的目標建立出了問題。那么怎樣的目的才能最有效地提升我們自身的能力呢,在我看來跳出自身舒適區去建立目標效果才是最正確的。

          舒適區指的是一個人所表現的心理狀態和習慣性的行為模式,人會在這種狀態或模式中感到舒適。舒適區,又稱為心理舒適區


          如果你發現你每次確立的目標自己都能夠很輕松愉快地完成的話,那么你可能只是一直在自己的舒適區內做著重復性的工作, 對自身的能力提升并不會出現顯著變化,也就是常說的那句話“你不是有五年工作經驗,而是把一個經驗用了五年!“

          跳出舒適區,指的是來到學習區,去有意識地練習那些你了解過,但是不能熟練應用的技能。例如你對界面的設計已經比較熟練了,但是你對交互動效這一部分仍然感到比較陌生,那么如果繼續堅持界面練習可能只是簡單在堆積你的練習數量,這時你更應該去嘗試一下界面的一些交互效果并將其制作出來。


          這樣你就可以將你已經掌握的知識與并不熟練的知識連接起來,從而能夠更高效地學習和吸收新的知識。前期盡量選擇簡單的效果練習,循序漸進,以此來建立你的自信心,不要急于求成而誤入恐慌區,妄想在幾天之內就能夠做出和從業幾年的大神一樣的高難度復雜效果,那樣不僅學習效果差,還會打擊你的自信心,造成反效果。



          03 多看的重要性以及怎樣去看


          相信大家對于多看這一點已經是耳熟能詳的詞匯了,曾經也聽過很多次大神分享,無一不提及多看多練這種類似的話。那么你有沒有深入思考過為什么很多高手都在提及這一點呢,我們所謂的看和他們的看是否說的是一個概念呢?

          牛頓曾說“我之所以比別人看得遠一些,是因為我站在巨人的肩膀上”,那么在我的理解范圍內,多看即是站在巨人的世界里看設計。


          在諸如國內網站站酷/UI中國以及外國網站dribbble/behance等平臺上,我們可以找到很多優秀的設計作品(在看的過程中可以不要只是局限于UI設計,可以更多地看看首頁的其他作品,能夠最大限度地提高你的審美),遇見好的作品我們不要只停留在視覺表面,要學會去分析好的設計,以及與我們自身所做的界面產生對比。


          分析最直接的方式就是自我提問。這個設計我為什么會覺得它好看,是顏色的搭配吸引了我,還是版式的設計非常合理,又或者是整體的配圖非常和諧?”當然,你還可以更近一步——“顏色的搭配是哪里吸引了我,是對比色用得非常合理,還是整體色彩的占比非常平衡,又或者說是顏色的明度和飽和度搭配得非常好看?“


          最重要的是要聯想到自己已經掌握的知識,將你發現的好的方面與自己的知識進行結合。“如果我下次在做界面練習的時候,我該怎么去使用這種色彩搭配,如果換成其它顏色,我有沒有能力將它搭配得像這樣和諧美觀?“

           

          這樣自我提問的方式最終目的是將好的東西內化為自己的知識,否則你看再多的東西,也只是你每天所接觸的信息而已,過眼即忘,并不能有效轉化成為你的設計認知。當然,你要將那么好看的設計都收進你的素材庫里,好記性不如爛筆頭,建立素材庫就是為了讓我們更好地去復習我們曾經欣賞和思考過的東西。

          自己的eagle資料庫



          04 不找參考的設計都是耍流氓


          畢加索曾說過這樣一句話:好的設計師借鑒,偉大的設計師偷。喬布斯也曾說過類似的話。舉個例子,我們可以先看左邊一個比較古老的界面-施樂公司70年代的界面,再看右邊喬布斯拿來改進的做的macintosh界面:

          以及經過改良后的macintosh界面,然后比爾蓋茨在看過這個設計后而做出的關于微軟的界面

          看了上面兩幅對比圖,我們可以發現,偉大的人在創作時也需要找參考,但他們都是盡量吸收參考好的部分,然后加入自己的思考和理解,去創造更好的東西。他們并不是說憑空就可以創造出經典的東西。


          所以說,找參考是設計過程中非常關鍵的一個步驟,在找參考的過程中,就相當于你在和其他優秀的設計師對話。因為一個設計師的腦容量是沒法與全世界設計師的腦容量相比的。雖然參考不一定是你做設計的標準,但卻能對你的創意和設計帶來一定的方向和靈感。因此我們在開始一項新的設計目標前找參考,去觀察別人的作品是怎樣表現的,他們設計的東西出彩的地方在哪里,和我心中所想的有哪些不一樣,我該怎么在我的設計中去融合那些出彩的東西。


          只有當你找到足夠多的參考,你的心中才會有一定的衡量的標準,才會知道好的設計和壞的設計差距在哪里。最終體現在你所做的設計上。也許有人會說,有的厲害設計師感覺都不怎么找參考,那是因為他們的腦海中已經積累了足夠的參考來讓他們自由調動。



          05 你在設計時是否做到了專注


          我們可以做一個小實驗,在自己手機上下一個Forest[番茄時鐘],設定兩個小時的設計練習時間,看看在這個持續時間內你有多少次會情不自禁地拿起手機看消息。(我在做這個測試的時候會發現有很多次都會無意識拿起手機看信息),由此可見我們即使是在練習時間內也會存在很多浪費時間的小動作,如果丟掉這些小動作,我們在有限時間內的產出將會大大提升。

          我也是在前些日子看《深度工作》這本書時才意識到專注工作的重要性。書中說:想要迅速掌握困難的技能,你必須高度專注,不能有任何干擾。高質量工作產出=時間x專注度。而現實中的我們往往是花費了很多時間,卻由于自己的專注度很低,導致整體效率和產出都大打折扣。我想這也能解釋為什么都是在同樣的時間內,每個個體的成長度都不一樣,成長快的人會把單位時間的效率發揮到極致。


          因此在每次給自己規定設計練習時間的過程中,盡量找一個安靜不受打擾的環境,將手機設置成番茄時鐘模式,保持高度的注意力去完成自己的練習目標,你會發現你比平時用了更少的時間卻做出了更好的東西。



          06 對于規范的理解


          我們應該知道,UI設計不同于繪畫以及平面設計,它是基于一定限制而進行的設計活動,而這些限制我們稱之為設計規范。就像你在開始游戲之前需要知道游戲規則一樣,我們在開始設計前也是必須要了解相應的設計規范的。比如狀態欄的高度,底部圖標的大小,間距的大小,字號的規范等,在這里不做詳細解讀。也許剛入行的人會覺得設計規范限制了設計的發揮性,但其實規范只是讓你能夠朝著一個統一的方向和保持基本數值的準確性,但卻依然能夠給設計很大的發揮空間。就像之前看到的一段話:[此處將其做成了一個圖片]

          也許看完這個你更能理解規范對于UI的一種作用,盒子就像我們的手機,展示空間就那么大,你需要在一定的限制內發揮你最大的能力去做出好的設計。

           

          因此,當我們在練習app界面時,心中一定要有自己的一套規范(不論是否做出來),執行過程中嚴格按照定義的基礎規范來,從而更能夠高效地完成練習任務和保證界面的統一性。


          07 學會建立自己的界面走查表


          就像在學校時,老師總是強調我們試卷答題完成后一定要進行自我檢查去排除一些不該犯的錯誤。同理,設計也是一樣,每當我們初步完成了設計界面后,我覺得最重要的也是進行自我檢查,排除一些界面常見的錯誤。當然,我說的走查并不是單純看文字等顯而易見的錯誤,而是按照一個優秀的界面要求去走查我們的界面:


          設計風格統一了嗎?

          界面的整體設計風格是否統一,符合產品調性。顏色的使用/圖標的設計風格/圓角大小的統一等;

          圖片是否清晰?有無版權?

          你在整個設計界面所使用的圖片是否是高清的,有無模糊或者水印,圖片是否會構成侵權等,一個低質量的圖片會瞬間讓你的界面下降了一個檔次;


          信息層級拉開了嗎?

          做的界面整體的字號大小是否有重點區分,能不能清晰地看出文字的層級關系,元素間距有沒有符合各層級的對比關系;


          投影用對了嗎?

          你的投影考慮了環境色的影響嗎,如果用純黑的投影會讓整個投影看起來非常沉重;


          你的界面有呼吸感嗎?

          你的界面看起來會不會很擁擠?不要堆得滿滿的,注意留白以保持元素的呼吸感,從而讓界面更耐看;


          對齊了嗎?

          不論你是工作幾年還是剛入行的新人,都一定不要忽略這個問題。左對齊右對對齊以及居中對齊。說起來很簡單,但不要因為這個錯誤的發生而讓別人質疑你的專業性;


          以上列舉了一些部分常見的界面問題走查,還有更多的界面基本問題值得大家去留意。我認為走查表的建立還是應該基于自身的經驗來制定,那樣不僅會更符合你的設計風格,更會讓你走查起來更加高效。剛入行的同學的話可以多看看高手關于界面精度提升的一些建議來作為自己的走查參考。



          08 不要閉門造車,走出去


          相信通過走查表的建立會讓你發現一部分的問題,但礙于自己的審美水平以及理解能力,我們很難去完全找出自己的問題。也就是說,當我們通過走查表糾正了一些常見問題后,我們要學會向大神們去請教問題。


          通過你認識的一些大神或者在設計群里發出自己的界面,讓其他更厲害的人去發現你界面的其它問題,這樣會讓你意識到一些你不曾發現的問題,從而提高你的判斷能力和界面水平,督促自己的進步。當然,不要把請教別人當成一件理所當然的事情,學會向那些給你提出界面修改意見的人們說一聲謝謝。(在這里也謝謝曾經幫助過我的那些可愛的人們~)

          寫在最后:少熬夜多鍛煉,注意身體健康


          在這里想向廣大辛苦奮斗的設計師們說一句,每次做完設計練習還有時間就多多鍛煉吧,身體從來就是我們奮斗的本錢,只有身體健康才能更好地作圖呢。所用時間的長短從來不是衡量一個人厲害的標準,熬夜不一定代表就能夠做出更好的界面,專注和高效才是我們應該學會的方式,希望大家在新的一年能夠用更少的時間做出更精致的界面。

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

          文章來源:站酷  作者:進擊的M

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

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

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

          重新設計東南亞頭部在線超市的真實案例

          lanlanwork


          I. 發現

          客戶訪談

          由于這位甲方的合作態度良好,所以設計師有機會與 SESA 的創始人和產品經理進行了 2-3 次會議。

          借此了解了業務目標、用戶需求和技術限制等關鍵問題:

          圖片

          主要問題:

          • 低轉化率:雜亂的界面使用戶很難瀏覽商品。
          • 手機端體驗不友好:幾乎 90% 的用戶是通過手機訪問網站,但手機版的設計不夠理想。
          • 手機端糟糕的界面和體驗:目前他們使用的是現有的網站模板,根據目標用戶的反饋,缺乏優化而且加載速度很慢。

          客戶需求

          • 一鍵式購物
          • 輕松的界面和體驗
          • 無縫的商品搜索
          • 折扣和優惠更容易被看到
          • 使用網站時能感覺熟悉而簡便

          成功指標

          • 增加客單價
          • 增強人們的對品牌的認知感
          • 增加用戶和訂單數量
          • 無縫的體驗
          • 讓健康的生活方式更加受歡迎、評價、容易取得,更加有趣而美好
          • 提供并教育用戶健康的生活方式,并轉化為愉快美好的生活

           

          目標人群

          根據產品團隊提供的數據,整理出了目標人群的特征:

          圖片

           

          II. 構思

          人物角色

          根據以上信息,整理出了兩個完全不同的人物角色:

          圖片圖片

           

          故事版

          沒有區分人物角色的故事版:

          圖片

          目標用戶的故事版:

          圖片

           

          體驗地圖

          思考分析用戶旅程的五個階段(探索網站、比較商品、確認下單、完成購買和接收配送)和用戶感知的三個方面(行為、思考和感知),制作了體驗地圖:

          圖片

          將當中的關鍵信息挑選出來:

          圖片

           

          競品分析

          設計師找到了三家主要競品,先大概了解他們的特色和優勢:

          圖片圖片圖片

          然后從 Google Play 的評論中尋找競品的問題,這樣就可以思考如何戰勝他們:

          圖片圖片

          P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產品),具體方法我之前有分享過:別總想著數據分析/用戶調研,先把評論分析做了吧!

           

          III. 設計

          信息導航

          先把大致的用戶流程確定下來,這樣對整個產品就有了一個整體構思:

          圖片

           

          線框圖

          然后用手畫出線框圖,定下頁面的整體布局:

          圖片

           

          低保真

          將線框圖手稿用繪圖軟件細化,制作成低保真方案,用來向客戶展示和做用戶測試:

          圖片

          圖片

           

          IV. 完成

          可用性測試

          找用戶做測試時,用的是低保真可交互原型。

          根據測試發現的問題,設計師直接將優化方案運用到了高保真方案上,所以下面整理的問題都用高保真方案來配圖展示:

          • 1. 自動定位:測試之前用戶必須手動搜索位置。
          • 2. 屬性選擇:由于客戶想要一鍵式購物,所以當用戶點擊熟悉(通常是重量)右側的箭頭時,可以反轉卡片進行詳細選擇。

          圖片

          • 3. 促銷展示:原本設計了三個促銷區,但是測試中發現用戶面對大量的信息無法充分理解,所以移除了一部分,只保留了頭圖和分類優惠。

          • 4. 商品導航:為了避免用戶迷路,將商品分類導航放在了所有頁面頂部,并且懸停時展示子分類和相關文章。

           

          高保真

          圖片

           

          響應式

          這個網站需要具備很高的響應式能力,不論在 PC 端還是手機端,都能輕松使用。

          但由于 PC 端和手機端的尺寸相差太大了,所以不得不使用斷點(Breakpoint)來判斷用戶當前處在哪個端,并展示相應的界面。

          這個斷點的概念在柵格系統很常用到,指的是當界面尺寸縮小或增大到某個(或幾個)零界點時,間距大小或其它界面元素發生突變。

          圖片

          上圖來源:三種最主流的響應式柵格

           

          這個方案的對于移動端的特殊處理包括:

          • 確保商品分類的位置,方便用戶記憶
          • 使用漢堡菜單
          • 提供模仿原生 APP 的吸底導航

          圖片

           

          Before&After

          最后對比一下優化前后的方案:

          圖片

          圖片
          圖片
          圖片

          圖片

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》重新設計東南亞頭部在線超市的真實案例

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

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

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

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




          UI&UE實用方法論 | 一直被錯用的米勒法則(7±2)

          lanlanwork


          因為「米勒法則」研究的是人類大腦的短期記憶量,而導航菜單、金剛區這些場景,是側重用戶識別,而不是側重用戶記憶。試想你作為用戶的時候,你會去記導航菜單的名稱嗎,哪怕是短暫地記下來(就像我們記短信中的驗證碼,然后到另一個應用中輸入的場景一樣,短暫地記住)?我想大部分的人在這些場景中,應該都是所見所得、過眼云煙的吧。

          并且“導航菜單的設計旨在用戶識別而不是用戶記憶”這個觀點,在UX研究咨詢公司 Nielsen Norman Group(NN/g 尼爾森諾曼集團)的“web可用性”一文中也有指出。

          所以以上導航菜單、金剛區的案例,產品可能確實也是有在控制菜單項目的數量,但更多應該是出于對「希克定律」的考量,而不是「米勒法則」(我之前也有在《交互四策略實現??硕伞?/a>一文中說過:用戶的決策能力會跟隨選項數量的增長而降低,給用戶非常多的選擇,約等于沒給用戶選擇)。

          這些案例完全是強行反推,給套了個「米勒法則」的結論…實屬不妥…那我就來談談,我對「米勒法則」的理解以及它在產品設計中的用途。

           

          01、「米勒定律」在研究什么

          米勒在1956年《心理學評論》刊中的《神奇的數字7±2:我們處理信息能力的一些限制(The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information)》一文中,首次提出「米勒定律」。但該文只算是一篇闡述學術觀點的文章,不算嚴格意義上的論文。

          米勒在文中引用了實驗者記憶變化音調的實驗,發現人們在短時間內可以很好地記憶并復述5~6位的信息,隨著收到的信息位數增多,記憶出錯的概率也在不斷增加。但因為實驗者存在個體差異,最終的信息記憶量基本都能在該基礎上再浮動2~3位。所以得出了“人的大腦在短期記憶中最多可以記住大約7±2個信息團”的結論。

          但因為該實驗與文章不屬于正式的科研研究和論文,所以后來的科研學者又對“人類短期記憶上限”進行了更多的實驗研究,最后形成了很多種學說。有堅持7±2的守舊派;有認為最佳短期記憶信息團為4±1的創新派;也有認為“人類的最佳短期記憶不應該被束縛于一個固定數值區間”的不站隊派(確實 NN/g 尼爾森諾曼集團也說過,用戶的短期記憶能力存在較大的個體差異,前25%的人群比尾部25%的人群會好大約2.4倍)。

          但不論怎么說,這些實驗都明確表明了:人的短期記憶存在上限,只是對具體能記住的信息團數量存在分歧。

          基于這個結論,我們在設計產品時,該如何加以運用呢?

           

          02、在人機交互中的運用

          NN/g 尼爾森諾曼集團基于「米勒法則」,提出了以下幾則設計指南參考:

          • · 響應時間必須足夠快,以便用戶在等待下一頁加載時不會忘記他們正在做什么;(體驗側)
          • · 更改訪問鏈接的顏色,以便用戶不會忘記他們已經單擊過哪里;(UI+交互側)
          • · 不要讓用戶去記優惠券代碼,而是該將優惠信息置入短信或郵件中的鏈接,通過鏈接自動將優惠券轉移到用戶的購物車中。這樣可以讓計算機承擔記住晦澀代碼的負擔;(交互側)
          • · 在用戶可能需要幫助的場景顯示“用戶幫助”功能,這樣他們就不必前往單獨的幫助功能區去記步驟,然后再回來解決手頭的問題。(交互側)

          你會發現,實際上專業團隊對「米勒法則」的理解,基本都在于如何解決“人的短期記憶上限”問題,并沒有去糾結,到底是7±2,還是4±1…

          并且我在 NN/g 團隊每一條設計指南的后面都標注了該條指南作用的側重向,發現大多都體現在交互側。因為「米勒法則」研究的是人的短期記憶極限,在視覺表現層其實很少會運用到。視覺更多強調的是“從識別到操作”,這并不是「米勒法則」的研究內容。

          舉一些切實的例子吧,基于「米勒法則」而誕生的產品交互中,我們最常接觸到的就是移動設備自動獲取短信驗證碼,方便用戶一鍵填充;通過圖像識別用戶的銀行卡號,減輕用戶記憶負擔。

          這一類有關用戶短時記憶的場景,為減輕用戶記憶負擔而誕生的交互形式,才是真正的基于「米勒法則」。

          現在你明白了嗎?因為「米勒法則」中提到了短時記憶極限量為7±2個信息團,讓許多人都去關注數字了,而忽略了「米勒法則」到底在研究什么。然而這個數值,迄今為止,在科研領域依然還存在著分歧。

           

          03、關于「米勒定律」的拓展與延伸

          3.1 拆解與再組合  

          米勒在他發表的文章中也提到了:雖然短時記憶存在上限,但是人們的大腦也總是在努力尋找其他方式拓寬這個極限,例如拆解與再組合。

          在前面米勒讓實驗者記憶變化音調的實驗中,就有人通過自主拆解、再組合信息形成信息團的形式,來增加自己最終記住的單位信息數。

          基于此,前面圖像識別用戶的銀行卡號的示例,如果因為技術受限而無法實現,我們也可以通過拆解卡號為“4位一個信息團”的方式,來方便用戶記憶、輸入與校驗。這樣在體驗方面也是一種彌補。

           

          3.2 讓用戶放棄記憶  

          要將用戶的記憶負擔減輕到極限,那就干脆讓用戶放棄記憶。

          例如蘋果基于自己的云管理與密鑰技術,在識別到用戶在創建密碼時,會自動填充強密碼,強密碼復雜混亂到很難被人腦記憶。

          一方面加強了密碼的安全性;另一方面,搭載其他技術手段來減輕用戶的記憶負擔,不再糾結于用戶究竟能記住多少個、多少位的密碼,直接將用戶需要記憶的內容減輕至0,這也許才是真正基于「米勒定律」而創造出來的產品設計吧。

           

          04、寫在最后

          其實這篇文章我認為更多是寫給交互和體驗設計師看的,如果你著手的功能有涉及到用戶記憶的場景,不防可以參考一下這些減輕用戶記憶負擔的案例,還有NN/g的設計指南。

          但好像現在「米勒定律」被很多UI設計師用成套路了…然而你發現了嗎,文中「米勒定律」的案例,與視覺、與“7±2”很少存在關聯。

          如果文章開頭導航菜單、金剛區的例子,你硬要說是參考了神奇數字7±2,我認為勉強也算行吧(嗯…勉強算)。

          因為雖然我認為其設計理論更多是建立于「??硕伞怪系?,但「??硕伞垢嬖V我們要減少展示給用戶的選項數量,卻并沒有給出一個建議值。如果你希望在某些場合給你的設計一些立足點(大家懂的),你如果說結合了「??硕伞古c神奇數字7±2,我認為比直接說基于「米勒定律」要更內行一些。

           

          原文地址:UCD耍家(公眾號)

          作者:Howiet

          轉載請注明:學UI網》UI&UE實用方法論 | 一直被錯用的米勒法則(7±2)

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

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

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

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



          單色配色你真的會用嗎?(實操篇)

          lanlanwork


          01 單色配色實操

          圖片

          選擇基色“H:255 S:100 B:100”的深藍色為背景。

          然后繪制兩個正圓,調整底對齊:

          圖片

          圖片

          圖片

          大圓顏色調整為和背景相同的顏色,透明度降低至0;調整小圓的顏色,色相(H)和亮度(B)保持不變,降低飽和度(S)為80%。

          圖片

          為了讓顏色混合更融洽,給主體執行“效果—模糊—高斯模糊”;再執行“效果—紋理—顆?!碧砑淤|感。

          圖片

          最后添加文案排版,方案一就設計好了。

          可以看到本案例精簡了色彩層級,色調干凈統一且穩定。利用兩款同色相顏色的漸變層次變化,產生了低對比度的和諧美感。

          圖片

          使用同樣的方法還可以設計出其他方案:

          圖片

          圖片

           

          02 單色配色實操

          第二個方案把英文作為主體。從“視圖”菜單中打開“符號”面板,選擇英文點擊“新建”按鈕,把英文設置為新符號。

          圖片

          接著畫出圓形外框,執行“效果—3D—凸出與斜角”命令,設定旋轉角度和凸出深度:

          圖片

          點擊“貼圖”進入貼圖視窗,勾選“三維模型不可見”,表面選擇“4/4”,符號找到新建的英文符號,勾選“縮放以適合”將文字縮放成適合的大?。?

          圖片

          背景選擇“H:255 S:100 H:100”的深藍色作為基色。把英文圖形執行“對象-擴展外觀”,雙擊進入圖形中分別給文字和背景填色,保持色相(H)不變,調整飽和度(S)和亮度(B)的數值。

          圖片

          使用相同的方法制作出其他英文圓環,并填充顏色:

          圖片

          最后加入文字排版,設計完成。

          圖片

          可以看到此方案雖然選擇了多個顏色,但通過單色搭配可以得到統一協調的視覺效果。

          圖片

          使用同樣的方法還可以設計出其他方案:

          圖片

          圖片

           

          原文地址:藝海拾貝Design(公眾號)

          作者:鄧海貝

          轉載請注明:學UI網》單色配色你真的會用嗎?(實操篇)

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

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

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

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



          金剛區也要考慮交互,不只是畫圖標而已

          lanlanwork


          金剛區是什么,想必大家都有所了解。

          沒有的話看這張圖就懂了:

          圖片

          圖片來源:淘寶首頁

           

          我在微信上搜了一下,發現大部分討論金剛區設計的文章,都是在講怎么畫圖標。

          但是我自己在使用各大 APP 的過程中,發現很多金剛區并不是那么好用,而且這跟圖標好不好看無關。

          金剛區設計不好,會對我的使用造成直接影響:

          1. 不夠清晰易懂根本不想去看
          2. 首次使用找不到需要的內容
          3. 下次使用記不住圖標的樣子
          4. 圖標設計得怪怪的不好理解

          我今天就來總結一下,對于金剛區設計的交互/體驗思考:

          • 數量
          • 順序
          • 顏色
          • 樣式

           

          數量

          金剛區里有多少項比較合適?

          這其實是米勒法則(Miller’s Role)的典型運用了。

          如果你還不太了解米勒法則,看看下面這張圖里的詞語:

          圖片

          現在,半分鐘回憶一下,你記住了多少個?

          ……

          大部分人能記住 5~9 個。

          米勒的研究發現,普通人的工作記憶(Working Memory)只有 7±2 個信息塊。

          如果給的信息超出了這個數字,大部分人也只能記住這么多。

          所以說,金剛區里的圖標數量,最好也維持在這個數,否則就是對用戶的記憶能力要求過高了。

          通常來,4 個圖標很輕松,說 6 個圖標是比較理想的,8~9 個就有點吃力了,10 個就超綱了。

          例如支付寶這個就過分了,好在這只是工具類產品,復雜一點也沒辦法:

          圖片

           

          順序

          人們在看閱讀文字時,視線軌跡是之字形:

          圖片

          人們在閱讀表格時,視線軌跡是除草機形:

          圖片

          上圖來源:這樣設計表格,看著真難受!

           

          雖然金剛區的眼動圖我沒有,但第一步肯定是從左上角開始往右掃。

          圖片

          所以,用戶最有可能使用的圖標,應該從左到右排在最上面一行,最不常用的可以排在右下角。

          例如美團外賣這個設計,看著就挺合理。不但把重要內容放在第一行,而且還做了很大的視覺區分:

          圖片

          不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳,難免損失點易用性。

           

          顏色

          仿真圖標

          如果追求質感,多半會使用物品本身的顏色,例如每日優鮮這個:

          圖片

          這種圖標就沒什么顏色好討論了,注意一下整體和諧就好。

           

          數量較少

          如果圖標數量不多可以使用一個顏色,那么顏色上,同樣沒什么好討論的。

          例如 QQ 音樂:

          圖片

           

          數量適中

          如果圖標數量在 7 個左右或以內,那么可以每種顏色的圖標都來一個,這樣用戶也能記住大概什么顏色代表什么。

          例如京東這樣:

          圖片

           

          數量很多

          圖標數量遠超過 7 時,就不可能每種顏色來一個了,否則顏色都不夠用了。

          如果還是想要劃分顏色,可以將類型作為依據,這樣用戶在尋找圖標時會比較有方向。

          當然,其實也可以簡單點,干脆都一個顏色,例如聯通手機營業廳:

          圖片

           

          樣式

          底框

          一些產品為了統一感,會用圓圈或者圓角矩形,把所有圖標都框起來。

          這樣視覺上是好處理了,但交互上很不推薦,因為會大大降低圖標的識別度,眨眼一看都長一樣。

          這種底框在主流產品里已經很少見了,不過這么做的設計師還是不少,至少站酷上可以找到很多:

          圖片

          這種圖標數量少,有顏色區分還好,如果數量多又一個顏色,那就很難辨認了。

           

          風格

          縱觀常見的金剛區圖標,通常不外乎四種樣式:線條、形狀、2D、3D、仿真。

          圖片

          聯通手機營業廳

           

          圖片

          QQ音樂

           

          圖片

          京東

           

          圖片

          美團外賣

           

          圖片

          每日優鮮

           

          任何樣式都能讓用戶識別和記憶,但是不同的樣式給人的感官不同。

          真實性越高的視覺樣式,就越容易給人高級的感覺;相反真實性越低的視覺樣式,越容易給人簡單邊界的感覺。

           

          總結

          我發現做設計時,從不同的角度會帶來截然不同的思考。

          今天這篇分析,算是一個以交互體驗為主,融合了一些視覺角度,希望帶給大家一些靈感~

          如果你還有什么 idea,歡迎在評論區探討~

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》金剛區也要考慮交互,不只是畫圖標而已

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

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

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

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


          詳解|用戶體驗地圖,到底該如何使用?

          lanlanwork


          WHAT:用戶體驗地圖是什么

          用戶體驗地圖(Experience Maps)旨在通過描述用戶歷程和故事,使設計師、產品經理等項目成員更好地了解用戶和洞察訴求。所以對于用戶體驗地圖,我們可以將其定義為以下內容:

          • 是一種描述用戶故事可視化工具;
          • 是一種幫助設計師、產品經理等更好地了解用戶的共創工具;
          • 用戶視角出發,直觀展現產品流程各個觸點上用戶的痛點、需求和情緒;
          • 用戶體驗地圖繪制的形式并不唯一,可以根據項目需求,增減內容。

          圖片

          △ 途家 App 用戶租房 · 用戶體驗地圖案例

           

          通常在接觸到需求之后,設計師就可以開始梳理現有流程、使用用戶體驗地圖了。要注意的是:

          • 需要梳理的功能不分大小,都可以使用;
          • 做之前,務必要先調研和訪談用戶使用產品的情況。

          建議時長:

          • 重要項目:120~180 分鐘
          • 日常項目:60~120分鐘

          參與者:

          • 必選:設計師、產品
          • 可選:研發、市場、其他

          工具:

          • 電腦或白板+便利貼

           

          WHY:為什么需要用戶體驗地圖

          需要發現和拆解產品現有問題,梳理用戶流程時使用用戶體驗地圖,可以在聚焦階段,整合用戶訴求和業務訴求,共創機會點,找出解決方案,通常在以下場景中使用:
          • 新產品設計:需要對需求進行拆解和優先級排序;
          • 產品優化:發現產品現有問題,洞察設計發力點。

          由此可見,在設計過程中使用用戶體驗地圖作為設計工具,有以下益處

          • 更好的以用戶視角來看產品的體驗;
          • 通過共創,項目成員達成共識;
          • 確認觸點,作為我們的設計方向;
          • 通過用戶痛點找到機會點;
          • 幫助梳理產品流程。

          圖片

          △ 用戶體驗地圖共創現場

           

          HOW:用戶體驗地圖操作流程 

          我們通常會將流程分成 4 個階段:定義原則和目的 —— 梳理階段流程 —— 洞察痛點 —— 尋找機會點。

          1. 定義原則和目的  

          首先要了解我們做用戶體驗地圖的原因和目的,包括用戶是誰、解決什么問題、用戶的目標、產品的整體目標、限定條件等等,對用戶群體、整個項目背景和共創任務目標有清晰、全面的認知。

          圖片

           

          2. 梳理階段流程  

          首先是劃分階段,將用戶的行為拆分成幾個大的階段,在整理時要注意:

          • 在整個產品的范圍之內盡量把故事、流程講完整;
          • 廣度優先,而非深度,不要過早的沉浸到細節中。

          接下來我們要將主要階段拆分成單個任務,并梳理具體的任務和觸點,羅列出過程中的任務和各個觸點,要做到事無巨細。

          圖片

          然后根據任務和觸點,整理對應的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進行梳理,客觀的描述事實,切勿自說自話或是將自己的情緒代入其中,也不要急于猜想與分析。

          圖片

           

          3. 洞察痛點

          這一步需要我們匯總用戶的痛點,并將痛點分級,洞察用戶痛點背后的真實訴求。這個過程中可以先讓大家在一定時間內寫出自己的想法,每一條寫在一張卡片上,做到先相互不干擾,之后再統一整理和總結。

          圖片

           

          4. 尋找機會點

          通過上述總結,思考新的機會點、解決方案、優化整體流程,并對新流程下的功能做優先級排序??梢酝ㄟ^準備一些問題來刺激大家腦爆出更多的內容,比如:用戶還有其他選擇么?怎么做用戶才能更爽?其他用戶來到這里該怎么處理?等等。在這個階段需要:

          • 對內容進行對標、討論,把公認的點保留下來,無用的點剔除出局;
          • 根據實際情況和項目成本、進度等條件,對新流程下的功能做優先級排序。

          圖片

           

          TIPS:如何為過程提效 

          在實際的工作過程中,因為項目時間都非常緊張,繪制這樣一個完整的用戶體驗地圖比較耗費時間,所以推薦大家幾個提效的技巧,既可以減少時間浪費,也可以提高共創質量:

          1. 事前

          充分做好用戶調研,提前準備好用戶地圖模板,可以在開始之前的一到兩天發給參會人員,讓所有人對產品有一個整體梳理和思考,有助于提高大家的產出質量。

          2. 事中

          如果是優化的產品,可以將設計稿 demo 或者線上產品截圖打印出來,這樣可以增強大家的代入感,有利于想法的輸出。

          3. 事后

          整理電子版體驗地圖,需要跟隨產品的演進進行更新,上傳到項目共享空間隨時查看。

           

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

          作者:元堯

          轉載請注明:學UI網》詳解|用戶體驗地圖,到底該如何使用?

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

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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