<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          如何給界面做減法,實現(xiàn)B端設(shè)計提效效果?

          共 1568字,需瀏覽 4分鐘

           ·

          2023-08-25 00:49

          今天主要的改版案例依舊是表盤,前面幾次表盤的改版都是在視覺上做加法和優(yōu)化,但今天不一樣,我們要在表盤的基礎(chǔ)上做減法。

          前文鏈接:如何改版枯燥的表格頁面,總結(jié)了幾個要點


          首先看我們這次改版的對象:

          光憑第一印象,整體效果是還不錯的,落實到每個局部的話,布局也是合理的,可以看到是有設(shè)計的細節(jié)在里面.jpg。

          但是,再多看幾眼,就會發(fā)現(xiàn)整體的效果似乎有點不和諧,但又找不出來問題具體在哪,不知道怎么改下去。問題的根源就是 —— 過度設(shè)計

          我們強調(diào)過很多次,表盤頁的設(shè)計是作品集項目中最重要的頁面,因為觀看者對整體視覺和設(shè)計水準的印象是通過它建立起來的,不管你分析怎么寫,我們首先關(guān)注的肯定也是設(shè)計的效果。

          但重要不代表需要過度傾注和堆疊視覺元素,過度的設(shè)計會讓界面看起來有 “飛機” 敢,不僅不真實的印象產(chǎn)生了,還會顯得業(yè)余不夠自信。同時任何項目中表盤頁過度設(shè)計都會對整個項目造成負擔(dān),后續(xù)的頁面要怎么設(shè)計才能不和它產(chǎn)生隔閡,保持一致性。

          下面,我們根據(jù)原頁面進行分析,來找出問題并優(yōu)化:

          問題1:導(dǎo)航欄的圖標

          導(dǎo)航的頂部LOGO描邊沒有太大必要,以及圖標的設(shè)計在這個尺寸下非常的局促,因為細節(jié)較多,不僅復(fù)雜性提升了,也缺乏圖形辨識。

          所以改動中,將多余的背景去掉,再簡化圖標本身的樣式。

          問題2:頂欄的設(shè)計

          頂部欄本身設(shè)計單看是沒有問題的,但是作為全局欄目和導(dǎo)航欄顏色缺乏區(qū)分,而且用了投影來強化層次,就讓這個模塊的權(quán)重被過度放大。

          所以我們?nèi)サ袅吮尘吧⑦m當(dāng)增高欄目的高度,讓局部更舒展。

          問題3:統(tǒng)計數(shù)字的問題

          統(tǒng)計數(shù)字在作品展示里用特殊字體很常見,因為要用更美觀的字體來呈現(xiàn)重要的信息。但任何頁面中的信息權(quán)重都要保持階梯性,不能讓加粗、深色、特殊字體幾個要素作用在過多的信息上,這就讓畫面顯得非常的“吵”。

          所以要對字重和色彩做控制,創(chuàng)造對比來降低視覺的壓力。

          問題4:圖表的應(yīng)用

          原圖中的圖表應(yīng)用有一定的問題,第一個柱狀的堆疊類型并不是太符合實際數(shù)據(jù)應(yīng)用,下方的環(huán)形圖中起始位置顯然不對,并且色彩比較混亂。

          所以是答案對它們做出優(yōu)化,并調(diào)整了一些小細節(jié)。

          問題5:配圖類型選擇

          在引導(dǎo)卡片中,用的扁平插畫素材一方面不高級,另一方面內(nèi)容太碎,再加上用奇怪的字體和傾斜,使得這個卡片看起來非常別扭。

          改動中替換新的圖片素材(臨時找的,理解意思就行),同時使用一般黑體的標題,以及增加背景色,來形成新的卡片樣式。

          問題6:裝飾圖標應(yīng)用

          在快速入口和日程模塊中,都有使用裝飾圖標,顯然大家也能理解他們對于目前的語境來講還是細節(jié)過多了,所以需要做一些調(diào)整,讓它們簡化。

          最后,再加上一些細節(jié)的小改動,最終的樣式就完成了。

          表盤的設(shè)計一定要在最后做檢查,一些設(shè)計感強的元素是否有必要這么做,尤其是類似圖標元素,做得很花哨是否對信息的識別能帶來幫助?如果不行,那就可以果斷的放棄。

          表盤頁的設(shè)計感來自 —— 全局元素和色彩的控制,而不是單一某個局部內(nèi)容的加強。




          結(jié)尾

          今天的內(nèi)容就優(yōu)化到這里,這兩天在整理新的B端設(shè)計師的技能樹圖譜,因為太復(fù)雜花了不少時間,明天的公開課會放出和針對接下來應(yīng)該如何提升自己做出說明。


          感興趣的同學(xué)就不要錯過明天的公開課咯!下方掃碼預(yù)約即可??

          我們公開課賤~

          瀏覽 98
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  国产 欧美 日韩 在线 | 国产夫妻在线 | 中国毛片直接看 | 五月丁香在线视频 | 在线无码免费视频 |