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

          首頁

          必讀!用戶體驗設計指南 - KIT組件庫一站式體驗搭建

          ui設計分享達人

          本文將從理論到實踐,從軟件到插件,再到不同應用場景拆解和團隊協同的重構,一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程,組件化設計的必備插件,目前國內還比較少有文章講到。手把手!嘴對嘴!堪稱全網最細保姆級教程!




          01. 什么是KIT組件庫?


          一個成熟的設計團隊,都會為產品制定設計規范,搭建產品KIT組件庫,組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致,讓團隊成員專注于深耕體驗和細節,實現設計向產品賦能。極大的節省設計和開發成本,優化用戶在界面流轉間的感知差異體驗。


          KIT組件庫本質上是一個集合的Sketch文件,由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。


          由Google推出的當時媲美蘋果全新設計語言的Material Design,Material Design也是最為經典組件庫設計。現如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。



          02. 原子設計理論


          原子設計是將界面設計中最小元素——原子,組合嵌套為分子、組織、模板、頁面的系統規范化設計過程。




          1.  原子 Atoms

          原子Atoms,我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割,但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成,所以原子是構成物質的最小粒子這就不對了。


          但在界面設計中我們所說的原子是構成界面的最小顆粒度元素,在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標、分割線等。

          2. 分子 Molecules

          由原子按照一定的規律和目的組成的部分為分子,在界面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等,可以理解為比較簡單的小組件。

          3. 組織 Organisms

          將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


          4. 模板 Templates

          將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示界面的主要功能和交互了。一般這一步得到的結果就是我們日常工作中的原型圖,產品的大致形態也慢慢清晰。所以模板可以理解成未上色的界面。


          5. 頁面 Pages

          最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充信息和圖片內容,就得到了高保真設計界面。


          03. KIT組件庫搭建過程詳解


          以最近做的一個NFT項目為例子,展示具體搭建細節的全過程。




          1.  命名規范


          命名按照:一級分類 / 二級分類 / 三級分類 。例如:一級標題樣式/蘋方/常規/灰階0


          其中 “/” 為層級結構分隔符,Sketch會自動識別。組件庫的搭建需要按照層級規范命名,從最外層到最內層,就像一個抽屜,每一層都對應放著東西。規范的命名會使后期調用維護、團隊協同變得清晰高效。




          2. 樣式


          (1)顏色樣式

          我們設計一般都需要定義顏色樣式,一般有主色調(Main tone)、輔助色(Minor)、漸變色(Gradient)、字體的灰階度(Gray scale)等。選中你需要創建樣式的顏色,點擊「外觀 - 創建」,在輸入框內輸入層級規范命名。



          (2)文字樣式

          定義文字樣式,文字具有字體、大小、字重、灰階等屬性,選中文字,點擊【外觀-新建】,在輸入框內輸入層級規范命名。




          (3)樣式切換

          當我們需要切換一個定義好的文字樣式時,比如從“閱讀文本樣式”更換為“一級標題樣式”,只需要選中文字 - 點擊「當前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。




          (4)樣式修改 - 解綁與更新

          當我們需要對定義好的文字樣式進行修改時,比如在設計的過程中突然感覺"閱讀文本樣式"字體小了點,為了優化閱讀體驗需要增大字號。


          1. 單個修改 - 解綁

          將文字調整更改為你需要的大小或字重,此時只對單個文本修改,不對其他文本產生影響,點擊解綁,便可與定義好的樣式分離。


          2. 整體同步 - 更新

          將文字調整更改為你需要的大小或字重,樣式名稱后會出現 "*" 星號,此時代表未保存,且更新按鈕激活,點擊更新按鈕則所有使用該樣式的字段都會更改,整體同步更新。




          3. 組件

          組件是將元素定義為標準化可復用的集合體,對組件進行規范的命名,形成高效設計的KIT組件庫。


          (1)文本組件

          選中我們需要定義的文本字段,注意!根據實際應用場景選擇合適的文本對齊方式,否則修改字段信息是會出錯。這里文本選擇左對齊,點擊 「創建控件」- 按照層級規范命名,選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內容進行修改。




          (2)標簽組件


          1. 單個標簽

          當設計完標簽后,對標簽創建組件。依次選中便簽中的文字“LIMIT”、“2000份”,依次將文本選擇左對齊,步驟同上。將整個標簽打組,點擊 「創建控件」- 按照層級規范命名,選擇從左往右布局(這里注意!從左往右布局表示標簽在更改字段信息后,便簽左邊固定不動,從左往右自適應) - 在覆蓋層修改文本字段信息,庫存標簽組件自適應。




          2. 標簽修改           
                   

          如果我們覺得這個庫存標簽設計的不滿意,或者還需新增倒計時標簽、已售標簽,那怎樣又該怎么做的?


          第一步:這時我們新建一個Sketch文件,命名為「 *** KIT 組件庫」。選中標簽圖標復制,將圖標粘貼到新建文件內,注意!此時需要給圖標添加合適的畫板,并按規范命名。

          第二步:將Sketch文件保存到桌面,拖動到「首選項-組件庫」內。

          第三步:選中組件,回車可進入控件(組件)頁面,可直接調用定義好的控件,進行修改。





          Tips:這里畫板的作用是

          (1)畫板是用來規范固定組件位置和大小的,成套系的KIT Library需要建立畫板。

          (2)畫板組件在創建后,調用時只固定大小和邊界。

          (2)如果只是做較少的界面,較少的復用的樣式,就可以不用做畫板。




          3. 多個標簽

          當頁面需要不止一個標簽時,就需要新增標簽,通常為左右或上下布局。若直接增加一個標簽修改字段,文本標簽不會自適應。 和之前操作一致,將新建的標簽新建組件后,可實現標簽文本自適應。




          4. Sketch素材調用

          繼續添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調用Sketch自帶的數據。




          (3)容器組件整合

          將前面定義好的所有組件整合到容器中,形成可直接復用的商品信息容器組件。


          第一步:調用定義好的閱讀文本樣式,注意!直接拖過來即可,文本框的長度左右拉到合適的左右間距,這里不需要動文本框的高度,否則會出錯。將底部容器(卡片)的收起到合適的高度


          第二步:選中整體打組,創建組件。注意! 此時選擇從上向下布局。


          第三步:選中整體,在右側覆蓋層可對文本進行編輯,輸入文本字段,此時容器高度實現自適應。




          (4)組件的拆解與重構


          頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構為組織、模板和頁面。




          (5)Anima插件


          如果上下同時有卡片的情況該怎么呢? 當然,我們完全可以將它們一起定義組件,但有沒有其他更便捷,更靈活的方法呢?這里跟大家介紹Anima插件的使用,會使得大家在搭建組件庫時變得更加靈活高效。


          Anima插件為一款在線自動響應式的插件,其中的STACK與PADDING功能簡直是Sketch設計必備,簡直逆天。




          1. PADDING功能

          新建一個文本,當點擊PADDING后,會自動生成一個底板,選中底板可對其進行編輯,更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文本的對其方式,左對齊一般適合標簽使用較多,而居中對齊適合一般的居中按鈕,如立即支付、立即報名等。




          2. STACK功能

          將三個標簽分別打組,再全選整體打一個組,點擊STACK,選擇左右排版和居中對齊,輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標簽,拖拽可改變排列順序,松手后還可以自適應。




          04. 為什么要搭建組件庫?


          (1)統一(Unified)


          1. 團隊不同成員或新來設計師之間協同配合,保證輸出的一致性和穩定性。


          2. 統一的組件庫樣式,會減輕用戶在頁面流轉間的疑惑感和理解成本,使用戶體驗得到了提高。



          (2)效率(Efficientcy)


          1. 減少相同模塊的重復設計。一個產品功能流轉、頁面交互必定會涉及到大量的重復設計的樣式與組件。試想一下,如果每一個都重新設計將是一個巨大的時間成本浪費。


          2. 如果從產品的全生命周期來看,搭建好設計中臺KIT組件庫,并與開發進行溝通,能減少前端開發樣式,將時間更多的放在功能交互體驗和項目推動上,極大提高了效率。



          (3)協同(Together)


          1. 建立完善的設計規范和KIT組件庫,提高組件庫優化迭代效率。組件庫團隊協同自動更新。


          2. KIT組件庫一鍵修改,也可通過組件分離功能(解綁)單獨對樣式進行修改,工作中需要對設計反復調整打磨,可進行批量一鍵更改,單個模塊的單獨修改。




          05. 什么時候搭建組件庫?


          什么時候時候搭建組件庫?先定義規范都是扯淡!所謂實踐才是檢驗真理的唯一標準,“在設計開始之前就制定設計規范,是不切實際的做法,你會發現做好的規范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設計師的成長之路》。所以組件庫中的組件必定是經過反復修改后適合產品以及可后期可復用的。


















          并不是所有的設計都需要做設計規范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情,如果是一次性項目那根本就沒有必要做組件庫了。是否需要創建樣式或組件取決于該樣式或組件在后續的工作中是否會被復用或復用的頻次。也會減少前端工程師重復開發CSS樣式以及后臺數據的封裝成本。



          06. 團隊協同


          將組件都定義在新建的Sketch文件中,將文件發給你的團隊其他成員。步驟同上。


          第一步:新建一個Sketch文件,命名為「 *** KIT組件庫」,將組件都創建在新建文件內。

          第二步:將Sketch文件發送給團隊其他成員,拖動到Sketch「首選項-組件庫」內。

          第三步:直接調用定義好的組件。


          共享組件庫個人使用 Sketch Cloud,但組件庫有更新Sketch右上角會有提示,及時溝通更新即可。



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

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

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

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


          淺談公共藝術在地性觀念與UI設計 ——以沖突關聯性為例

          ui設計分享達人

          如果將【UI設計】比喻成一位新型時髦的青年,那么【公共藝術】則是一位已在歷史長河中摸爬滾打數十載的老者,一位偉人曾說過:人類的發展從歷史中獲得啟迪,故筆者旨在從探討公共藝術在地性觀念的角度,來淺談如何在UI設計中凸顯情感關懷。


          1 公共藝術在地性觀念


          “藝術是什么”

          undefined

          當代藝術作品(圖片來源:網絡)


          學者王瑞蕓認為當代藝術邊界模糊且藝術家創作手段任意, 不僅沒有一個能夠稱得上固定的風格,也不存在相應的美術主張,因此無法用語言對其進行概述。 而二十世紀實驗藝術的先鋒馬塞爾·杜尚 (Marcel Duchamp) 曾用種種藝術實踐行為向公眾宣告:經由藝術家之手創造的就是藝術。



          “什么是公共藝術”

          undefined

          公共藝術作品(圖片來源:網絡)


          學者金江波在其專著《地方重塑—公共藝術的挑戰與機遇》中指出:公共藝術體現的藝術主張依托于關注人文的公共理想。 復旦大學的湯筠冰教授曾在其公開課《城市公共藝術》中講述到,公共藝術與純藝術的不同之處體現在,公共藝術中包含了一種地域文化。


          相較于說不清、道不明的“藝術”,公共藝術有別于純藝術“為我性”的情感抒發,更加強調藝術作品與空間、人之間有意識產生的情感聯系,用語言來概況其特性可以總結為:公共性、藝術性、在地性。




          “什么是公共藝術在地性”

          undefined

          公共藝術作品《爬墻的熊貓》(圖片來源:網絡)


          相較于“公共性”與“藝術性”的“基本性質”,筆者認為受“他人”影響而產生的“在地性”更能明顯地體現公共藝術中的文化關懷,什么是公共藝術在地性觀念,用一句話來概括:公共藝術與空間的關聯性。

          縱觀藝術史,公共藝術的在地性范式可以總結為以下三類:



          (一) 與空間的融合關聯性

          undefined

          古希臘帕特農神廟(圖片來源:網絡)


          最常見的一種在地性范式,起源于人民的基本需求已得到滿足,開始追求更高層次的精神追求——對美的追求。例如古希臘帕特農神廟的建造依托于古希臘人民對細節美與民主性的崇尚與追求,以及中世紀的“城市美化運動”,“依附于建筑的藝術”,均是以在依托于周圍環境、融入當前環境的方式來體現公共藝術的藝術性價值。



          (二) 與空間的沖突關聯性

          undefined

          藝術家佩爾施克策劃的公共藝術活動《紅球計劃》 (圖片來源:網絡)


          主要集中在后現代主義時期,后現代主義藝術批判以往藝術的精英化,追求藝術“生活化”。這一時期許多藝術家將與需求空間格格不入的通俗化形象放大植入公共空間中,產生與當下空間沖突的視覺感官體驗,以“介入”空間的“逆向之美”的方式來體現出了公共藝術的藝術評判性價值。


          undefined

          藝術家奧登伯格創作的《世俗豐碑系列》(圖片來源:網絡)



          (三) 與空間的無關聯性

          undefined

          《瑞秋豬》與《乳牛大游行》(圖片來源:網絡)


          出現在后現代主義時期,此時藝術家致力于使藝術擺脫架上束縛,追求藝術的開放性,諸如《柏林熊》、《乳牛大游行》以及《瑞秋豬》等社區參與類公共藝術作品,以藝術家主導的活動形式讓大眾參與到藝術創作過程中,打破以往以藝術家為中心開展的藝術創作行為,去中心化,此類公共藝術擺脫空間的束縛,其在地性含義由參與者構成,其開放性藝術價值仿佛實現了大同之美。

               

          2 在地性藝術語言與UI設計-以沖突關聯性為例

          (一)關聯性的意義

          undefined

          例子1


          上圖中左邊是由英國藝術家安尼什.卡普爾(Anish Kapoor)創作的公共藝術作品《云門》,將芝加哥市民引以為傲的摩天大樓與天際線的形象利用鏡像反射的原理映射在光滑的雕塑表面,凸顯城市文化與自信。右邊為新疆克拉瑪依油田新地標,似乎與芝加哥的《云門》沒有太大的區別,拋開是否購買版權這一點涉及到法律層面的考量,從藝術價值層面來考量這件“作品”,周遭土黃色的大樓并非是需要凸顯的城市文化與特質,強硬的植入只會削弱了作品的藝術價值。

          undefined例子2


          再舉一個例子,以美的美居APP的缺省頁為例,在最新的版本中,美的美居設計團隊將缺省頁的視覺元素替換成了自身IP形象“小藍”,運用與產品相關聯的視覺元素,不僅在美化的基礎上增強了頁面與產品的關聯性,更是彰顯了品牌自信。


          以上兩個例子也是為了說明,在UI設計中視覺元素的運用需站在“有理有據”的立場上,貫徹“取之有道 用之有理”的思想。以公共藝術中“與空間的沖突關聯性”藝術語言為例,來探討下此藝術語言在UI設計中的運用。而選擇沖突性藝術語言來探討的原因,主要在于該藝術語言包含的批判性、先鋒性與幽默性特質,能夠滿足當今人們對情感化產品的需求。


          (二)公共藝術中的沖突性

          undefined


          聊到公共藝術,不得不提到的一位藝術家:致力于把生活用品變成藝術品——克萊斯.奧登伯格(Claes Oldenburg),其世俗豐碑系列作品運用幽默風趣的藝術手法,提取與日常生活中通俗的現成物的形象介入公共空間,是對藝術精英化以及國際主義千篇一律設計風格的不滿與批判,以及藝術生活化精神的體現。該藝術形式可以引起大眾對其的新鮮感以及體現出一種趣味性,但當好奇與新鮮感退卻之后,對其剩余價值的質疑也是各學者對這種藝術形式爭議不斷的原因,持有質疑態度的學者認為“沖突式”公共藝術具有時效限制性,只能在時代特定階段發揮其藝術作用。


          筆者認為站在城市形象塑造的角度來看:

          a、"沖突式”公共藝術能夠體現一個城市的包容性與開放性,萬千藝術姿態都能被接受與容納。

          b、藝術家選取的藝術形象均來源于人們的日常生活形態,其藝術元素并不因地域等物質外在條件的不同,而對不同城市地區的人們產生不同意義,其體現的是一種全球共通性文化,其藝術性是針對城市公共空間而言。 


          undefined

          undefined


          綜上所述,筆者認為在沖突式在地性語言中,運用的藝術元素具有以下幾點特征:


          通俗性:大眾對其有相似的認知與理解

          原生性:夸張、未修飾的規模與形態來展示

          戲謔性:不按常理出牌,以“格格不入”的形式存在


          (三)沖突關聯性語言在UI設計中的運用

          undefined

          例子1


          針對上述三種特征,在一些APP的UI設計中,也可以找到相應的案例。例如B站番劇《總之就是非??蓯邸返倪M度條的圖標設計案例之一,該案例的運用起因在于該番劇的劇情甜份過高,網友們紛紛用彈幕類似于表達“我酸了”的通俗網絡語言來刷屏,引起了B站的關注,于是就有了檸檬代替進度條的操作。



          undefined

          例子2


          而Instagram推出的視頻產品「IGTV」,其加載頁借用了8090年代人們對老式電視信息收視不良的記憶——雪花屏元素,該元素與當前高科技信息技術時代的沖突性不僅營造出了炫酷的視覺效果,同時也使得產品飽含了懷舊的情感關懷,代表了一個時代的通俗回憶,得以與用戶產生共情。



          undefined

          例子3


          嗶哩嗶哩閱讀的停更通知用更加通俗易懂的【請假】來代替,以及克拉克拉APP用【拔掉電線】的口語化用語來描述退出直播間的行為,不僅拉近了產品與生活的距離,也凸顯了幽默的情感化設計。


          雖然藝術與設計的邊界日益模糊,但是二者之間仍然具有本質上的區別,那么我們在探討藝術語言在設計中的運用時,應把用戶體驗的良好與普適性也考慮其中,將藝術語言進行設計化的處理,結合上述藝術案例與設計案例來看,沖突式在地性藝術語言在UI設計中的運用時,其運用元素的特性可以歸納為:


          • 基礎條件-通俗性:能夠引起大眾的共識與話題,大多數的靈感來源于生活;

          • 必要條件-適應性:將原元素的特性進行特質提煉與設計化,與公共藝術不同,在UI設計中是將原元素的特征運用在設計中,同時注重例如提煉的雪花屏幕的閃爍特質,而不是直接將整個雪花屏幕運用在界面上;

          • 增味條件-創新性:跨領域找參考元素。(舉個例子,從B領域提取一個元素運用在A領域上,但B領域和A領域的在大家通俗認知中的兼容性并不強,其創新性是由疏離性凸顯)


          簡而言之:

          1、保證元素的通俗性,結合當代語境,亦可以理解為#話題性#;

          2、可跨領域找參考元素;

          3、需要對元素的特質進行加工提取;


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

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

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

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



          關于無障礙設計的研究分享

          ui設計分享達人

          大綱

          1、研究背景

          2、案例分析

          3、無障礙設計工具推薦



          在特殊的場景下所有人都存在殘疾

          一聽無障礙設計就覺得可能和殘障人士有關,其實不然;除了先天或后天出現的眼盲;耳聾的這種:永久性的障礙。在正常人身上也存在著情境式障礙;暫時性障礙;例如:


          提著大包小包的你,想使用手機—情境式的肢體障礙

          在喝熱粥時,霧氣遮擋住的眼鏡—情境式的視覺障礙

          骨折的腿無法正常行走—暫時性的肢體障礙

          剛睡醒迷糊的你—暫時性的認知障礙

           ……


          所以即使你是正常人,在日常使用產品時也會受到和殘障人士一樣的局限性。而大家說的用戶體驗設計其實就在特定場景下解決給特定的人群產生的局限性。



          城市無障礙坡道


          先普及一個概念(curb cut effect)直譯過來就是“遏制分割效應”,其實意思就是機會共同體的概念、弱勢群體受益的法律和計劃往往最終使整個社會受益;最普適的就像是路緣處會做臨時的斜坡處理,目的是為了幫助坐輪椅和推薦不便的人出行順利通過,但是實際上,對于推著嬰兒車,和行李箱的人同樣受益。


          傻傻分不清楚的洗發水和沐浴液

          為了統一品牌設計語言,往往會將洗發水和沐浴液的瓶體設計成一樣,不僅是視障人士,任何人在閉上眼睛洗頭時都分辨不出來?;ㄍ踉?991年在瓶身做鋸齒狀處理用來區分兩個產品,通過觸感也可以輕松辨認。

          原文傳送門:シャンプーのきざみに込められた思い


          接下來就是軟件端的案例,軟件產品在無障礙設計的例子上也很多。


          哈啰出行-司機端

          哈啰出行的司機端,在司機開始行程后,在司機端進行操作,APP會進行類似于IOS VoiceOver的語音播報,就是對你點擊的位置做中文的播報,規避對情景式障礙的分神的危險。


          滴滴-老年版

          滴滴打車首頁的“老人打車”,除了對布局的簡介化,對字體的放大化,還可以設置常用地址然后一鍵打車,或者通過電話聯系客服叫車,還是比較方便的。、對于60歲以上并通過實名認證的用戶,如果終點是醫院等特定目的地的話,后臺還會優先派單,為老年人提供救急服務。


          無障礙設計工具推薦


          檢查色彩對比度

          色彩對比度意為:【識別對象】和【其背景顏色】之間的對比度,對比度越高,越清晰,對比度越低。越模糊。如把重要的文字信息的對比度設計到AAA.次級的文字信息的對比度設計到AA。 把色彩對比度量化的話,可以計算出比例值,最低1:1(黑底黑字)、最高21:1(白底黑字)。

          最權威的互聯網無障礙規范 —— WCAG2.1(Web Content Accessibility Guideline,Web內容無障礙指南

          對比度量化工具:點擊這里

          對比度cheome插件:點擊這里


          Funkify - 殘疾模擬器


          通過極端用戶的視角來體驗網絡和界面,包括視線模糊、對比度下降(所有人的視覺對比度都會隨著年齡而下降)、雜色、白內障、糖尿病視網膜病變等。

          殘疾模擬器cheome插件:點擊這里


          屏幕閱讀器

          用于在 Chrome 瀏覽器中朗讀內容

          屏幕閱讀器cheome插件:點擊這里


          Color Oracle-色弱;色盲模擬器

          支持Mac / Win / Linux。大約8%的男人和0.5%的女人有色盲或色弱、是相當大的族群。當然,UI中不應該只通過顏色來區分信息,但有時無論如何會用到色彩區分(比如數據可視化),那么就一定要使用色盲友善的配色方案。一般來講,藍/黃、藍/橙是比較萬用的搭配。

          色盲模擬器工具:點擊這里


          總結:


          雖然在現實的資本市場不太會在邊緣人群身上花那么大的資源,但是體驗設計存在的意義不就是為了解決各種因素給人產生的局限性么。


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

          文章來源:站酷  作者:你聽得到____

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

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

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


          走進用戶,開啟家政服務新模式

          lanlanwork


          01.背景

          目前,眾多的平臺商家都是以微信群的方式維護家政從業人員信息,通過微信甩單,讓家政從業人員自薦或其與他商家合單的方式,完成訂單對接。
           

          不過,此類供給方式也存在一些不可避免的問題:

          · 家政從業人員信息變更很迅速,匹配雇主的時間窗口較短;

          · 商家訂單在匹配家政從業人員時,匹配成本很高;

          · 商家必須手動實時維護大量微信群,以保證獲取新鮮資源對接;

          · 被動且不受控制,好單有可能被爆單,且無法控制傳播路徑和時間;

          圖片

          基于這些問題,58家庭服務通過平臺策略,力求將線下甩單、合單的合作模式移植線上,以初期實現”家政從業人員 – 商家訂單需求”雙方供需智能匹配的形式,為以后在線上高效率完成“銷售線索-家政員匹配-服務簽單-營收分配”的流程打下基礎。

          借此契機,我們在對齊業務訴求的同時,更加深入的走進用戶,從不同的角度出發,為家政從業人員提供優質的接單環境,為商家(經紀人)搭建靈活的建單形式。讓設計策略與業務策略深度融合,實現“人-單”的精準匹配。

           

          02.用戶研究與設計策略設定

          通常,我們稱呼家政從業人員為阿姨,阿姨是58家庭服務平臺十分重要的勞動者資源。所以我們也十分看重阿姨們在使用產品時的體驗,致力于提高產品的易用性與實用性。

          對此我們通過多種途徑相結合方式,對58阿姨使用產品的狀態進行調研,并得出了一份適用于58阿姨的無障礙設計方案,輔助我們跟緊用戶訴求,讓設計策略為用戶服務。

          圖片

           

          03.阿姨端,圍繞無障礙原則展開的設計

          為58阿姨提供優質的接單環境

          主要秉承三個原則:清晰準確、感知清晰、操作簡單

          圖片

          阿姨通過界面中的文字快速獲取訂單信息,那么對文字字號和間距的合理設定,可以保障阿姨的基礎瀏覽與操作性能。從調研結果中我們了解到,以16px為設計因子的設計方案最為阿姨認可。所以我們以此為基數設定了界面字號和間距的使用規范。
          不過規范的使用也要具有靈活性,我們既要滿足阿姨的視覺需要,又要保證頁面信息的承載率。例如:
           

          · 瀏覽型頁面

          與簡歷創建流程不同,阿姨在接單大廳尋求工作機會時,其接單的目的屬性更強,信息讀取的需求更甚于操作,通用規范會讓頁面拉的很長,所以設計上,在保持同等字號的同時,可以將需求單內各項信息之間的間距按基數縮減,保證頁面信息的承載率。

          圖片

          然后針對重點信息增加放大功能,同時強調字重和色彩的對比,讓讀取更加人性化。

          圖片

           

          · 操作型頁面

          操作型頁面,信息的讀取并重于功能的操作,就不僅是字號和間距問題,設計同時要考慮減少輸入性的交互,盡量去采用選擇類型交互。

          并在此基礎上放大點觸目標,以提升阿姨的點擊準確率,避免誤觸。

          圖片

          同時,在調研的時候我們發現,我們平臺的阿姨其實在視覺障礙方面的影響并沒有我們想象的那么強烈,只是對信息獲取的反饋要求更高。所以在設計時,要降低阿姨對信息理解的障礙,及時就近給出阿姨對操作的明確反饋和提醒

          圖片

          這個功能點其實很小,談不上是核心的使用場景,但是這個對勾的反饋就很關鍵,讓阿姨能夠清楚的明白選擇的結果。

          當然反饋也可以結合場景,將功能引導或者信息提示與相關場景相融合,阿姨的感知也更直觀,更強烈。

          圖片

          還有在話術語義等方面的一些細節,依舊秉持同樣的原則,就不一一展示了。

           

          04.商家端,開啟人-單智能匹配

          基于用戶使用場景,將C端需求進行精準細分

          將需求單中,C端客戶的每一個要求,都定義成一個模塊,從視覺表現和層級關系上進行信息的細分分類,豐富每一個內容點。

          圖片

          例如創建需求單時,單純的單選或者多選的形式,已經不能完全涵蓋所以客戶的需求。

          滾動形式的單選,范圍太過籠統且不能跨域,多選雖然能滿足大多數情況,但客戶的要求千人千面,這種形式依舊不夠靈活。

          所以設計上增加了附有兩個連續滑塊的選擇器,允許商家根據客戶需求設定某個特定的值或者一個范圍值。例如身高、體重、年齡、薪資范圍等,實現對需求的定義更加自由精準。

          圖片

          從而更精準地匹配我們的家政從業人員,解決交易雙方信息不對等的問題,讓供需關系更加智能。

           

          05.結語

          換一個角度看“商家訂單需求-家政從業人員”雙方供需智能匹配的形式,其實都是對用戶真實需求的挖掘?;诩榷ǖ脑O計策略,不斷完善在線服務體系,同時將信息的傳與達進行提煉與外顯,以體驗助力產品,實現B端阿姨和商家的體驗協同優化和C端客戶的需求滿足。


           

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

          作者:環鐵藝術家

          轉載請注明:學UI網》走進用戶,開啟家政服務新模式

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

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

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

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





          作品集這樣排版,不進大廠都難!

          lanlanwork


           

          01.關鍵詞排版

          關鍵詞排版是很常用的一種排版方式,可以讓面試官一下就抓到重點。但是大部分人都是圓圈加文字的表達方式,會顯得有些簡單、乏味。如果能配上圖形或者圖標搭配就會豐富、精致很多。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.模塊分離

          將頁面中部分的內容模塊分離出來展示,可以是圖形或是卡片等等。不僅可以強調頁面的層級展示,還可以讓作品集排版更加出彩。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          a

          03.細節特寫

          作品集排版頁面中可以穿插一些放大的特寫,可以展現一些精心制作的小細節,或者項目當中需要強調的內容。不僅可以豐富頁面的排版形式,還能一目了然地展示出項目的側重點。

          圖片

          圖片

          圖片

          圖片

          圖片

          a

          04.圖文搭配

          這個看起來好像是“廢話方法”,一個主體圖形和文字進行搭配,但是精髓在于文字部分最好是兩種粗細或者字體或者大小寫的不同對比,讓文字內容更有層次。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          05.平分畫面

          將畫面一分為二,填充不同的顏色背景。有鮮明的層次感和形式感,可以很好地表達一些需要對比的內容,或者需要進行多維度展示的內容。

          圖片

          圖片

          圖片

          圖片

           

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

          作者:設計師深海


          轉載請注明:學UI網》作品集這樣排版,不進大廠都難!

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

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

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

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



          好的單選框設計具備哪些特質?把握住這些知識點!

          lanlanwork


          一、什么是單選框?

          顧名思義,單選框表示只能選擇一個選項,再具體一點,可以理解為只能從一組相互排斥的選項中選擇其中一個選項。

          單選框有選中和未選中兩種狀態,樣式上用填充的圓表示選中,描邊的圓表示未選中,通過改變狀態來給用戶反饋。

          圖片

          ▲ 常見的樣式是按鈕在左標簽在右,在結合特定的場景使用時,兩者的位置可以視情況靈活調換。

           

          二、何時使用單選框?

          除了單選框,選擇類組件還有很多其他形式,比如下拉列表、復選框等,我們首先來對比區分一下這幾個易混淆的組件。

           

          單選框VS下拉列表

          當用戶需要從大量選項中進行選擇時,為了節省空間,可以使用下拉列表代替單選按鈕。但是下拉列表將內容都隱藏在下一層級中,需要用戶多做一次選擇,操作成本和認知成本都會變高。

          圖片

          ▲ 當選擇不多于3項,建議使用單選框,這樣選項可以直接展示出來,用戶只需要點擊選擇即可;當選擇超過5項時,可以考慮使用下拉列表,確保選項不會占用大量空間。

           

          單選框VS復選框

          復選框允許用戶一次選擇多個選項,選中其中一個選項,不會對其他選項產生影響。對于何時使用單選框還是復選框沒有明確的界定,需要具體問題具體分析。

          圖片

          ▲ 這里提一個使用復選框時需要注意的小問題,比如在只有兩個選項時使用復選框,用戶可能會以為只需要從這兩個選項里面選擇一個,反而造成誤導。

           

          三、單選框設計指南

          始終確保良好的可用性

          對于這樣一個簡單的組件,想要做好用好,在設計上有一些不可忽視的細節。

          首先要避免在單選框列表中嵌套下一層級的選項,因為使用單選框的目的之一就是為了讓所有選項清晰呈現給用戶,嵌套過多層級會導致整個結構的混亂。

          圖片

          ▲ 另外要明確的是,單選按鈕不應該是唯一可點擊的熱區,而是要將按鈕和標簽一起作為熱區,便于用戶準確點擊操作

          圖片

          ▲ 這個選擇模塊由單選按鈕、文字標簽和圖標共同組成,可操作的范圍很大,視覺層次也很清晰,設計得既整潔又實用。

           

          保證可讀性

          單選框列表的布局要有邏輯性,盡量減輕用戶的認知負荷。

          圖片

          ▲ 用戶習慣于上下瀏覽選項和列表,如果將這些選項水平排布,可能會造成兩點問題:一個是瀏覽時視線移動的不習慣,另一個就是如果選項位置過于緊湊,用戶可能不知道每個標簽到底對應哪個按鈕。

          除了列表要垂直布局,標簽也需要很簡潔。標簽越長,用戶需要花費更多的時間和精力才能了解整個列表。

           

          提供認選擇

          想象這樣一個使用場景,我們下載了一個新的設計軟件,第一次打開時跳出一個彈窗,提示我們是選擇經典布局,還是個性化布局,但是我們對這個軟件不是很了解,可能并不清楚這兩個布局到底是什么樣子。

          圖片

          ▲ 在這種情況下,最好默認選中其中一個選項,這樣做一方面可以減輕用戶對于選項的糾結,另一方面還能有目的地引導用戶使用。

           

          最后

          最后為大家精選了單選框設計樣式資源,學習好的單選框設計風格和樣式,獲取最新的設計靈感!

          圖片

          關注公眾號后臺回復【單選框】獲取設計文件。

           

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

          作者:Clippp

          轉載請注明:學UI網》好的單選框設計具備哪些特質?把握住這些知識點!

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

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

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

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



          工作經驗| B 端產品組件設計細節及經驗分享(一)

          lanlanwork


          1、中性色色值為什么要使用透明度? 

          有細心的用戶發現,在 Ant Design 的設計規范里,中性色色值可以按照透明度來設置,見下圖中性色色值表(百分數代表不透明度):

          圖片

          平時大家似乎更喜歡使用 #333333、#666666 這種色值,那使用透明色有什么優勢呢?

          我們知道,中性色主要被大量的應用在界面的文字部分,此外背景、邊框、分割線等場景中也非常常見。產品中性色的定義需要考慮背景以及有色背景的差異,同時結合 WCAG 2.0 標準。

          現在  Ant Design 的色板中,透明色模式和實色模式都是有的。透明度模式可以做到背景色兼容。

          如下圖示例,我們以顏色 gray-6 為例,這個顏色在實色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同,但是在灰色或其他顏色的背景上,卻有明顯差別:

          圖片

          因此在透明色模式下,以中性色為主的前景色,會與背景色有一個更明顯的色彩對比,對背景的兼容性也會更好,保證內容的可讀性。

          Ant Design 提供了透明色和實色兩種顏色模式供用戶選擇,也會使組件更具通用性。

           

          2、組件和設計師之間的關系是? 

          當下很多常見的、優秀的組件庫,都為設計和開發的工作提供了便利。

          圖片

          那么使用組件庫可以替代設計師么?組件和設計師之間的關系又是什么呢?我個人觀點如下:

           

          1 . 組件是「效率」工具

          組件是工具,用來為設計師和開發提升工作效率。所有組件庫的初衷都不是要替代設計師,而是要提高整個團隊的工作效率。使用組件可以從兩個方面提效:

          (1)工作內容上:可以將不必要的、重復性勞動的時間節省出來

          (2)工作流程上:便于設計師與前端開發做交接和協作,節省溝通成本

           

          2 . 組件是「質量」保障

          使用組件做設計稿,可以在一定程度上保證工作質量。組件規范了前端和設計師的工作方法,建立相對底層的系統,設定了設計和開發的質量底線。

          圖片

          基于組件規范設計和開發的產品更容易具備:

          (1)一致性:具備相對一致的表現樣式,設計風格和交互體驗上均可保持統一

          (2)可用性:對于用戶操作,可以保證最基本的可理解性和可操作性

          (3)審美性:符合基本審美標準,雖不會很亮眼,但也不會很難看

           

          3 . 設計師要「沉淀」業務組件

          設計師可以嘗試沉淀有針對性的業務組件。很多業務領域有其獨特性,比如金融類組件和政務類的產品頁面列表內容就有很大區別。單一的元素組件在應用的過程中可以被再次組合和沉淀。

          舉個例子,我之前在做業務需求設計時,相比于 AntD,其實更常用的是 TechUI —— 它是建立在 AntD 基礎上的、由我們螞蟻的設計師通過對業務需求的提煉、組合和封裝,做成的一套于螞蟻自己的【業務組件】。

          圖片

          再總結下二者的區別:

          – Ant Design:是所有人的,是通用的,是單一的原子級別的(比如一個輸入框)組件。

          – TechUI:是螞蟻自己的,是私有的,是組合的區塊級別的(比如一整個表單)組件,更具備螞蟻集團自己的業務屬性。

          圖片

          針對你公司不同業務類型,沉淀出不同種類的區塊級別的組件,這類組件使用起來也會更加得心應手、加倍提效。這也是 B 端設計師可以去學習和精進的一點。

           

          4 . 設計師要「洞察」業務訴求

          使用組件可以讓設計師把節約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設計師之一,坦白的說,即使你的設計稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗上始終可以更進一步。

          設計師應該更多去關注對用戶需求和業務邏輯的深入挖掘,不僅僅是在界面細節的表現手法上下功夫,還要學會站在全局,用系統性思維看待每一個項目,為整個產品的系統流程做優化,做更全面的產品體驗升級。

           

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

          作者:元堯

          轉載請注明:學UI網》工作經驗| B 端產品組件設計細節及經驗分享(一)

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

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

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

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


          辛辛苦苦做的設計,被人說沒質感,結果兩招就搞定了!

          seo達人


          1.明暗是影響質感的最關鍵因素

          我們來看一組對比,左側是原作,右側是星友的練習作品:

          圖片

          很明顯,練習作品的質感沒有原作好,其中最重要的一個原因就是,原作的明暗交接線非常清晰,明暗對比很強烈,而練習作品就會有點平。

          很久之前做的這個作品,當時看起來還可以:

          圖片

          但現在一看,也是缺少明暗對比,導致整體質感差了很多,人家下面這種在明暗方面就對比很強烈:

          圖片

          所以,質感看起來就杠杠滴!

          再比如下面這組對比,上面的是原做,下面的是臨?。?

          圖片

          我覺得臨摹的要比原作好,我們看底部對比,下面那個底部暗部足夠暗,形成強烈明暗對比,整體質感看起來就很舒服。

          兄弟們,這個明暗非常重要,要牢記??!

           

          2.邊緣光的重要性

          再來說一個影響質感的因素——邊緣光。

          我們看下面這個對比,左側為網上原作,右側為練習作品:

          圖片

          能看出來什么問題嗎?右側是不是和背景糊在一起了?如果,主體都和背景糊在一起了,那層次肯定就不夠,整體效果也就差了很多。而這一切的問題都是因為沒有加邊緣光導致。

          其實以前做項目的時候,我也遇到過這類問題,比如這個頁面,最開始也是主體和背景糊在一起:

          圖片

          后來加了一點邊緣光,調整一下燈光色調:

          圖片

          效果立馬就好多了。

          其實很多作品,都是帶有邊緣光的,這光一加上,立馬就感覺高級很多:

          圖片

          是不是,兄弟們!

           

          3.前中后景的三個層次

          下面這組設計是十豆三同學做的:

          圖片

          最開始做的更新是比較常規的火箭,后來用品牌形象加飛船元素改了一版,更加有創意和特點了。

          但是這里我們來說下后面這張圖的不足,我會覺得主體和背景銜接的還不夠自然,如果我們把畫面分成前中后三個層級,這個畫面就缺少了一點中層的內容。

          我也經常做這種類似的畫面,比如這種:

          圖片

          如果說黑色是背景,白色形象是前景,那么背景上面的這些元素就是中景:

          圖片

          這個中景是提高畫面整體質感的關鍵因素之一,非常重要,不可忽視!

          再比如這個畫面:

          圖片

          也是在中景加了一些圖形和雞蛋,讓整體畫面更加豐富,層次更加清晰。

           

          總結

          好了,以上就是我經常使用到的提升設計質感的小方法,希望可以幫助到大家,么么扔!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》辛辛苦苦做的設計,被人說沒質感,結果兩招就搞定了!

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

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

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

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


          用好“對比色”,讓你的設計更有吸引力?。▽嵅倨?/a>

          seo達人



          01 對比色配色實操

          本次提取上期“對比色配色”理論篇講解的部分文案,進行配色的實操演示:

          圖片

           

          方案一

          在PS中新建文件,背景選擇藍色。

          英文放大鋪滿背景,并加入邊框。顏色選擇藍色的對比色紅色。(英文字體:Champion)

          圖片

          新建圖層,填充白色,用套索工具畫出不規則選區。

          圖片

          點擊“添加圖層蒙版”按鈕,給圖層添加蒙版。

          選擇蒙版,執行“濾鏡-濾鏡庫-噴色描邊”,得到不規則的撕紙邊緣效果。

          圖片

          復制一個新圖層,填充紅色,向上錯位移動。

          在白色圖層添加“圖層樣式-投影”,撕紙效果就制作好了。

          圖片

          復制“文字”和“矩形”圖層,移動到紅色圖層上方,填充藍色。

          按“Ctrl+Alt+g”建立剪切蒙版,讓文字只在紅色圖層范圍顯示。

          圖片

          把藍色字改為白色,白色是萬能的調和色,可以緩沖藍紅對比色強烈的對抗性,也可以讓作品更加透亮。

          圖片

          最后加入文字排版和紙張褶皺效果,設計完成:

          圖片

           

          方案二

          使用AI進行制作,顏色選用對比色紫色和綠色搭配。(英文字體:Current)

          圖片

          給英文創建輪廓,取消群組。

          使用直線工具畫出一條分割線,使用“路徑查找器”中的“分割”功能,把字母切割開

          圖片

          取消群組,右鍵選擇“變換-旋轉”180度,調整兩個色塊重合。

          執行“效果-風格化-陰影”加入陰影。這樣得到了折紙效果:

          圖片

          使用相同的方法制作出其他字母:

          圖片

          最后加入文字排版和紙張褶皺效果,設計完成:

          圖片

           

          方案三

          繼續使用AI進行制作,把所有英文放置在畫面中。(英文字體:Current)

          圖片

          顏色選用黃、藍、紅的三色對比色進行搭配。

          圖片

          圖片

          圖片

          最后加入文字排版和紙張褶皺效果,設計完成:

          圖片

          可以嘗試新的配色方案,

          此方案顏色選用橙、綠、紫的三色對比色搭配。

          圖片

          本期使用的字體、樣機、源文件,請關注微信公眾號:藝海拾貝Design(ID:YHSBds),公眾號主頁回復“對比色”獲取下載鏈接。

           

          優秀作業展示

          01 NoctilucaGladys

          圖片

           

          02 風少

          圖片

           

          03 沕風

          圖片

           

          04 龍娟(2張作品)

          圖片

          圖片

           

          05 七陌

          圖片

           

          06 Joyce

          圖片

           

          07 蛋蛋DAN

          圖片

           

          08 珞影隨行

          圖片

           

          09 咪奧mao

          圖片

          圖片

           

          10 小孔呀

          圖片

           

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

          作者:鄧海貝

          轉載請注明:學UI網》用好“對比色”,讓你的設計更有吸引力!(實操篇)

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

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

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

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



          大廠活動分析|《請回答2020》年度品牌活動

          seo達人



          什么是《請回答》

          《請回答》系列活動是百度知道歷年大型年終品牌活動,目標是通過此活動詮釋回答是一種力量,樹立有溫度有力量的品牌形象,打造一年一度的全民打卡活動,成為有互聯網記憶的品牌年度活動。
           

          項目背景:

          今年的活動聚焦2020年的人和事,結合各行各業的創作者一起總結,引發用戶對這特殊一年的情感共鳴。比起去年組隊答題的玩法,今年降低用戶參與成本,通過2020紅包、大富翁游戲、任務系統等多重手段,擴大《請回答2020》在站內外的影響力,增強用戶對知道品牌的認知,把《請回答》做成有互聯網記憶的連續性品牌活動。
          基于活動定位,今年我們將打造有溫情的知道專屬品牌活動作為設計目標。
          圖片
           

          如何打造有溫情的品牌活動呢?

          01品牌的延續

          2019年是這個活動首次亮相,作為品牌活動我們設計了專屬的logo,今年的活動首先要延續《請回答》的品牌喚起用戶對這個活動的回憶。視覺上保持之前的字體風格,改變排版形式,強化知道的品牌露出,且適配活動冠名的需求,同時加入了星球的圖形,寓意知識像星球一樣充滿奧秘感,這也作為今年品牌差異化的升級。
          圖片 
           

          02主視覺傳達溫情與品牌

          前面講到2020年的特殊性,基于有溫情的品牌活動的設計目標,主視覺突出人格化,體現知道有各行各業的人以及2020年的一些大事件。
          圖片 
           

          03核心玩法滲透溫情設計

          I.游戲區
          用戶在大富翁游戲區通過完成任務,積累骰子獲得前進格數并獲得獎品。游戲區的場景設定為一座漂浮的小島,島中間由20個格子組成心形,寓意2020年。同時這個心形也與用戶建立暖心互動,傳遞活動溫度。
          圖片  
           
          II.隱藏彩蛋
          游戲區有一個設計創意點,隱藏彩蛋作為鏈接事件卡的載體,對用戶來說是一種情感的激勵。
          漂流瓶的偶然性和神秘感以及撿到瓶子后帶給人的驚喜感,都與彩蛋的玩法高度的契合,于是確定下來漂流瓶作為彩蛋的表現形式,將事件卡元素放在漂流瓶中,用戶通過完成任務積累骰子,在游戲的過程中觸發隱形彩蛋,從而獲得相應的事件卡。
          圖片  
           
          III.事件卡
          事件卡一共12張,從2020年每個月中選取一個熱點事件,用插畫故事和主視覺相呼應,帶用戶回顧難忘的2020??ㄆ刹鍒D層、統一的卡片樣式、回答區以及品牌元素構成,給用戶傳達統一的視覺感受。
          圖片 
           

          04群像故事海報傳播,擴大影響力

          活動中后期通過百度官方及營銷號聯合發布群像海報,強化平臺背后回答者的真實性,擴大《請回答》活動的影響力。海報以人物為主題,背景沿用主視覺同時加入問答元素作為點綴,整體保持視覺延展一致性傳播。
          圖片
           

          項目總結

          《請回答》作為百度知道系列化品牌活動,未來我們的思考不僅僅只局限在視覺的表現上,還要挖掘品牌系列化活動的延續性與獨特性,同時更要通過合理的情感互動建立和用戶的鏈接,為品牌長線發展提供更多價值,一起期待明年的《請回答》活動吧! 
           
           
          原文地址:百度MEUX(公眾號)
           
          作者:愛分享的
           
           轉載請注明:學UI網》大廠活動分析|《請回答2020》年度品牌活動

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

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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