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

          首頁

          如何從業務出發,發掘更多的設計價值

          鶴鶴

          “價值”在百度百科的解釋是————“價值屬于關系范疇,從認識論上來說,是指客體能夠滿足主體需要的效益關系,是表示客體的屬性和功能與主體需要間的一種效用、效益或效應關系的哲學范疇?!?br style="outline:0px;margin:0px;padding:0px;" /> 因為一些外部原因,讓我最近一段時間都在思考一個問題,作為一名設計師,我的價值是什么???我的設計能力。那我設計能力的價值是什么???完成產品視覺的呈現,幫助項目上線和產品落地?
          當這個回答擺到我面前的時候,我竟然有了一絲的不安。
          因為在我看來視覺呈現這只是能力,并不是真正的價值。如果作為設計師只是這樣的能力,你會發現在團隊的位置是很容易就會被頂替的。
          那作為設計師的我,那如何才能讓自己不容易被頂替,體現自身價值到底是什么就成了重中之重的事情。
          那體現自身價值之前,我需要去知道設計價值是什么。設計價值說到底就是解決問題,從而帶來了想要的效益。


          那我需要思考的方向(我工作主要方向B端產品)

          一、設計師解決了什么問題
          1、發現問題
          2、定義問題
          3、分析問題
          二、設計師如何解決的問題
          1、明確設計目標
          2、制定設計策略
          三、設計師如何驗證問題是否解決
          1、收集用戶反饋
          2、跟蹤數據指標
          四、舉個例子
          五、總結一下

           

          第一步:「設計師解決了什么問題」

          發現問題、定義問題、分析問題
          一開始工作的時候很長一段時間都是被動接需求、找參考、輸出設計稿,這樣一個流程下來,解決的問題無非就是如何用設計呈現需求的過程,設計師的價值發揮就會非常有限。所以如果想發掘更多設計價值,就需要轉被動為主動,將設計前置,從業務出發去發現問題(通過分析項目背景/目標、用戶調研、行業/競品分析等)、定義問題(問題出現的原因是什么?用戶的原因?還是產品本身的原因)并且分析問題(細化出現問題的原因,給出解決問題的方案)


          第二步:「設計師如何解決的問題」

          明確設計目標、制定設計策略
          雖然如何解決問題每個人的側重點都不一樣的,但是設計目標作為體驗提升的開始,正確的設計目標決定了提升的方向,而設計目標可以由產品目標(提升某個具體的指標、提高用戶的操作效率)和用戶目標(用戶的想要得到什么、用戶使用產品的痛點是什么)的推導出來。目標有了就要落地去實現,作為設計師,設計策略是落地的重要一步:統一規范、縮短操作路徑、提升用戶滿意度等等


          第三步:「設計師如何驗證問題解決與否」

          收集用戶反饋、跟蹤數據指標
          我們總是在主觀的評價這個設計好不好看、好不好用,導致設計的價值很難去真正的衡量。其實衡量價值最基本的方法無非就是你這樣做帶來了什么,結果導向是衡量設計最為標準的,也是流程閉環的最后一步,如果沒有結果,流程無法閉環,那設計價值也無法衡量。而產品上線后得到結果又是什么?無非就是用戶反饋是否滿意和數據指標是否達標。 


          舉個例子

          項目背景是在公司業務快速增長和用戶對于服務品質的訴求提升,加上客服團隊一直處于被動依靠人力處理用戶問題的服務模式的情況下,排除大幅度疊加人員的方案,希望通過數據驅動+服務產品智能化的方式來對客服體系的升級。從而提高客服人員的工作效率,減少公司的招聘成本的同時提升用戶的體驗,最終實現公司業務的快速增長。

          第一步:「設計師解決了什么問題」

          1、發現問題

          通過項目背景不難發現其中問題所在:在不增加人員的情況下,當前客服團隊的服務模式,已經滿足不了現有的業務增長趨勢和客戶的品質訴求。

          那我們需要做的就是解決服務模式的問題。

          服務模式有什么問題呢?一直處于被動依靠人力處理用戶問題。

          2、定義問題

          為什么一直處于被動依靠人力處理用戶問題呢?

          · 用戶一遇到問題就去找客服,用戶做不到遇到問題可以通過自我查詢或者其他不依賴客服的方式來解決。

          · 客服人員能力有限,每天的用戶承接量大,重復性問題多,問題處理流程繁瑣,導致單個問題處理時間較長。

          3、分析問題

          排除人力堆加的方法以外,如何才能解決服務模式的問題呢?

          方法就是

          增強用戶自主解決能力:自主渠道的升級,實現渠道擴增和業務分流,通過內容分層,簡化用戶查找問題的流程,培養用戶自主解決能力的心智模型;引入智能機器人能力,實現簡單性、高頻率問題由機器人代理解決。

          提升客服解決問題能力:調整問題的優先級排序,優先解決重要客戶的問題,減少重要客戶的投訴和流失;尋找問題處理流程的機會點,減少客服單個處理時長;分析不同程度客服同時處理問題量的數據,限制客服最大承接量。

          既然問題已經確定了,那就要去解決問題。根據對問題的分析結果,該如何轉換為設計呢?


          第二步:「設計師如何解決的問題」

          1、確定設計目標

          結合產品目標(自助渠道升級、產品智能化/數據化)+用戶目標=設計目標的推導公式

          產品目標是產品經理/需求方給到你的,但是用戶目標則是設計師自己調研分析得來的

          ----用戶想做什么?

          用戶想快速解決遇到的問題

          ----客服想做什么?

          客服想輕松快速的幫助用戶解決遇到的問題,完成工作中的KPI指標

          ----用戶的痛點?

          用戶在自助渠道找不到答案,于是遇到問題就找客服去解決問題,智能機器人的回答也解決不了問題,所以需要找人工客服,但是需要等待很長的時間

          ----客服的痛點?

          每天高負壓的的工作環境,枯燥重復的工作流程,敏感繁多的考核指標。

          2、制定設計策略

          那在確定好設計目標之后,就需要通過制定設計策略,以達到設計目標。

          注意:我們在做設計之前,必須要確定設計目標。因為目標是方向,不然做到最后發現自己做的設計沒有解決產品目標和用戶目標,那就是白白的浪費時間,也說明自己做的設計是又問題的。

          第三步:「設計師如何驗證問題解決與否」

          項目上線后,我們需要去收集用戶反饋,關注我們設定好的指標去衡量、驗證構建的設計方案是否解決用了用戶問題以及是否達成了產品目標,因為這樣設計工作才能實現一個閉環。

          1、收集用戶反饋

          可通過在產品上線初期以及上線一段時間后進行調查問卷的發放,通過調查問卷得到用戶在使用新的產品的感受,直觀感受產品迭代后的反響,同時也可以為下次的迭代提供方向和依據

          2、跟蹤數據指標

          從產品目標我們可以看出,我們的數據指標就是提高用戶對自主渠道的使用率,那我們只需要在自主渠道的頁面增加一定的數據埋點:頁面點擊率、頁面瀏覽時長等等


          總結一下

          寫了這么多,才發現自己現在欠缺的,還有環境欠缺的。所以冷靜的理一理自己的工作的流程,多關注業界的動態。主動的將設計前置,提升自己的價值,提高自己在團隊/項目中的話語權。不然如果只是簡簡單單的設計呈現,自己永遠處于被動挨打的狀態,沒有話語權,沒有價值體現,隨時都有可能被替代。

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

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

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

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


          如何選擇確定B端后臺設計風格及細節優化

          鶴鶴

          如何選擇合適的B端設計風格?


          1.B端后臺分類:

          根據服務對象劃分:

          一類支持有C端前臺,支持前臺產品管理各種資源。第二類服務企業,提高企業工作效率和營收。


          根據后臺功能:

          1.監控運營:時效性強,旨在實時反饋異常情況,快速判斷下達命令,回復信息、多用于數據控制中心。

          2.數據分析:數據結果的對比和分析趨勢,時效性要求并不高,了解整體和各部分數據水平,助力決策。

          3.記錄管理類:主要用于人員、設備、資產等增刪改查,文本信息容量大,頻繁便捷的操作。

          4.系統配置:權限配置、設備功能配置,操作為主。


          2.后臺深淺兩大風格分類:

          淺色:

          適合文本信息多密集的表單列表類后臺,淺色更符合人眼白底黑字的閱讀習慣,瀏覽速度更快,信息獲取效率更高。


          深色:

          圖像信息密集的后臺適合圖片、數據可視化圖表等;深色對彩色的圖像信息襯托更強。信息獲取速度較慢,長時間可能視疲勞。




          3.作者常向產品方提供的風格參考

          較常見


          1.經典商務風(導航深、內容淺)——專業、高效、成熟、可信賴(對照深色西裝人物形象)

                優點:市面最常見的風格,普世性高,大多數用戶可快速接受,層次分明

                缺點:視覺缺乏記憶點


           2.輕量科技感(導航淺、內容淺)——簡潔、明快、輕量、年輕(對照白襯衫打領帶男性)

                優點:視覺清新明快更年輕化更輕量,對其他文本及圖形展示包容性高,就像A4白紙一樣容器存在感弱

                缺點:純白色導航+頁面層次略曖昧。


           3.藍色科技風(導航中、內容中)

                適合:適合科技屬性強的產品界面,圖像圖形展示

                缺點:對其他色彩信息有干擾,持續性長時間觀看易視覺疲勞


           4.暗黑科技風(導航深、內容深)

                優點:對色彩表現力強

                缺點:密集文本信息獲取速度會下降,持續性長時間觀看易視覺疲勞




          4.精準選擇風格時可以進一步的考慮:

          1.整體行業風格

          比如美妝和科技行業的整體設計基調就不太相同。


          2.產品想要傳達的氣質:

          理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討


          3.目標用戶的群體特點及喜好。

          根據目標用戶的性別、年齡層、受教育水平,審美水平考量(可能包含多種角色,選取1.2個核心角色為參考)帶入目標用戶工作場景及愛用物常用物品味,去判斷基調。

          如主要用戶群:40+男性用戶,本科以上受教育水平,使用windows電腦進行專業管理操作,審美傾向明確內斂。

          如主要用戶群:20-40歲,男女比例約6:4;大專;操作水平參差


          4.使用場景及高頻的操作。

          例如:最常使用數據分析管理,需要快速閱覽多條數據,對數據進行比對,更適合淺色風格展示表單數據。


          5.判斷獨立的平臺是否為獨立開發

          獨立開發的,可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。



          5.如何讓后臺設計更具特色:

          1.重點色的使用

          “731配色比例”70%的面板色,30%的導航面板色,10%的強調色。(這里的用色比例可以根據內容具體再去調節只是大概比例)品牌色或重點色:強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

          2.圖標的優化

          后臺高頻出現的圖標,值得我們花時間去統一設計打磨,調整圓角粗細疏密,符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的,好的設計在細節處也要動人。

          B端工具類圖標識別性第一,美觀性第二。B端導航圖標更多是在基礎造型上打磨,不需要加花里胡哨的漸變、投影,導航圖標一般在24px-16px大小,太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色


          3.空狀態小插畫

          空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

          圖形化狀態語言,輔助用戶理解內容??梢詫a品機械蒼白的文案設計表現的更加具有溫度,具有引導性。讓乏味的工作出現一些共情小彩蛋,有趣的插圖動畫可以緩解等待的焦慮。



          4.登錄注冊頁

          純色背景卡片式:簡單大方更聚焦登錄操作

          插畫背景:場景化展示產品的功能及亮點,讓用戶更有心理預期

          幾何圖形背景:最后和品牌圖形相關,加深用戶對產品的品牌印象。

          照片背景:相關場景或產品類型,具象圖片信息更直觀


          5.圓角的大小

          不同大小的圓角傳達產品不同的氣質,大圓角親和、小圓角精致、中等圓角大眾中庸。



          6.優化信息層級

          優化信息層級,區分信息主次可以使閱讀更快,操作更快,界面更有節奏感。

          這時候你就是那個考前畫重點的老師

          判斷一個頁面里最重要的是那些信息或操作,強化它!并弱化輔助信息;

          判斷一個模塊里那些是重要信息,強化它!



          6.新人需要避免的雷點:


          1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板,滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多,反而干擾信息獲取效率。


          2.反常規用戶習慣的操作。尊重用戶習慣,不要為了個性化去嘗試改變,不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維,曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。


          3.數量多,動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打擾。之前看過一個反面例子后臺,在每一步操作后都出現大的場景動效鼓勵完成,如果作為一個長期使用的工作者,我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。


          4.新人建議多看Antdesign和Element等成熟的組件,創新類組件樣式,最好和和開發商量是否能夠實現。


          5.在確定主要風格及2-5張主要頁面后,就應該著手基礎規范(色彩字體等,不然后面越做越亂)。


          6.一段時間一個審美,同一界面中的元素風格不統一。


          7.避免大面積使用高飽和高明度的色彩,及曖昧含糊的臨近色彩。長時間使用眼睛會累,產生不耐煩焦躁的負面情緒。


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

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

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

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



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

          鶴鶴

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




          01. 什么是KIT組件庫?


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


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


          由Google推出的當時媲美蘋果全新設計語言的Material Design,Material Design也是最為經典組件庫設計?,F如今阿里的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設計中凸顯情感關懷。


          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站番劇《總之就是非常可愛》的進度條的圖標設計案例之一,該案例的運用起因在于該番劇的劇情甜份過高,網友們紛紛用彈幕類似于表達“我酸了”的通俗網絡語言來刷屏,引起了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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



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

          鶴鶴

          大綱

          1、研究背景

          2、案例分析

          3、無障礙設計工具推薦



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

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


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

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

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

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

           ……


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



          城市無障礙坡道


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


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

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

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


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


          哈啰出行-司機端

          哈啰出行的司機端,在司機開始行程后,在司機端進行操作,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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          日歷

          鏈接

          個人資料

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

          存檔

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