<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


          圖片
          圖片
          包豪斯德紹,1925-1926

          包豪斯(Bauhaus)以德語命名,意為“建筑之家”,由建筑師沃爾特·格羅皮烏斯于 1919 年在德國魏瑪創立。1915 年,他接管了大公撒克遜工藝美術學院,四年后該學院與魏瑪美術學院合并,形成了激進的新設計學院。

          圖片
          沃爾特·格羅皮烏斯

           

          包豪斯從一開始就不僅僅是一種建筑風格,而是一所結合了手工藝和美術的學校,受到現代主義、英國工藝美術運動和建構主義的影響,包豪斯也最終成為20世紀最具影響力的現代主義藝術學校。

          圖片
          包豪斯的老師

          學校被定義為一個將工業設計、建筑、雕塑和繪畫融為一體的烏托邦工藝行會,為藝術家和設計師提供了由實踐技能、工藝、技術和理論知識組成的原創和有影響力的課程。

          圖片
          Image via spicewoodchess.org
          包豪斯在柏林短暫第三個發展階段中就停止了,總體來說,雖然包豪斯存在時間不長,僅有13年,但是它的設計思想,理念風格卻成為一個大流派,影響一直延續至今。甚至我們也有看到現今一些設計,形式感,處理手法上也有包豪斯一些影子在其中。
          圖片
          圖片
          Mauri Davida | Typographic Posters Collection 

          包豪斯的設計理念是形式追隨功能,少即是多,去除一些不必要的裝飾,也是包豪斯整個設計風格特點的精髓,包豪斯設計在保持功能性的同時體現了未來主義的外觀。

          包豪斯倡導功能為主,不花哨,簡單而優雅的幾何形狀,理性化和簡潔設計為主,它偏向于實用而不是炫耀。這種理念在包豪斯產生重大影響的領域非常突出。

          Bauhaus Books by Michael Kimmerle

          在設計中包豪斯更看重產品實用性,而非純美學。不過,這并不是說包豪斯在視覺上沒有吸引力,極簡美學特征就是它最大的標致,以至于流傳到現在一些經典設計,看起來依舊沒有覺得過時。

          圖片
          Bauhaus 2.0
          圖片
          Pienso | Ray Dak Lam
          截屏2022-05-10 上午11.37.14.png
          包豪斯風格影響了諸多行業的設計變革,也被奉為現代設計的經典,那么受到包豪斯風格影響的設計到底變成怎樣了,下面帶著大家看看包豪斯設計風格一些案例。
          品牌設計中的應用
          圖片

           CFB 2018

          圖片

           

          圖片

          Bauhaus Football Club

          圖片

          BRANDING ? 19-19 Cabinet d’Architecture Indépendant

          圖片

          BRANDING ? 19-19 Cabinet d’Architecture Indépendant

          圖片
           László Moholy-Nagy
          圖片

          版式設計中的應用

          圖片
          圖片
          Salon du livre de Montréal by Melanie Lambrick
          圖片
          Beacon: A new design-led project to raise money for disaster relief efforts
          圖片

          Robert Gutmann | 20TH CENTURY DESIGN

          UI設計中的應用
          圖片

          Blockchain mobile Franko Komljenovi?

          圖片
          Web Design Concept for Balenciaga

          圖片

          圖片

          圖片

          Glyphs app Brand Identity & Website

          包裝設計中的應用

          圖片

          圖片

          圖片

          Plácida

          圖片

          包豪斯設計風格在其長達一百年的發展歷史中,仍然延續至今,也在過程中經歷了諸多挫折和逆境,在其發展的三個階段中不斷變化迭代,以及其革新的設計理念影響了當時諸多設計。在 21 世紀包豪斯風格仍然存在,激勵著前前后后的設計師學習和借鑒思考。

          回個頭來我們也需要思考,為什么我們現在看一些設計風格可能就一年或者半年就被市場給拋棄了,究其原因還是過于形式化和追求華麗的外表設計。而包豪斯風格帶給我我們的設計理念就是功能為主,少即是多。

           

          原文地址:功夫體驗設計(公眾號)

          作者:Tony

          轉載請注明:學UI網》百年包豪斯設計風格,憑什么這么牛?

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          帳號人格化創新設計

          純純

          帳號作為用戶身份在互聯網產品中的投射,是用戶在產品中重要的身份信息。突出用戶個性風格的頭像信息可以促進用戶之間互動社交行為,提高用戶對產品的粘性。

          ///

          前言

          帳號作為用戶身份在互聯網產品中的投射,是用戶在產品中重要的身份信息。我們可以通過用戶的頭像、用戶名、掛件等快速辨識用戶性格興趣喜好等特征。在用戶進行社交時,帳號頭像是最直觀、最快速的了解用戶的方式之一。識別性強的頭像信息可以促進用戶之間互動社交行為,提升評論區活躍度與氛圍感,從而提高用戶對產品的粘性。在百度APP中真實頭像占比較低,讓用戶上傳/拍攝圖片作為頭像,對用戶而言成本較高,并且存在圖片質量和內容監管等問題。因此產品內部的推薦頭像就顯得尤為關鍵。

          當前百度APP中默認推薦頭像設計過時,不能滿足當下用戶群體對專屬個人身份標識的訴求。本次目標就是提升用戶真實頭像占比、同時提升百度APP社區氛圍體驗,強化用戶個人屬性身份認知,由此來塑造帳號的真實感。

          對默認推薦頭像進行重新設計,如何滿足百度APP龐大的用戶群體是設計中的重點難點。第一是需要滿足用戶不同的身份特征個性訴求,第二是設計需要滿足整體產品設計定位。

          在上述前提下我們啟動了百度APP帳號人格化創新設計,進一步滿足了用戶對個性化的訴求,并提高用戶粘性。


          一、需求洞察

          首先是問題定位,目前僅有30%的用戶自定義真實頭像,相較于競品處于較低的狀態。并且默認頭像設計過時,氛圍感不?,體驗較差。本次目標就是提升用戶真實頭像占比、同時提升百度APP社區氛圍體驗,強化用戶個人屬性認知,由此來塑造帳號的真實感。


          二、設計打法

          確定目標后,圍繞真實感氛圍營造展開了一系列的發散。以業務、人群、人格三個維度進行切入;分析和探索后發現單純的業務和人群劃分較為局限。為滿足百度APP用戶群體各年齡層、多種性格等的訴求,最終確定為心理學人格方向,以心理學“榮格人格”為理論基礎進行展開。

          心理學家榮格定義了人類基礎人格的12個主要類型。每種類型都有自己的價值觀、意義和性格特點,從性格中提取關鍵詞,分別篩選出有共性的、大眾熟知度高的動物形象來匹配12種人格。


          三、形象設計

          基于人格理論依據開始將動物具像化,經過大量的討論、草圖繪制、篩選和優化。

          草圖繪制確定動物形象基礎造型與特征。以天真者為例,為了表現形象俏皮、可愛的特性,兔子一邊耳朵折疊,并且選用圓潤的外觀,搭配臉上的腮紅。通過表情大眼睛,張嘴微笑來表達心理人格。

          在繪制的草圖中選取最符合人物性格,并且用戶可以接受的可愛的沒有對抗性的設計。
          將選定的草圖在三維軟件中進行模型制作。優化模型布線并制作模型貼圖、燈光、材質,完成三維化制作。通過以上的設計流程完成12種人格的動物形象制作。

          為了進一步提高IP形象的影響力,推動更多業務場景的應用。對IP頭像進行身體延展,打造專屬IP團體,進一步符合人格化定位,提升形象辨識度。


          四、應用&收益

          為了保證用戶選擇多樣性和不同的圈層喜好,除了12個動物形象,還提供了一系列實景拍攝照片,包括風景、藝術、生活、中國風等主題等來滿足用戶需求。

          頭像設置頁面優化升級,提升頁面容器屏效。將之前頭像尺寸減小并縮小間距,保證有限屏幕內用戶可以看到更多的頭像。并將頭像以分類形式顯現,方便用戶挑選符合自己喜好的頭像樣式。下方“拍照”和“從相冊選擇”入口樣式更新,突出拍照入口。

          42個新增頭像已經在PASS源頭進行鋪設使用,在百度APP產品內、以及PC端PASS注冊環節做了相關的使用引導,保證用戶可觸達新版的頭像。

          整套帳號人格化頭像設計完成百度系產品落地應用,助力全系產品提升用戶粘性。

          除了百度APP端內場景運用外,還在端外場景提升IP形象影響力。2021年牛年春節推出牛年專享新春紅包。為金牛形象設計專屬新春服飾&場景,打造財神牛形象,以搭配農歷春節時間段,金牛、元寶、祥云相結合突出節日喜慶的氣氛。

          帳號人格化頭像上線后得到了良好的反饋,用戶滿意度及推薦度遠超預期,得到了近90%的用戶反饋。同時通過相關的場景推薦綜合提升了百度APP用戶真實頭像占比,并且數據還在持續提升中。


          ///

          創新設計價值


          一、提高用戶粘性

          帳號頭像是真實用戶在產品中的身份標識,可以展示用戶的個人性格特點、興趣愛好。提升用戶在產品中的辨識度,同時提升用戶互動氛圍,提高用戶粘性。后期還可通過運營和推廣手段,形成具體用戶畫像,達成精準的內容推送。


          二、持續供給裝扮資產

          帳號人格化形象設計上線后得到了良好的用戶反饋及數據收益。我們會繼續思考IP形象的拓展以及產品中的深度應用。之后IP形象不止單單出現在用戶頭像設置上,會繼續精細化設計完成場景、裝扮等精細化設計。并應用于百度APP首頁皮膚、號主頁背景裝扮、頭像掛件等場景。持續供給百度APP裝扮資產,綜合

          提升用戶吸引力&用戶粘性。



          文章來源:UI中國   作者:百度MEUX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          為什么這個配色會怪?

          純純

          1.為什么這個配色會怪?


          我們在畫線性圖標的時候,有時候會用深淺色配合,比如描邊用亮藍色和深藍色,像這種:



          我們會覺得很和諧,為什么?雖然他們飽和度、明度不同,但他們有相同的色相,有一定的關聯性。


          還有一種情況就是相同明度、飽和度,但是有兩種色相,比如藍綠,藍黃:



          我們也都覺得很和諧,為什么?因為有相同的明度、飽和度,他們也有一定的關聯性!


          但是如果是這樣兩個描邊配色在一起:




          就感覺有些不和諧,就是因為色相、飽和度、明度沒有一項是有關聯的,所以就感覺不太搭。


          像下面這位星友做的練習,也是一樣的道理:



          這個配色多少有點不太和諧,我們放大一個圖標來展示下,比如這個:



          這兩個配色,不論是在明度、飽和度、色相上都沒有關聯,所以看起來有點違和。


          我們只要讓它稍微有點相同屬性,就會好很多,比如我們讓兩個顏色的色相有點關聯,都用藍色色相:



          再比如讓兩個顏色飽和度有點關聯,都用比較灰的顏色,哪怕色相完全不同,都會比較和諧:



          我們在做這種圖標描邊配色時候時候,一定要注意這個內在關聯性的邏輯。


          當然,這里說的只是做圖標描邊時候的配色,視覺畫面配色,不在討論范圍。



          2.為什么你的圖標看不清?


          這個點之前其實有強調過,很多同學在做圖標的時候很糊,像下面這組練習:



          其中一個很重要的因素就是投影問題,投影千萬不要加的太重,要和你主體物的顏色區分開,比如我的主體物是藍色:



          然后投影也用這個藍色:



          那肯定很糊呀,所以我們必須要用一個淡藍色:



          直接降低透明度也行,沒有什么操作成本,所以投影千萬別再和主體物黏在一起了。



          3.對比就能出來基礎的設計感


          很多時候,我們的設計感其實只要做好對比就能出來,比如下面這組信息:



          我們做一個大小對比:



          再做一個粗細對比:



          再做一個深淺對比:



          然后再來一個景上添花的樣式對比,就是數字來一個特殊數字:



          這其實就算是比較穩的一個效果了。


          我們可以看一些界面:



          他們里面也是用了這樣的對比,比如大小對比、樣式對比、深淺對比,再來點小圖形等等。


          所以,一定要善用這些對比,讓你的設計更有層次,更有沖擊力。



          4.平時多積累圖形的布爾運算


          平時在練習圖標的時候,大家一定要多積累圖形的布爾運算,以備不時之需。


          比如火箭的外輪廓,當頭部比較圓潤的時候,我們可以直接用橢圓來做:



          如果頭部比較尖的時候,我們可以用兩個橢圓相交切,然后再切:



          像這樣的形狀,我們不僅可以做火箭頭,還可以做魚的外輪廓等等:



          還可以做眼睛的外輪廓:



          多去聯想,多去實踐,當腦庫存達到一定量,我們就可以得心應手了!


          文章來源:UI中國   作者:菜心設計鋪
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          百花齊放的瓷片區

          純純

          什么是瓷片區

          由運營板塊拼接而成,視覺上像一塊塊瓷片,靈活性高。適用于各種運營模式,具有較高的轉化率


          卡片布局

          瓷片的外容器排版


          單行

          優點:節省屏效,日常營銷為重點業務留白

          缺點:坑位有限,三個以上時營銷氛圍設計受限


          多行


          左右排列

          優點:主次層級清晰,適合作為功能入口

          缺點:坑位越多,越影響營銷氛圍;推行者需具備與各業務溝通的能力,協調入口之間的平衡


          上下排列

          優點:個數不受限,易塑造氛圍感

          缺點:高信噪比


          圖文排版

          瓷片區的常見排版通常用:滿版型、上下分割型、左右分割型、中軸型、傾斜型


          滿版型

          以圖片為吸引點,充斥整個瓷片區,文本內容居左排版為主,常見旅游、電競、資訊類


          上下分割型

          版面分為上下兩部分,分別配置文字或圖片,常見上文下多圖的形式,符合常規的閱讀順序,該場景下圖片更易引起用戶興趣,常見電商類


          左右分割型

          版面分割成左右兩部分,分別配置文字或圖片,常見左文右圖的形式,該場景下,文本偏理性,具有直觀的表述能力;圖片偏感性,輔助文本信息點綴模塊。常見資訊類、產品入口等


          中軸型

          常見垂直排列,信息更集中有活力


          傾斜型

          版面主體傾斜排列,常見對角線式形式。能承載更多的信息內容,頁面層級也更活躍


          配圖風格

          常見類型有兩種:實物與插畫


          實物類

          優點:識別性高、更直觀、可復用、設計效率高,個性化推薦更精準

          缺點:對圖片素材要求較高,個性化服務需要開發資源


          插畫類

          優點:創意性強、可塑性強、具有趣味性、易形成品牌調性

          缺點:抽象圖形不直觀,復用性低,繪制耗時,不易做個性化




          Tips:設計師要牢記,設計時思考延展性和平臺風格如何為業務(運營、產品、技術)賦能,但長期影響CTR(點擊率)一定是由業務內容決定,避免背鍋。


          文章來源:UI中國   作者:七月七咸
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          如何驗證設計結果

          純純

          前段時間在年終總結會上,產品經理向設計團隊提出了一個問題:怎么證明你的設計是有價值的?如何衡量驗證Ui、UX的設計效果?


          很多人都認為,公司的業績取決于產品和運營,和設計師關系不大,甚至有些公司想取消年終績效。那么,改如何判斷設計結果是否好壞,設計產生的影響又該怎樣被量化?


          我相信回復肯定是:可以通過數據來找到答案。 


          但又會有新的問題出現:需要哪些數據可以驗證設計效果?又該怎樣通過數據來判斷設計的效果究竟是好是壞?



          滿意度

          簡單來說是用來衡量用戶對產品服務和體驗的整體滿意程度。我們都知道,要提高滿意度,要滿足很多個條件,比如產品功能、運行速度等。這里我們分兩個維度,用戶體驗質量產品目標。


          1)用戶體驗質量

          用戶體驗指標可以從凈推薦值(NPS)來衡量,凈推薦值意為用戶是否愿意將產品推薦給身邊人的指標。凈推薦值是有一個公式:NPS值=推薦者所占比例-批評者比例。

          • 9-10分(推薦者):活躍度很高的用戶

          • 7-8分(被動者):對產品滿意但忠誠度不高的用戶

          • 0-6分(批評者):對產品不滿意的用戶


          還可以通過反饋,來收集功能或界面的問題反饋比例,更直觀的評估用戶操作過程中的感受反饋,來進一步優化迭代。


          降低用戶的學習成本也能提高體驗質量,通俗的講,就是用戶對產品接受度和使用成本的高低,更偏向于產品和交互層面。



          2)產品目標

          簡單來說,就是希望產品上線以后,會達到什么樣的結果。


          例如一個列表篩選功能,其核心目標是為了讓用戶在多維度混合排列里找到自己想要的目標群。

          當用戶篩選后,找到了想要的信息且進入了目標頁面,說明指標已成功;反之沒找到想要的結果,中斷了操作流程,說明任務失敗。以此為依據,通過是否完成的維度來進行衡量,確定篩選按鈕到任務界面的UV轉化率。


          結合上面的用戶體驗質量,來驗證設計需要注意哪些方面,關注哪些數據來達到目的。


          活躍用戶數


          通常觀察日活(DAU)和月活(MAU)就可以。活躍用戶數用于衡量產品的用戶粘性,便于了解產品一段時間的用戶情況,了解產品的用戶變化趨勢。

          日活(DAU):一個用戶一天通過相同的渠道多次訪問產品,DAU仍只算一個;

          月活(MAU):在一月內多次訪問產品,MAU仍只算一個。


          日活越高,說明有剛需的忠實用戶越多。月活越高,說明新增的用戶越多,但未必是忠實用戶。當然,活躍度的高低也需要根據用戶的停留時長有一定的聯系。如果只是打開產品而并沒有使用,其實這個數據的意義并不是很大。 


          用戶留存率

          一般是衡量產品或功能的新用戶增長程度,對產品或功能的新用戶占比。這對于新產品或新功能特別有用。


          提取數據的一般周期為1日、7日或者30日。日留存率通常用來衡量產品粘性;周留存率通常用于判斷產生的忠實用戶數;月留存率通常用于衡量版本迭代的效果。


          如果產品做了更新迭代,并且提升了月留存率,而其他變量沒有變化時,說明此次迭代很成功。所以通過留存率可以很直觀的判斷產品的用戶粘性是上升還是下降。同時老用戶的留存率也需要關注,好的更新迭代不僅可以留住新用戶,還可以喚醒“沉睡用戶”。


          完成率

          衡量流程設計的合理性,通常用于產品中主要任務流程的內容,這里單指設計中操作流程的順暢度。


          完成率是產品設計中重要的指標之一,完成率越高,產品的操作體驗就越好。


          最后

          數據只是有效驗證的方法之一,并不是萬能的。就如調查問卷一樣,都會有一定的局限性和不確定性,數據能明確看到結果,但不能說明具體原因,只能作為支撐來驗證設計師的想法或決定,但無法代替設計直覺、用戶研究和設計可用性。

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

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

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

          改善產品UX設計的實用法則

          純純

          當看到一個產品的視覺效果時,我們通常能很快地判斷出它是吸引人的還是哪兒有點不對勁。但是,很少有人能接著說出來為什么這樣設計的原因。


          本文定義了影響UX的5條實用法則:

          1. 比例

          2. 視覺層級

          3. 平衡

          4. 對比

          5.格式塔原則

          遵循以下5條設計法則可以創造出全面周到的視覺效果,推動用戶的參與度并提高可用性。


          01 比例

          定義:比例原則是指在布局中使用相對大小來展示設計元素的重要性和層級的優先關系。


          正確使用此原理最簡單的方式是,最重要的設計元素的尺寸要比不重要的元素大。原因很簡單,大的事物更能引起用戶的注意。在停車場中,當前所在停車區域往往會突出顯示,這樣做的目的是加深用戶的記憶,方便回來取車。

          良好的視覺設計通常使用不超過三種不同的尺寸。擁有一系列大小不同的設計元素,不僅能在排版上創造出多樣性,而且還能在頁面上建立視覺層級結構。


          確保最大程度地強調設計中最重要的部分,幫助用戶理解如何使用它。例如在Medium中,熱門文章在視覺上比其他文章更大。

          02 視覺層級

          定義:視覺層級的原理是指在布局中,按照元素的重要性排序來引導用戶的注意力。


          視覺層級可以通過比例,顏色,間距,位置和其他各種信號的變化來實現。同時它也控制用戶最終的體驗。如果很難確定頁面布局的具體位置,則很可能是其布局缺少清晰的視覺層級。


          要創建清晰的視覺層級結構,請使用2–3種字體大小來向用戶展示頁面最重要的信息?;蛘邔χ匾膬热菔褂妹髁恋念伾珮俗?,對次要內容使用柔和的顏色。在Medium中,標題、副標題、正文具有清晰的視覺層級,文章每部分的字體大小都和其重要性相對應。

          比例的大小也可以幫助定義視覺層級,因此可以針對不同設計元素進行各種比例的組合,一般的設計經驗是包含大、中、小三種設計組件。Uber中的視覺層級結構就很清晰。地圖和輸入框對半分開,輸入框上的灰色的背景引導用戶進行下一步操作。


          03 平衡

          定義:平衡原則是指對設計元素進行滿意的排列和比例設置。當屏幕兩側存在分布相同(不一定對稱)的視覺元素時,就會達到平衡。在設計時元素所占的面積在創建平衡時也很重要,而不僅僅是元素的數量。


          平衡的布局可以是:

          對稱:元素相對于中心線對稱分布

          不對稱:元素相對于中心線不對稱分布

          徑向:元素從中心的公共點放射分布


          在設計中使用什么樣的布局取決于想要傳達的內容。對稱的布局安靜而穩定,例如The Hub Style Exploration的界面展現了穩定的對稱布局。


          不對稱的布局是動態的并且引人入勝,創造了一種活力和動感。Nike的設計布局,顯示出與品牌相稱的具有運動感的不對稱的布局。

          而徑向的布局始終將用戶的注意力引向視覺中心,Brathwait手表在徑向上保持平衡,所以注意力立即被吸引到表盤的中心。

          04 對比

          定義:對比原理別。是指將視覺上不同的元素并列排布,以傳達這些元素不同的功能類別。換句話說,對比為用戶提供了不同對象在大小或顏色上的明顯差異。


          對比原則通常利用顏色來進行分辨。例如,在UI設計中紅色通常代表刪除,而綠色代表同意或繼續。換句話說,對比為用戶提供了不同對象在大小或顏色上的明顯差異。


          通常在UX中說起對比度,我們會想到文字與其背景之間的對比。有時設計人員會故意降低文字的對比度,用來表示不太重要的內容。


          但是在降低文字對比度的同時文字的可讀性也會降低,這會導致用戶無法看清文字內容。在Greenhouse Juice的包裝上,瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對比強,可讀性比較好,但是淺色果汁瓶身上的文字幾乎無法識別。

          05 格式塔原理


          定義:格式塔原理解釋了人類如何簡化和組織由許多元素組成的復雜圖像,通過下意識的將各個部分安排到一個有組織的系統中,而不是將它們解釋為一系列不同的元素。


          格式塔原理指出了我們傾向于感知整體而不是個體元素。在NBC徽標中,中間空白處并沒有孔雀,但我們的大腦卻能自動填補空缺的部分,感覺到孔雀的存在。

          在Uber的注冊頁面中,字段標簽靠近其相應的文本框,這樣能輕松理解需要在哪些文本框中輸入信息。

          總結

          除了使某些東西看起來“漂亮”之外,理解和利用這些法則還有助于:

          1. 增加可用性。遵循這些視覺設計原則能夠設計出易于使用的頁面布局。

          2. 激發積極情感。美好的事物會引發積極的情緒。美學-可用性效應表明,當人們發現外觀上具有吸引力的設計時,可能會對設計的可用性更寬容。

          3. 增強品牌認知度。強大的視覺系統可以幫助建立用戶對產品的信任和興趣。

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

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

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


          54個UI和UX設計小技巧

          純純


          當你為你的項目創建有效的,可訪問的,漂亮的ui時,只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中,我收集了一些容易放置的內容。在實踐中,這些小技巧可以毫不費力地幫助你改善你的設計,還有用戶體驗。

          希望你喜歡!


          1·讓你的元素出現更多


          用微妙的邊界定義。

          使用多重陰影或非常微妙的邊界(只是一個陰影比你的實際影子)周圍的某些元素可以使這些元素出現

          更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。



          2.減少字母間距


          標題給一個更好的光學范圍。減少長格式正文的字母間距?這是一個大大的“不”。但對于標題……我要說“是”!

          你的標題很可能會比他們的標題更大,更重。相比于正文,字母之間的間距有時會出現視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標題視覺平衡,更易于閱讀,通常更賞心悅目。



          3.圖表一致性


          為了一致性,確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量,要么填滿,要么秒變了。不要混搭。



          4.頁面可以用一種字體


          只使用一種字體就很好。在設計時,使用單一字體是絕對沒問題的,這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。



          5.適當的留白


          留白是UI設計朋友。大膽的使用。適度的留白,即使是少量的白色物質,但要使用得當。能讓你的設計透氣,而且看起來更光亮。



          6.20pt的文字


          創建長篇內容?給20 pt試試。對于長形式的內容(即微博文章,項目描述等等),試著這樣做20pt(甚至更多一點)為你的文本字號。當然,這取決于所選擇的字體,但大多數流行的字體在20pt時效果得很好,并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。



          7.字號集比例


          使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義,Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。



          8.界面顏色定義


          選擇一個基本顏色,然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許,簡單地使用一個有限的調色板選擇一個基地顏色,然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。



          9.登陸用戶體驗


          改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整,可以為你的用戶提供更好的體驗……

          記住,拇指仍然是主宰!




          10.陰影來自一個光源


          你的影子來自其中一個光源對吧?確保你的影子總是來自一個光源。這是一個簡單的錯誤,但它可以讓你的設計看起來更拋光且統一。記住,我們不是生活在一個擁有一千個太陽的國度里。




          11.建立字體集合


          使用更好的字體組合,效率會很很快。當你想要提高你的字體組合技巧的時候,當面對1000個字體選擇,只是去尋找對應的自己集合,效率會快很多。




          12.提高你的對比


          文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置,您可以選擇嘗試,并測試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比,不要太復雜的內容和圖片。



          13.使用居中排列文字要有節制


          太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容,保持文本左對齊。你的用戶會感謝你的你。



          14.多字重


          當選擇一個多用途的文字,盡量找一個大量權重。你搜索的字體有很多選擇嗎?重量、風格?如果你打算在你的一些項目中使用它,請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當然也有例外,某些項目會要求“只有一種風格”

          更精致的字體,但對于絕大多數項目,你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格,希望你在設計過程的后期需要更多的空間。




          15.淺色背景不要文本過亮


          想要創造更容易理解的界面,對吧?把你的文字調暗在光亮的背景上。在淺色背景下工作時,不要讓你的文本太亮。



          16.純黑色文字未必是好


          當涉及到長形式的內容時,某些常規的粗細字體仍然可以看。但太重了,在屏幕上會很僵硬。你可以很容易地解決這個問題,選擇一些像深灰色(即#4F4F4F)的基調,把文字往下寫,讓眼睛更容易看。



          17.通過色彩對比度作區分

          總是通過icon最突出的內容。你認為這是常識,對嗎?我并不覺得。通過使用色彩對比度做區分,尺寸和標簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標。如果可以使用文本標簽,那就使用它們,讓用戶更好地理解。



          18.字體越小,行高越大


          當你的字體變小時,請增加行高,以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。



          19.“Il1”測試文字可讀性


          使用x-height來測試字體的可讀性?;旧希瑇-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高,通常有助于更好地閱讀,特別是在使用長形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個測試,比較來自特定字體的三個字符:大寫字母I,小寫的L和數字1。




          20.突出實用動作


          當設計一個在應用程序內部使用的菜單時,確保提供最多經常使用的動作(例如:上傳圖像,添加文件等)最突出的屏幕上。




          21.顏色-從你的圖像中選擇


          顏色-從你的圖像中選擇,會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色,然后應用各種色調。你選擇的顏色陰影到你的背景,文字,圖標或更多,可以添加。你的設計具有豐富的視覺趣味和個性。



          22.不同字體,不同行高


          基于字體的x坐標,設置您的線高度。不同x高的字體需要不同的行高測量,實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實現。



          23.突出最重要元素的方式


          突出最重要的元素。通過使用字體大小,權重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡單,但微妙的調整,讓用戶體驗更好一點。



          24.錯誤下額外的視覺輔助


          操作錯誤的時候,添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式,但很有幫助,當他們填寫任何形式的表格時額外的視覺輔助。



          25.移動端熱區創建


          嘗試在移動端創建慷慨的熱區。當為移動設備設計時,嘗試創建足夠大的可點擊區域,是好的。對于只包含文本的按鈕和鏈接來說,這是很有挑戰性的,盡可能使用帶有標簽的圖標。

          以下是iOS和Android的最小推薦點擊區域:

          44 x 44pt用于iOS

          48x48dp用于Android



          26.短標題上盡量使用全大寫


          在短標題上盡量使用全大寫。如果你想在標題上使用全大寫,請確保它們在任何時候都很短。有可能,最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣,在標題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。



          27.保持文字與圖像的對比度


          在輕文本和圖像之間,保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。



          28.英文標題字體推薦


          看看這些很棒的字體,用在標題非常好的。發現他們真的很適合標題,設計感很強。(我沒有推廣費用,請放心用)



          29.英文長文本字體推薦


          看看這些很棒的字體,用于長文本是非常好的,強烈推薦使用。(我仍然沒有任何推廣費)。



          30.讓垂直節奏恰到好處


          標題和正文。當你想實現一個好的垂直節奏,以及一個強大的視覺之間,需要對文本元素排版、間距作設計。我見過許多設計,最常見的是在文章列表中,它們已經被應用標題的上下空白相等,這樣就失去了這種聯系在它下面有正文。在這種情況下,我總是會給我的標題更多的頂部邊距,而在底部,標題和下面的內容之間的連接是更強,有良好的垂直節奏,視覺層次保留在所有的文章之間。



          31.使用具有信息性的提示符


          對于下載指標,試著去做盡可能提供信息。對于用戶,嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點,用百分數來顯示當前進度,一個簡單的圖標,讓他們可以在任何地方取消下載時間。




          32.保持標題相對簡潔


          如果你能保持標題簡短,簡潔……“想做就做”。

          如果可以,如果合適的話,保持標題簡短,時髦,切中要點。而不是“這是你的風格,你的方式”,簡單地使用像這樣的“你的風格。你的方式?!比藗儠g覽,保持這些標題簡短有力有助于他們更快地消化中的信息。

          記住,這種方式可能會讓人感覺很突然,你需要考慮一下你所從事的項目類型,以及目標受眾來決定方法是合適的,相對于更標準的格式。



          33.選擇合適的字體


          正確的設計“聲音”。在項目中處理文本時,選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨特的聲音,關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時,這似乎是一項艱巨的任務,所以不要害怕從類似的項目中獲得靈感,并從這些項目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。




          34.行長度的平衡點


          你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面,45到75個字符被普遍認為是滿意的行長度,而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然,字體大小和行高在決定可讀性時也起著重要作用,但是對于行長,保持在45到75個字符之間,就會更好了。




















          35.幽靈文字提升用戶體驗


          偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗,那么出于裝飾的原因,插入奇怪的元素是可以的。



          36.界面元素保證快速區分


          使用戶界面中的元素彼此區分。按鈕、通知,ui中兩個獨立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區分開來,輕松掃描您的網站或應用程序。按鈕,在大多數情況下,將優先,所以確保他們是最突出的。項目在屏幕上,并很容易區分其他元素。



          37.投影的玩兒法


          只是一些細微的陰影,你所需要的。我們都喜歡陰影,對吧?它們可以作為微妙又很強大的視覺線索,在您的設計中使用要適度?,F實世界中的陰影,在大多數情況下幾乎是不可察覺的,而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實現一些的東西更微妙和栩栩如生。



          38.全大寫文本

          使用全部大寫?選擇適合的字體,能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重,使用戶的光學清晰度。



          39.讓面包屑脫穎而出

          讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經常用于內容豐富的網站,通過最小的調整,你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度,這一點尤其有用。



          40.嘗試用高飽和顏色


          使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒,但是當過度使用時,它們會使使用者的眼睛疲勞,主要是在使用的時候的文字內容。盡可能使用時要適度,并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時,可讀性和可訪問性應該是最優先的。




          41.圖表不要叛逆的使用


          在ui中使用已建立的圖標,為了避免給用戶造成混淆。在你的設計中添加圖標時,試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑,成為用戶的認知障礙。不要在這些圖標上過于叛逆。




          42.接近原則


          在眾多經過嘗試和測試的設計原則中,這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程,表明彼此之間的關系,這有助于加快用戶的認知。




          43.文本網格

          4pt基線網格+ 8pt網格=單一網格。當使用類型時,8點網格旁邊使用4點基線

          可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4,使用的行高值為4的倍數(16、20、24、28等)

          為什么4?我發現在過去使用特定的文本大小時,按8的倍數縮放是不太合適。




          44.文本建議行高比例

          減少標題上的行高是很好的。與長形式的主體文本不同,它需要足夠的行高,以便折行易讀。標題的推薦行高通常約為1至1.3倍。



          45.顏色選擇


          選顏色有困難計劃嗎?在顏色上進行類比論。類似的顏色,也被稱為相鄰或相鄰的色調,是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的,顏色方案快速。當你需要快速將顏色調和到混合中時,可以使用類似的方法。



          46.提高信噪比


          在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲,從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效,不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。



          47.圖像文字達到強對比


          我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時,使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。



          48.使用重量、大小和顏色來表示類型中的層次結構


          當使用類型時,元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產生任何混淆。



          49.淺色文字加深色?


          養肥了,字體大小為最佳易讀性。當設置暗色文字與淺色背景,選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量,特別是對于長表單副本。以最佳的易讀性為目標,避免讓用戶的眼睛疲勞。




          50. 用你的字體選擇創造正確的情感回應


          試著為你要呈現的內容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當內容與他們交談當它不是。正確的字體選擇是至關重要的,使您的內容講給他們直率和情感的水平。



          51.大寫字母+字母間距=更好的易讀性


          你是否使用全大寫的短行文本?嗯…這是一個好主意,增加這些字母之間的間距,以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。



          52.錯誤告知


          打開這些錯誤消息,您的表格有幫助。在使用表單時,請嘗試并確保錯誤消息得到解釋。出了什么問題,如何補救。總是讓用戶了解情況,即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用,不要讓您的用戶蒙昧。




          53.告知用戶正在發生什么


          試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循,并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。




          54.不可逆的操作強提醒


          告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前,總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為,如刪除某些東西。讓用戶知道將要發生什么,并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。








































































































































































































































































          文章來源:站酷   作者:卡洛設計雜貨鋪
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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









          體驗設計進階技巧-教你打磨頁面細節

          純純

          隨著體驗設計的持續發展,行業內各領域的體驗設計質量都有了很大的提升,并且各個競品之間的差距越來越小。而更高的界面細節設計質量不僅是各個大廠產品體驗設計的追求,也是我們拉開競品差距的關鍵一環。我們平時可能閱讀了很多理論知識文章,但往往在實際工作中卻較少運用。學習掌握理論基礎知識固然是很重要的,但在設計執行時掌握設計技巧也更能提升工作的效率和質量。那么在設計執行層遇到問題有沒有一些立竿見影的解決方案呢?本篇文章分別從視覺、內容和交互三個角度總結了十個界面細節設計點,希望可以幫助你遇到問題時另辟蹊徑,延伸更好的設計思路。



          在封面和背景圖設計的場景中,我們為了讓封面上的信息能夠更容易看清,通常會在文字下添加一層黑色半透明或者漸變蒙層,但你有想過這個蒙層可以不止是黑色的嗎?

          在設計社區話題詳情頂部背景圖時,我們采用封面圖模糊處理后作為背景圖的方案,為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。當用純黑色作為蒙層時淺色背景可能會顯得很臟,這時可以改用深灰色讓背景看起來不會太臟,加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#000000、30%不透明度,右邊是深灰#333333、30%不透明度??梢钥闯鲇疫叿桨傅男Ч黠@更清爽一些。當然更好的方案是通過客戶端拾取背景圖顏色后生成對應色相的深色蒙層,但這個方案設計相對比較復雜。需要制定一系列拾色和生成對應色值的規范,并且開發成本偏高。有條件的話也可以考慮應用。



          界面中使用圓角設計更能讓用戶感到親和力和舒適感,所以運用場景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場景,在一些細節的處理運用圓角也能提升設計品質。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運用常規的切割邊角就比較尖銳,會略顯生硬。

          而添加了圓角處理后視覺上會更加柔和更協調,對比一下前后的方案不難發現圓角的效果更勝一籌。不要看只是一點很小的細節,其實也體現了設計師對細節的細心追求,用戶看了也會體會到設計師的用心。

          另外再介紹一下我個人在sketch中快速繪制這類圓角銜接的方法。以下圖為例,首先頭像的圓形描邊需要單獨畫一個白色的圓形圖層,而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設為聯集,再將圖層路徑合并。然后在兩個銜接處的兩邊各添加一個錨點,注意兩個錨點和銜接點的距離一定要相等,這個距離決定了圓角的大小,可以根據需要來調整。之后把銜接點的錨點類型改為“筆直”,再給這個錨點添加圓角半徑。這樣銜接點的圓角繪制就完成啦。另外運用布爾運算來畫出圓角也是可以的,具體方法可以根據個人習慣來選擇。



          我們在頁面取色時經常會給背景色和陰影等結合場景帶有一些顏色傾向,以達到更舒適的視覺效果,其實這個方法也適用于文字。為了提升效率,我們習慣了在選擇字色時使用一套設計規范里的顏色,比如#333333、#999999等等。但是個別的特殊模塊我們是可以根據實際情況調整以獲得更好的視覺效果的。比如下面這個案例是一個熱帖榜單的入口模塊,為了提高信息層級讓頁面更有活力,這里選擇用淺黃色作為背景。如果使用規范的字色與背景的結合會相對不太協調,這里選擇字色時就可以讓文字顏色和背景顏色帶有相同的色相,選用高飽和度低明度的顏色,并且次級信息同時可以帶一點不透明度。讓整個模塊視覺更統一,信息與背景更融合。

          類似這樣的場景其實還有很多,有時我們也不必拘泥于設計規范中,適當的根據模塊定制化一些細節可以達到更好的視覺效果。


          我們經常會遇到一個頁面中有多個同級圖標排列的情況,不管是用宮格排列或是列表排列都需要每個圖標整齊有序、尺寸統一。但實際情況下不可能每個圖標尺寸都完全統一。一般這種情況我們可以給每個圖標統一添加一個相同尺寸的矩形圖層作為背景板,將背景板隱藏后再整體編組,這樣一來就能保證每個圖標所在的組都是相同的尺寸就能統一對齊了。


          然鵝,我們有時會遇到一些不規則形狀圖標,尺寸是奇數甚至是帶小數的。這種情況圖標如果要在背景板上完全居中,我們可以打開首選項中的圖層項,關閉契合像素功能,然后可以拖動圖標或者用對齊功能讓圖標與背景板對齊。不要忽略這一兩個像素的差別,這些微小的細節往往決定了界面設計的嚴謹和精致程度。



          另外,我們可以根據情況靈活調整圖標在背景板中的位置,例如左右箭頭圖標為了與頁面其他內容邊距對齊,可以將圖標貼合背景板左右兩邊。這樣就能減少后期開發還原調整的工作量,提高工作效率。




          標題信息在界面設計中使用頻率非常高,而在設計過程中我們可能會忽略極限字數的情況,導致開發還原時實際效果不理想。下面以一個案例來分享一下標題極限值的處理方法。

          在騰訊動漫社區改版中設計話題詳情頁的標題時,產品規劃標題的字數為12個字符,在右邊有看漫畫按鈕的情況下是顯示不完全的。這個情況就要考慮設計極限值的顯示方案。常規的方案有:1、顯示不完全時后面顯示“...”;2、換行顯示。考慮到詳情頁需要將標題完全展示,所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統一。最終經過思考決定使用方案三:標題顯示不全時左右滾動展示,可以在保證視覺統一同時顯示完整的標題。


          同樣的,在很多情況下我們由于空間受限無法展示完整信息時,這個方案也不失為一個很好的選擇。



          在頁面設計工作中我們有時會遇到信息容器邊界固定,而容器內信息可以滑動的情況。例如下圖中頂部導航和音樂播放的歌詞頁面,這種場景下一般容器邊界不會做明顯的界限,如果內容在邊界處是直接被裁切的話體驗的感受就會比較割裂。我們可以嘗試更好的解決方案,在容器邊界增加漸變過渡,這樣信息在邊緣的過渡就變得柔和,頁面整體更協調。


          這種漸變的過渡的應用場景還有很多,比如瀏覽簡介或者文章時,需要隱藏部分內容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內容,降低用戶的理解成本并且也能夠讓用戶有心理預期。


          另外在sketch上呈現這種漸變過渡也很方便,如果背景是純色的話可以在邊界處添加一個與背景色相同顏色的色塊,然后給色塊添加添加不透明度從0~100的漸變,這個方法比較簡單。如果遇到背景復雜的情況,也可以繪制一個和容器相同大小的矩形,在矩形邊緣添加不透明度從0~100的漸變,然后建立蒙版把信息剪切到矩形中。

          至于開發實現的方案還是要和開發哥哥具體溝通,確保用最便捷的方案還原出最好的效果。



          動態流是我們非常常見的樣式,是分發用戶生產內容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內容。一般情況支持九張圖片或一個視頻,在有多張圖片時,可以如下圖做成宮格的樣式適配,每張圖片截取中間的正方形部分。

          而只有一張圖片或者視頻時,為了保證圖片和視頻的預覽效果,通常會做大尺寸的預覽圖,而圖片的寬高尺寸并不固定,所以只截取中間方形的方案并不能滿足要求,我們要根據這個情況做單獨的適配方案。首先我們要設定一個裁切的比例,比如我們取豎圖最小裁剪寬高比為2:3,橫圖最大裁剪寬高比為3:2(這里的寬高比并不是固定的,可以根據實際需要自己定義比例,采用4:3、16:9等比例都是可以的)。這樣當圖片寬高比小于2:3時,我們可以把圖片中間區域按寬高2:3裁剪出來;圖片寬高大于2:3并且小于3:2時可以按原圖比例預覽;而圖片寬高大于3:2時,把圖片中間區域按寬高3:2裁剪出來。另外要注意要給圖片設置最大高度,否則圖片高度太高會減少頁面信息承載量,降低閱讀效率,相應的也要限制最大寬度,否則會使圖片規則不統一,從而頁面適配效果不協調。

          同樣的,這個規則也適用于視頻,由于全面屏手機占比越來越高,這些手機拍攝的視頻大多是19:9、20:9的寬高比例,相比視頻常用的16:9的比例更加細長,所以橫屏視頻可以統一裁剪為16:9比例,而豎屏視頻可以裁剪為9:16比例。

          動態流圖片適配的核心是制定一個適配的規范來保證閱讀的舒適度和效率。而這個規范并不是恒定的,可以根據自身平臺需要來制定,以上僅作為一個示例供參考哦。



          隨著沉浸式設計的趨勢,很多頁面會采用無標題欄的設計。例如下圖的個人中心頁面,頂部利用背景圖來渲染品牌氛圍。但是這類無標題欄頁面的上滑交互普遍有個缺陷,就是如果未經處理上滑后內容會與頂部電池條者是置頂的按鈕位置重疊。這種類似“穿幫”的情況給用戶的體驗就是設計處理不夠嚴謹。然而這種交互細節也是可以優化改善的。


          優化的原理也很簡單,就是在上滑過程中添加一個標題欄來分割頁面內容,從而讓內容和頂部元素不重疊。標題欄可以隨上滑高度改變不透明度,以達到柔和的過渡從而實現絲滑的交互體驗。



          類似的處理方案在各大平臺也有較為廣泛的應用。




          在用戶體驗發展的趨勢中,無論是交互的反饋或者是圖片、信息等都趨于由靜態向動態發展。常規的靜態圖片承載的信息相對有限,所以在有限的載體內讓內容動起來展示更大的信息量不失為一個很好的選擇。

          在舊版本的iOS12系統中有一個視圖選擇的功能,用戶在這個頁面可以選擇標準視圖和放大視圖,并且有三張圖可以滑動展示不同場景下兩個選項的差異,但是這個方案需要來回切換標簽和滑動圖片來對比差異,效率很低。而在之后改版的iOS13系統中,這三張靜態圖被替換成了兩張動圖,輪流切換三個場景的頁面,用戶不需要再滑動圖片就能更加直觀的對比兩個選項的差異。這個小改動不僅可以讓圖片展示更多的信息,還能減少用戶的操作成本提升操作上的體驗,讓閱讀效率更高。


          類似的延展應用場景也有很多,例如新功能引導動畫、動態banner等等。其實原理都是一樣的,在常規靜態圖的基礎上優化為動態圖,不僅能增加信息的承載量,提高閱讀效率,也能讓頁面更有活力。




          為了滿足運營的需要,我們有時會在多同級個圖標或者按鈕中突出其中的一個。例如下圖的分享彈窗,想要在多個分享途徑中突出微信的圖標,但同時又要保證圖標風格的一致性,這時就可以利用微動效來達到強調的效果。







          而微動效的落地形勢也有很多種,下面拋磚引玉介紹幾種簡單高效的方案。


          可以看到添加了微動效后不僅可以達到強調某一個對象的目的,同時也能保證每個圖標風格的統一,微動效也讓頁面更活潑有靈性,不失為一舉多得的方案。

          微動效的形勢當然不局限于上面幾種,大家也可以發散思維,創造更多有創意的方案。

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

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

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

          如何提升B端界面的精致度

          純純

          于B端,我想剛開始很多同學就直接拿Ant Design套套界面,因為公司要求并不高,隨后字節Arco Design也推出了對應的模版和規范,能讓我們快速作出一個不出錯的方案。

          但是隨著公司對B端越來越重視,這些模版顯然就太爛大街了。公司、市場的要求顯然不止于此,我們的設計追求也不止于此。 

          那么我們如何才能擺脫套模版,提高界面的精致度,提升界面的交互體驗呢?

          其實很簡單,王陽明先生告訴我們知行合一,知是行之始行是知之成。我們如何才能提升B端界面端精致度?

          第一,需要知道什么是好的設計;

          第二,需要不斷的去實踐去練習,缺一不可。

          本文先和大家談談知的層面,提高我們的眼界,下面就和大家分享一些不錯的B端產品,大家有時間可以去慢慢體驗。 

          PS:作為B端設計師,一定要去多拆解競品,多研究好的產品,別面試的時候,面試官問你研究的B端產品是什么,你只知道阿里云、騰訊云、百度云哦! 


          1、Hubspot

          做B端的同學,尤其是做CRM的同學應該都知道Salesforce,他是全球最大的 CRM(客戶關系管理) 工具公司。 

          Hubspot同樣是提供客戶管理相關的應用,雖然成立相對Salesforce晚,但是在市場上也占有一席之地。

          從設計的角度來看,他的界面風格更加簡潔舒適,從體驗上來看和國內的CRM系統完全不同,其體驗更加自然和舒適。 

          這種風格大家看了有沒有覺得很熟悉呢?

          大家在去看看 GoDoddy , Airbnb ,Zillow,是不是發現風格有一點類似,大家可以對比國內產品去拆解下他們的交互細節有什么不同,完成同樣的任務他們采用的方案有何不同,相信你會有很多的收獲。 

          國外的界面看著總讓人覺得很舒適,僅僅是因為克制的設計、中性灰使用得好嗎?當然不是,是因為英文本身就是圖形化的文字。

          如果翻譯成中文,你會發現好像不是特別理想。 

          這個樣子拿給領導過稿,怕是分分鐘被拍死,因此我們還是需要多看看國內優秀的產品。


          2、神策

          神策的設計,我想B端的朋友不陌生吧,國內產品中他的設計一直是我們的參考對象。

          不同于其他產品,他的體驗門檻比較低,注冊后就可以去體驗他的demo,也沒有試用期限,參考對象從可視化報表,到界面交互均能找到參考。

          不過當你參考一次后發現,做出來的界面怎么還是少了一些靈魂,雖然界面風格上了一個臺階,但為什么用戶還是覺得產品難用。

           

          3、項目管理類

          這里不得不和大家推薦項目管理類產品了,這類產品是專門給互聯網公司的開發團隊使用,他們都是專業用戶,同時這些都是提高他們工作效率的工具,因此這些產品投入的成本更高,優化得更好,拆解他們的產品,就是直接觀看高手的成長之路。

          Jira

          Jira是Atlassian公司出品的一款事務管理軟件,JIRA的界面效果交互都非常不錯。大型互聯網公司如LinkedIn、Facebook、eBay等內部都在使用Jira。

          同時他也是國內項目管理類產品的學習研究對象,因此大家可以通過文章、B站、界面截圖,自己申請體驗等方式全面的進行體驗。

          同時也可借助群的力量,調研下有使用Jira的小伙伴,看看他們在使用中有什么問題,下面是我收集Jira網頁版和本地配置版的問題截圖,這些都來自不同角色的真實體驗,會更有分析的價值。(這部分截圖涉及到公司的數據,同時數量多不太方便打碼,就不分享給大家了。)

          當然國內的項目管理類產品也得去看,我們要對比哪里做得好,哪里還需要改進。國內的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,這些產品不管從視覺還是體驗都非常不錯,大家一定要去體驗。


          5、文檔管理類產品

          通過不斷對競品進行拆解,你已經不是當初那個小白了,你的行業認知,方案設計能力應該趕超了一大波人。

          成長的同時,又發現你設計的界面,不太精致,少了些溫度,這時候推薦你看文檔管理類產品。

          WPS

          第一個和大家推薦的是WPS,界面簡潔,配色舒適。 


          飛書

          在管理類的軟件中,不得不提飛書的管理界面,從設計到使用體驗,他給我的感覺終于不是那么千遍一律,用組件庫搭建起來的感覺。

          他開始有了溫度,開始注重品牌感的打造,用戶的引導,符合品牌調性的插畫。 

           

          對一些體驗的細節進行優化,比如傳統的編輯都是放在頁面頂部,它采用了離光標更近的位置。 

          根據菲茲定律,光標當前的位置和目標位置的距離D越短,所用的時間越短,具體好不好用,歡迎大家在評論區留言哦。 


          6、概念稿

          到這時候如果你覺得線上的產品太禁錮思維,那么推薦你看看dribbble、behance,搜索data、web、dashboard等關鍵詞,去看看有沒有新的靈感。

          我的花瓣收集了一部分,如果不嫌棄,可以去看看,順藤摸瓜應該可以找到很多不錯的設計。

          圖片標題

           

          7、畫重點

          如何提升B端界面的精致度?

          第一,要知道什么是好的設計,多拆解國內外優化的B端產品。

          第二,多在工作中時間,有時間多做ABC方案,鍛煉自己的方案設計能力,多踩一些坑,時刻保持學習能力,慢慢就成長了。

          文章來源:UI中國   作者:風箏KK
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

          seo達人


          shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

          原文地址:站酷

          作者:孔雅軒LineVision

           

          轉載請注明:學UI網》你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

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

          存檔

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