中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在B端界面設(shè)計中，表盤頁面設(shè)計是其中常見的一種類型，而如果想給用戶留下更專業(yè)的印象和更良好的體驗，那么頁面在布局設(shè)計上就要著重考慮。本篇文章里，作者就結(jié)合實際案例，對表盤頁面設(shè)計進行了一定解讀，一起來看看吧。

一、表盤頁面的設(shè)計

表盤頁面設(shè)計是我們做B端界面設(shè)計會做的第一種界面，也是網(wǎng)上 B 端飛機稿做的最多的類型。在一個項目中，表盤頁面決定了該項目視覺觀感的上限，也是作品集里展示項目中最重要的頁面類型。

而且，多數(shù)項目登陸后的首頁多為表盤頁，如果該頁面的設(shè)計不夠?qū)I(yè)、合理、有效，那么第一印象勢必會非常差，影響后續(xù)體驗。

所以學(xué)習(xí)和加強 B 端界面的設(shè)計，第一站就是做好表盤頁面的設(shè)計，再考慮其它頁面類型。

今天，我們要繼續(xù)進行線上項目的首頁改版，但和以往不同的是，我會添加一些新的表盤頁設(shè)計思路進來。

首先我們看看今天的改版對象，泛普登陸后的主頁 “日常工作” 頁面：

應(yīng)該可以直接感覺到，界面的設(shè)計是不怎么 “對勁” 的。作為一個 SaaS 項目就很難讓第一次登陸的用戶產(chǎn)生采購欲望，并且這也是直接擺作品集里肯定會找不到工作的案例……

問題很明顯，我就不用像體驗還是交互分析這樣做長篇分析了，簡單概述一下：

• 一二級導(dǎo)航相隔太遠，操作不順手；
• 色彩應(yīng)用混亂，不必要的顏色太多；
• 文字信息密度太高，有效信息量不足；
• 模塊劃分比例不合理，缺乏節(jié)奏感；
• 圖表內(nèi)容不是太密集就太寬松；
• 表格文本缺乏對比，排序不合理；
• ……

所以，針對這些問題，以及本身作為工程管理系統(tǒng)的特性，我們可以簡單定義出改版的設(shè)計原則：

之后表盤頁的設(shè)計順序?qū)⒆裱韵碌牟襟E完成：

1. 設(shè)置畫布刪格；
2. 確定全局框架；
3. 全局組件設(shè)計；
4. 內(nèi)容區(qū)域切割；
5. 完成內(nèi)容設(shè)計。

二、具體改版內(nèi)容分享

步驟1：完成畫布柵格設(shè)置

這里我們還是采用 1440 * 800 的小尺寸畫布，并去掉等等左側(cè)導(dǎo)航的寬和內(nèi)容區(qū)域邊距，24 列，間距 10 的柵格系統(tǒng)。

步驟2：確定全局框架

在柵格基礎(chǔ)上，進一步確定全局組件的應(yīng)用，并調(diào)節(jié)組件內(nèi)容的區(qū)域。比如雙導(dǎo)航應(yīng)用中，一級導(dǎo)航左移，靠近二級側(cè)邊導(dǎo)航。

因為原側(cè)邊欄選項非常多，可以超過一屏高，所以將個人信息移動到頂部欄右側(cè)，對應(yīng)層級也更合理。

步驟3：全局組件具體設(shè)計

這一步開始具體設(shè)計頂部欄、導(dǎo)航欄、標簽欄的內(nèi)容，完成參數(shù)應(yīng)用和相關(guān)布局，并填充基本的圖標和配色。

步驟4：內(nèi)容區(qū)域切割劃分

到這一步，就進入到這次分享中最關(guān)鍵的部分，表盤內(nèi)容區(qū)域的模塊劃分。先對內(nèi)容區(qū)域進行切割，來確定不同模塊的位置、大致尺寸，再開始后續(xù)的設(shè)計。

在這步操作中，并不是怎么好看怎么舒服怎么來，而是要遵循一些基本的原則來完成內(nèi)容的制作。包括但不局限于以下幾條：

1. 遵循F型的瀏覽順序，左側(cè)內(nèi)容比右側(cè)內(nèi)容關(guān)注度更高，使用率更高；
2. 信息內(nèi)容權(quán)重越高，模塊占比就越大，更容易被注意；
3. 盡量在第一屏高度內(nèi)容納最重要的信息，減少滾動頻率；
4. 模塊區(qū)分度要高，不同模塊信息要能輕易被區(qū)分和識別；
5. 模塊幾何分布構(gòu)成比例和諧，不會讓人感覺突兀別扭；
6. ……

這些基本的原則在有一定的項目經(jīng)驗以后都可以比較簡單地總結(jié)出來，但不管你有多少知識和經(jīng)驗，內(nèi)容區(qū)域的切割——沒有絕對正確的標準答案。

所以，這個環(huán)節(jié)我們就要盡量根據(jù)自己對內(nèi)容的理解和思考，輸出多個版本的方案進行比對，以及在團隊內(nèi)部進行討論，確定出最終版本。

比如下面就是我們簡單制作的幾個內(nèi)容布局方案：

每個方案的輸出，都要具備令人信服的邏輯和理由，而我們后面要做的，就是在這些方案里做取舍，選出最佳的，放棄不合理的。

這是提升界面設(shè)計質(zhì)量的關(guān)鍵步驟，也是表盤頁面設(shè)計中需要具體練習(xí)的能力。內(nèi)容區(qū)域切割，就像家裝設(shè)計中的平面戶型設(shè)計一樣，如果沒有優(yōu)秀的戶型規(guī)劃能力，那么再好的軟裝設(shè)計也彌補不了整體的缺陷。

當(dāng)然，這個步驟在真實項目中也可以放在第一步完成，會更節(jié)省評審的時間和提升設(shè)計效率。因為是改版，所以我放到后面處理。

步驟5：完成內(nèi)容設(shè)計

有了布局，下一步就是根據(jù)需求完成剩余內(nèi)容的設(shè)計了。這一步就是最基本的界面設(shè)計，就不在這里展開了。

只是，在設(shè)計的過程中還是要根據(jù)實際效果，反復(fù)優(yōu)化模塊細節(jié)、比例，來實現(xiàn)最佳的效果。尤其是模塊的高度和頁面的高端，是需要結(jié)合內(nèi)容做出調(diào)節(jié)的，而不是一開始定死，在內(nèi)容填不下了硬填，空間太大也就硬留白。

下圖就是簡單優(yōu)化后的最終版本，以及和老版的對比：

三、結(jié)尾

這次改版是比較輕度的項目，為了解釋布局切割的應(yīng)用，所以細節(jié)內(nèi)容必然有考慮不周的地方，不用過分糾結(jié)，關(guān)注核心的要點即可。

下篇再見～