<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          排版良藥 | 圖文不會排?試試四角構圖

          seo達人


          【視頻完整版觀看可抖音搜索: 野川設計】

          回到設計沒思路系列,  今天我們講四角構圖!

          [調整輸出圖像大小]

           

          1、構圖:

          首先構圖本身是一切圖文編排困難的良藥,而四角構圖是構圖技巧中的其中一種。

          [優化輸出圖像]

           

           

          四角的構圖版式最顯著的特征就是將標題內容編排到四個角落

          [優化輸出圖像]

           

           

          誒!這不是四餅嗎?

          圖片

           

          而傳統的四角構圖原本是將文字信息有主次的編排到四周,而這種也是目前很常見的一種排版手法, 再將主視覺放置到版式中心,以此滿足平衡穩固的構圖作用。

          圖片

           

          如果聽不懂沒關系  我們以天官賜福這四個字為示例,將文字拆分放到版式四角,并改變字體與大小,最后將主視覺圖像放到版式中心,就可以得到一個最初的框架形態。

          圖片

           

          2、排版

          當理解了構圖的原理,將文字通過信息分層梳理排版

          圖片

          解讀主標題的文字沿用到配色上,選出綠色和橙黃色,將綠色填充至底色,再將黃色填充至文字色,這樣主題的文字在背景中就會比較醒目。

           

          圖片

           

          再放置主視覺圖像,這樣前期的構圖與排版的形態就塑造完成。

          [優化輸出圖像]

           

           

          3、融合

          接下來就是要解決物體融合、塑造質感、視覺分層的后期階段。

          [優化輸出圖像]

           

           

          我們來看看最終整個海報的設計全過程

          [優化輸出圖像]

           

          圖片

           

          原文地址:修先森撩設計(公眾號)

          作者:修先森

          轉載請注明:學UI網》排版良藥 | 圖文不會排?試試四角構圖

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

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

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

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



          這三步來做海報設計,思路才清晰?。?!

          seo達人


          案例實操

          說到設計海報,一般需要明確的就是主體,主標題和文本信息,需要根據重要性依次進行刻畫,顯然主體→主標題→信息處理按這三個步驟依次處理一個比較常用的思考步驟,如果沒有處理好前面的,就開始盲目去優化后面的,可能就會使畫面的視覺邏輯出問題。

          我們開始實操,這里先將文案整理好,簡單的做個層級劃分。

          圖片

          接著我們去構思整個版式的布局,將大概的信息位置放好,也就是明確它們的主次位置大小關系。

          圖片

          前面說了是用文字“爆”作為主體,那么我們先來處理它,這里需要用到Ai里的效果→扭曲和變換→收縮和膨脹,選擇收縮。

          圖片

          很容易我們就可以做出下面這個效果,而且符合爆的感覺。

          圖片

          然后我們加入英文BOOM,爆的后面放入用粗糙化做的效果,增加疊壓關系。

          圖片

          接下來就是刻畫小信息啦,信息之間要有對比,加上相應的符號搭配,這里為什么信息下面要加上色塊呢,一般這種除了統一之外,如果背景比較復雜的話,加入色塊不會影響識別性。

          圖片

          最后把剩余的信息放到畫面中相應的位置,大小關系處理好。

          圖片

          或許上面黑白識別性不太好,那么我們來配個顏色,加入樣機效果,這個設計就完成啦。

          圖片

           

          最后總結

          本期教程到這里就結束了,做設計需要的三個大步驟記住了嗎,趕緊試著去做一下吧,也希望文章給了你億點點思路,大家一起努力進步!

           

          原文地址:設獵派(公眾號)

          作者:設獵派

          轉載請注明:學UI網》這三步來做海報設計,思路才清晰?。?!

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

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

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

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



          干貨|交互設計中的「有效反饋」7大準則!

          seo達人


          準則 1.  Timely —— 找準時機,即時反饋

          在用戶操作后盡快 / 立即給予反饋是最有效的。即時反饋有助于幫助用戶養成正確的操作習慣,或糾正用戶的不當操作。

          如果反饋內容需要較長時間的加載,也可以給用戶設計一些有特點的 / 情感化的加載狀態,緩解用戶等待的不耐煩,又可以傳達一定的品牌調性。

          例如:知乎 App 在加載內容的過程中,增加了 IP 形象的動態效果:

          圖片

           

          準則 2.  Specific —— 具體分析,差異對待

          在設計交互反饋時,不僅僅要給出正確或錯誤的判斷結果,同時也應該考慮到用戶的個性化需求,針對不同類型、場景、地區的用戶提供差異性引導和服務。

          例如:大眾點評、高德地圖可以根據用戶的位置,在用戶開始使用產品時就推送個性化信息:

          圖片

           

          準則 3.  Balanced —— 正負反饋,穿插結合

          通常來說,正面的反饋會激發用戶的自信等積極情緒,因此我們更習慣使用正面反饋。但是一些不得不使用負面反饋的時候,我們可以在其中穿插一些正面的消息,減少或緩解用戶的因負面反饋帶來的消極情緒。

          這就好像是別人跟你說:“ 壞消息是……,但是,這樣做的好處是…… ”,壞消息不可避免,但加上一點轉折,就會讓他人心里稍微舒服一些。

          例如:美團單車在你騎完車之后,需要支付費用時提示你可以購買單車套餐,雖然是在勸用戶花錢,但看上去依舊很友善,其中的話術包括:“本次騎行免費”,“當前已是最優價格”:

          圖片

           

          準則 4.  Instructive —— 提示下步,指引行動

          有效的反饋會主動多引導一步,對用戶的下一步行動給出清晰的、正確的、指導性的意見,有助于驅動用戶繼續做出有效操作。

          很多 App 在截屏之后都會給出下一步分享的路徑引導:

          圖片

           

          準則 5.  Emotional —— 情感屬性,引起共鳴

          有科學依據證實,人腦會更容易被附帶情緒的信息所吸引。用戶更有可能會注意那些看上去承載了一些情緒的反饋,從而也更有可能改變其行為方式。

          例如:雖然只是一個提醒彈窗,QQ 音樂會員到期的續費提醒文案卻經過精心的設計,由各類歌名組成的一句話,每天的到期提醒都不同:

          圖片

           

          準則 6.  Traceable —— 可被溯源,可供反饋

          一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因,可以提供給用戶進行申訴和詢問的渠道,供用戶進行反饋。

          例如:電商平臺和外賣平臺都會在用戶下單或退單之后,提供商品物流的詳細信息,在查看購買的商品的當前狀態時,并可以追溯到商品所在的各個歷史環節:

          圖片

          再比如,高德打車如果發現用戶的行程訂單金額與預估金額差距較大時,會給用戶發短信提示,并給出客服和投訴渠道:

          圖片

           

          準則 7.  Less is more —— 質量優先,減少數量

          在這個信息過載而注意力稀缺的時代,好的反饋在于質量,不在于數量。有時數量越多,反而會對用戶造成不必要的負擔。用戶并不需要給出很多反饋或者記錄生活中一切信息的產品,而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現有用信息的產品。

          以上這 7 大準則,來源于我們日常工作中的積累和沉淀,對于設計產品的交互反饋具備較高的指導意義,希望對你有啟發。

           

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

          作者:元堯

          轉載請注明:學UI網》干貨|交互設計中的「有效反饋」7大準則!

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

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

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

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



          數據可視化設計常出現的錯誤,你一定要避免!

          seo達人


          1.三維圖形使用不當

          雖然三維圖形帶來的立體感很強,但用在可視化設計中,很容易出現問題。

          一方面,三維圖形具有X、Y和Z坐標,容易造成圖表間的遮擋關系,遮擋會掩蓋一部分的數據,讓精準比較數據信息變得困難。

          另外,透視使對象看起來像是位于三維空間中,但在數據可視化中,它會造成錯誤的層次結構:前景圖形看起來很大,背景圖形很小,數據關系被不必要地扭曲。

          圖片

           

          設計要點:

          三維圖形很有吸引力但可能會遮擋重要的數據信息,并扭曲數據間的比例關系;

          如果沒有絕對需要盡可能使用二維圖形樣式。

           

          2.數據太多

          在設計中,很多人總想在一張圖表中盡可能多地展現內容,把各種數據信息聚合在一起。

          這樣的想法本身沒什么錯誤,但重要的前提是要有清晰的認知,明確知道到底要展示哪些數據。

          如果可視化中包含太多數據,信息的展現會變得不堪重負甚至難以理解,這樣的話包含的數據再多也沒有任何意義。

          圖片

           

          設計要點:

          避免數據可視化的信息過載,如果一張圖表中包含的信息過多,反而會讓用戶混亂;

          靈活結合多種可視化方式,讓數據的展現變得更有效。

           

          3.省略基線

          一組數據往往各不相同,數據差值的大小也不確定。為了使可視化效果看著更舒服,有的設計師通過改變坐標軸比例來展示數據關系。

          最常見的例子就是讓Y軸代表的數據不是從0開始,借此夸大數據之間的差異,讓數據的變化更加明顯。

          圖片

           

          設計要點:

          圖表的美感再怎么重要,也要服務于精準的數據表現;

          避免通過省略基線來故意夸大或縮小數據差異,造成用戶誤解。 

           

          4.選擇錯誤的可視化方法

          每個數據可視化方法都有自己的特點。例如餅圖適合用來比較一個整體中的不同部分,但不適合用來比較幾組不同的數據。

          通過餅圖的比例劃分,雖然可以直觀地顯示三家企業的收益,但使用條形圖會讓這三家企業之間的差異更加明顯。

          如果目的是為了顯示一段時間內的收入,那么折線圖會是比條形圖更好的選擇。

          圖片

           

          設計要點:

          數據可視化方法并非一刀切;明確可視化傳達的變量及最終目的。

           

          5.混淆關聯

          數據可視化更高的價值在于探索和發現不同數據間的相關性,通過比較幾組不同的數據關系,找出其中的關聯性,從而得到一個更有根據的驗證結果。

          顯示相關性最常用的方法是將幾組不同的數據疊加在同一個圖表上,但當疊加的數據數量過多時,圖表會變得難以識別。

          另外一旦強行關聯幾種相似的數據,有可能造成結果的混亂。一個有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關,因為這兩者都是因為氣候變化造成的結果。

          圖片

           

          設計要點:

          透過數據間的關聯性發現事物本質是有意義的,但要考慮數據間的關聯是否有依據、是否合理;

          數據有相關性并不等于有因果關系。

           

          6.放大有利數據

          數據的增長或下降和時間是不可分割的。放大時間范圍是很多公司經營中投機取巧的方法。

          比如只在圖表上向用戶展示業績增長的4-6月份(上圖),這樣看起來公司業績增長幅度特別大,但如果將X軸的時間縮小到一整年(下圖),才會發現公司真實的經營狀況,4-6月份的業績增長僅僅代表了公司業績持續下跌中的小幅上漲。

          圖片

           

          設計要點:

          避免放大的可視化效果與數據整體不一致;

          短時間內放大的數據表現可能會讓用戶對信息的判斷產生錯誤。

           

          7.避開常見的視覺聯想

          視覺元素影響用戶的心理,圖標、色彩和字體都具有影響觀者感知的作用。

          下圖的可視化描述了美國各個地區宗教信徒占所有居民的百分比,但使用的顏色與地圖的設計元素(藍色的水、綠色的植被和棕色的土地)太過相似。

          圖片

          ▲ 分析數據可視化很耗費精力。在看到這樣的圖表時,我們第一時間聯想到的應該是國家的地形情況,可能很難在這個熟悉的認知下去重新理解這個圖表代表的其他含義。

           

          設計要點:

          避免強迫用戶重新理解常見的視覺聯想,造成對數據的注意力分散。

           

          8.過分糾結于數據可視化

          數據可視化將難以表現的數字關系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達數據關系。

          但是并不是所有的數據都需要使用可視化來表現,有時候一個簡單的數據搭配一個流行的顏色就足以說明問題。

          圖片

           

          設計要點:

          數據可視化是一種交流工具。像其他所有工具一樣,有時它是合適的,有時可能另一種工具更適合。

           

          為回饋一直以來關注和支持Clip設計夾的讀者,將免費贈送3本《寫給UI設計師看的數據可視化設計》書籍給大家,幫助大家更好地學習數據可視化設計。

          參與方式:詳見原文。

           

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

          作者:Clippp

          轉載請注明:學UI網》數據可視化設計常出現的錯誤,你一定要避免!

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

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

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

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



          如何解決運營設計的核心部分?

          seo達人



          01.背景

          運營設計主要包括日常運營(以介紹產品為主)和活動運營(通過促銷或游戲的形式,拉新促活),其目的都是要吸引用戶關注,實現流量的最大化,最終完成商業目標。

          那設計出好看的畫面吸引用戶就是運營設計中的核心了嗎?

          答案肯定是不確切的。畫面的呈現只是吸引關注的第一步,信息的傳達才是保證用戶駐足的關鍵。隨著獲取信息的便捷,人們對信息的關注越來越碎片化,甚至只關注標題,所以標題的呈現無疑是運營設計中的核心關鍵。

          a

          02.神器誕生

          標題設計有很多具體的方法,但隨著用戶對信息清晰度的更高要求和審美疲懶,裝飾過多或者變化過多的標題已不再流行,取而代之的是言簡意賅、辨識度高的,更像是“沒有設計”的標題設計。在日常的設計中,設計師通常采用合適的字體再通過變形等設計手段,使標題字更有品質感。如果可以直接使用一款字體,既能夠清晰表意且兼具個性,又能夠節省設計師創作的成本,這無疑是標題設計的首選方式。

          字體作為信息傳達的核心因素,能夠起到統一品牌理念和精神的作用,正是58設計團隊當前探索的領域之一。就此,58UXD設計團隊的首選原創字體——微笑體誕生了!這款字體在表達企業精神的同時,兼具清晰且個性的特征,并為設計師減輕了工作中標題字體設計的負擔!

          圖片

          微笑體誕生

          f

          03.品質提升,效率UP

          · 微笑體是為標題而生,它可以滿足運營設計中的絕大部分場景,應用于不同的表現形式

          1)輕量化設計頁面中,增加簡單效果,就具有一定的設計感

          圖片

          招聘業務線活動banner

           

          圖片

          58到家-saas系統系列海報

           

          2)需要突出標題品質時,可增加層次感或立體質感

          圖片

          58到家-“城市黑盒”活動畫面

           

          3)配合3D設計風格時,亦能發揮其厚重優美的字形

          圖片

          2021春節運營活動-房產/招聘/二手車主會場畫面

           

          · 應用廣泛,統一集團品牌感

          發布近半年,微笑體已應用到58平臺各類運營設計中,并在集團各渠道發揮作用,成為58對外展示的品牌特質之一

          圖片

          58到家線下店內海報

           

          圖片

          58同城招聘業務日?;顒?/span>

           

          圖片

          58同城平臺日?;顒?/span>

           

          圖片

          58同城校園招聘

           

          圖片

          員工福利-蜂蜜禮盒

           

          自5月8日微笑日發布微笑體字庫后,主創團隊不斷優化微笑體,更新完善了含有3627字的字體包。在UXD自主研發的兩款運營頁面設計平臺——斑馬智能物料設計審核平臺和靈動編輯器中,微笑體已嵌入使用,為運營設計師提供更加便捷的工作方式,為運營工作提供高效且高質量的輸出環境。

          圖片

          靈動編輯器

          w

          04.持續賦能

          微笑體在工作中運用的成功,一定程度上解決了運營設計的核心部分。當然一款字體是無法覆蓋所有的應用場景的,運營設計需要豐富多樣的視覺呈現,需要標題字和其他文字信息以及畫面共同完成。

          在設計微笑體之初,58UXD組建了專門字體工作小組——Fontwork造字計劃。團隊本著提升58企業品牌的初心,為設計工作提效的目的,啟動了字體設計的第二波征程。為補充微笑體的使用空缺,同時為滿足更多的使用場景,第二款字體的字形確定為有設計感的正文字體。

          第二款正文字體已征集完畢,在四十多款參賽作品中確定了一款字形,該字體目前正在如火如荼的設計中,待與大家見面時再解開它神秘的面紗~

          圖片

          字體大賽作品展示

          e

          05.結語

          為了給用戶持續不斷的新鮮體驗,為了適應不斷變化的流行趨勢,高品質的運營設計目前還是主要依靠人力完成。合適且優秀的字體解決了運營設計工作中的一部分問題,如何在保證設計質量的同時,提高效率,優化工作方法將會是我們不斷探索的方向。


           

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

          作者:環鐵藝術家

          轉載請注明:學UI網》如何解決運營設計的核心部分?

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

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

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

          藍藍設計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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

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

          存檔

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