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

優(yōu)點(diǎn)：

1. 能夠承載的菜單項(xiàng)數(shù)量和層級(jí)更多，擴(kuò)展性強(qiáng)；
2. 不占用屏幕高度且可以收起，為內(nèi)容提供更多空間；
3. 在菜單間切換時(shí)鼠標(biāo)移動(dòng)距離短；
4. 能夠更好地適應(yīng)屏幕寬度較小的設(shè)備。

缺點(diǎn)：

1. 菜單數(shù)量多層級(jí)復(fù)雜時(shí)，不容易記憶；
2. 菜單選項(xiàng)文字不宜過(guò)長(zhǎng)，可能會(huì)截?cái)啵?/li>
3. 各菜單選項(xiàng)之間的視覺(jué)權(quán)重差別不明顯。

三、狀態(tài)欄

狀態(tài)欄，它的定位是全局功能，或者是系統(tǒng)操作。比方說(shuō)有一些全局搜索、設(shè)置、通知等功能，將會(huì)放在這里。設(shè)計(jì)上來(lái)說(shuō)，難度不大。

四、標(biāo)題欄

標(biāo)題欄是用來(lái)放置頁(yè)面的名稱的，目的是告訴用戶現(xiàn)在所在的頁(yè)面是哪，與整個(gè)網(wǎng)絡(luò)是什么關(guān)系。一般會(huì)有4種展現(xiàn)形式，如下圖。

最常用的是第1、2種，第4種如遇特殊情況，對(duì)頁(yè)面高度空間要求高，以及頁(yè)面層級(jí)為單一層級(jí)時(shí)，可以去掉不用，因?yàn)樵谧髠?cè)的導(dǎo)航也有相應(yīng)的title進(jìn)行提示。

五、頭部區(qū)域

頭部區(qū)域一般是篩選功能。因?yàn)锽端主要承載的是查看功能，所以篩選項(xiàng)會(huì)特別多。

值得注意的是，默認(rèn)情況下查詢按鈕會(huì)放在篩選項(xiàng)之后，如果排滿了，會(huì)放在篩選項(xiàng)右下角，如上圖。有查看更多的話，“展開(kāi)”按鈕也會(huì)放在右下角。

頭部區(qū)域有時(shí)候也會(huì)放置一些內(nèi)容或者搜索項(xiàng)，如下圖。

六、內(nèi)容區(qū)域

內(nèi)容區(qū)域主要以報(bào)表、表格、表單三種形式呈現(xiàn)。

1. 報(bào)表

報(bào)表的布局一般是塊狀如下圖。

報(bào)表的展現(xiàn)形式主要分為柱狀圖、條形圖、折線圖、餅圖。

（1）柱狀圖

適用于多個(gè)個(gè)體對(duì)一個(gè)變量數(shù)據(jù)維度的比較，由高到低進(jìn)行排列，但有個(gè)特別的情況在于，如果可變量是時(shí)間，則按照時(shí)間順序進(jìn)行排列。

優(yōu)點(diǎn)：?一目了然地進(jìn)行比較數(shù)據(jù)維度的增減。

缺點(diǎn)：數(shù)目太多時(shí)（超過(guò)12個(gè)），分辨起來(lái)會(huì)比較困難，則適合折線圖進(jìn)行顯示。

（2）條形圖

適用于多個(gè)主體對(duì)一個(gè)變量數(shù)據(jù)維度的比較，由高到低或者由低到高進(jìn)行排列。

優(yōu)點(diǎn)：

1. 一目了然，容易比較數(shù)據(jù)的增減；
2. 對(duì)比較個(gè)體數(shù)量容納比較高，可以是幾個(gè)，也可以是幾十個(gè)。

缺點(diǎn)：需要更多垂直空間在屏幕上，有時(shí)需要用戶上下滾動(dòng)屏幕才能看到所有的個(gè)體。

（3）折線圖

適用于對(duì)趨勢(shì)的展現(xiàn)，Y軸的起點(diǎn)需要從0開(kāi)始，不建議展示每個(gè)節(jié)點(diǎn)，對(duì)比主體數(shù)量不建議超過(guò)4個(gè)，過(guò)多也會(huì)讓用戶辨識(shí)度降低。

優(yōu)點(diǎn)：

1. 特備適合于對(duì)趨勢(shì)的研究；
2. 對(duì)多個(gè)主體的對(duì)比效果很明顯。

缺點(diǎn)：對(duì)比主體不能太多；

（4）餅圖

適用于研究單個(gè)主體與整體之間的關(guān)系，找到影響整體的主要因素。主體個(gè)數(shù)不超過(guò)5個(gè)，如果超過(guò)可以使用一個(gè)“其它”選項(xiàng)進(jìn)行囊括；占比從大到小，從12點(diǎn)開(kāi)始按照順時(shí)針?lè)较蜻M(jìn)行排列。

優(yōu)點(diǎn)：很容易地研究出，影響整體的頭部因素有哪些。

缺點(diǎn)：

1. 各因素之間對(duì)比效果差，特別是兩個(gè)因素占比很相近的時(shí)候；
2. 如果影響效果太小，容易被忽略。

2. 表格

表格適用于展示一些條例的細(xì)節(jié)，比較說(shuō)充值/消費(fèi)的流水、創(chuàng)建多條廣告推廣計(jì)劃后的效果數(shù)據(jù)陳列等等。

在表格的設(shè)計(jì)事項(xiàng)中需要注意的是，每個(gè)屬性對(duì)齊方式要注意。數(shù)字類的一般是左對(duì)齊，價(jià)格是右對(duì)齊。價(jià)格右對(duì)齊是方便比較金額數(shù)的多少，從左邊突出的位數(shù)就能一眼看到哪個(gè)是最多與最少。如果價(jià)格一般固定在幾位數(shù)的話，也可以考慮左對(duì)齊。

優(yōu)點(diǎn)：方便check每一項(xiàng)的細(xì)節(jié)。

缺點(diǎn)：

1. 不太直觀；
2. 對(duì)整體的情況缺乏大局信息的展示。

在設(shè)計(jì)的過(guò)程中需要注意，盡量精簡(jiǎn)字段，避免橫向滾動(dòng)。如果字段實(shí)在太長(zhǎng)，一般會(huì)采取頭幾列，滾動(dòng)時(shí)表頭進(jìn)行浮起，方便滾動(dòng)過(guò)程中找到字段的主體。如果帶有操作類的功能，則表尾也可以進(jìn)行浮起。

3. 表單（如果看過(guò)之前表單文章的本節(jié)可跳過(guò)）

百度百科的解釋是表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。用通俗易懂的話來(lái)說(shuō)，就是我們看到的頁(yè)面需要填寫(xiě)較多相關(guān)信息的頁(yè)面，都叫做表單，如下圖：

（1）表單的內(nèi)容

從設(shè)計(jì)的范圍上來(lái)看，包含了兩個(gè)方面：

1. 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
2. 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；

（2）表單的對(duì)齊方式

今天來(lái)說(shuō)說(shuō)表單的對(duì)齊方式，一般情況下表單有如下幾種對(duì)齊方式：

類型1

優(yōu)點(diǎn)：

1. Label和Content關(guān)系緊密，容易識(shí)別和理解；
2. 適合需要多語(yǔ)言切換的情況，能夠兼容不同長(zhǎng)度的文字（因?yàn)橥粋€(gè)詞語(yǔ)不同語(yǔ)言翻譯起來(lái)長(zhǎng)短不一樣，以日語(yǔ)和西班牙語(yǔ)最長(zhǎng)），使得界面布局穩(wěn)定。

缺點(diǎn)：

1. 占用縱向空間比較多；
2. 當(dāng)采用多欄排版時(shí)，去過(guò)其中某一項(xiàng)內(nèi)容比較長(zhǎng)存在換行時(shí)會(huì)在一定程度上影響布局穩(wěn)定性。

類型2

優(yōu)點(diǎn)：

1. Label和Content關(guān)系緊密，容易識(shí)別和理解；
2. 適合單欄排版。

缺點(diǎn)：

1. 占用橫向空間比較多，特別是當(dāng)存在比較長(zhǎng)的Label時(shí)；
2. 在需要多語(yǔ)言切換時(shí)，有可能破壞布局視覺(jué)效果。

類型3

優(yōu)點(diǎn)：

1. Label的掃描和閱讀比較快；
2. 適合單欄排版。

缺點(diǎn)：

1. 占用橫向空間比較多；
2. 在某些語(yǔ)言下，一部分的Label和Content之間的距離會(huì)比較遠(yuǎn)。

類型4

優(yōu)點(diǎn)：節(jié)省空間。

缺點(diǎn)：Label和Content不易區(qū)分，影響閱讀。

（3）選哪種比較合適

類型4的基本使用不到，國(guó)內(nèi)如果不考慮多語(yǔ)言的話，類型2對(duì)齊方式使用的頻率最高，如果考慮海外場(chǎng)景的話，類型1最有普適性。

七、界面設(shè)計(jì)原則

除了以上介紹的設(shè)計(jì)內(nèi)容之外，當(dāng)遇到其它的設(shè)計(jì)問(wèn)題時(shí)，可以采取如下的準(zhǔn)則幫忙在設(shè)計(jì)的過(guò)程中進(jìn)行決策。

（1）一致性原則

整體操作的一致性，是做主要的原則。一致性可以減少用戶思考的次數(shù)和時(shí)間，讓用戶的注意力更集中于當(dāng)前的任務(wù)，進(jìn)行自己業(yè)務(wù)上的判斷，產(chǎn)生心流體驗(yàn)。

（2）簡(jiǎn)潔

簡(jiǎn)潔的閱讀和操作使注意力更集中。那么怎樣使頁(yè)面更加簡(jiǎn)潔？以下有4種方法可以采用：

刪除：刪除不必要的因素，進(jìn)行頁(yè)面元素的簡(jiǎn)化處理。

隱藏：根據(jù)用戶使用的場(chǎng)景，讓元素進(jìn)行隱藏，需要使用的時(shí)候再進(jìn)行呈現(xiàn)。

比方如下圖：

重組：也可以叫分類，可以將相近功能進(jìn)行組織成新的分類，也可以將不常用的功能進(jìn)行分類在“更多”這一欄中。

比方如下圖：

轉(zhuǎn)移：如果界面信息太多，可以將頁(yè)面轉(zhuǎn)移到新的窗口或者頁(yè)面進(jìn)行呈現(xiàn)。

如下圖：

（3）奧卡姆剃刀原理：即簡(jiǎn)單有效

奧卡姆剃刀原理稱為“如無(wú)必要，勿增實(shí)體”，即“簡(jiǎn)單有效原理”。盡量在不影響用戶主流操作的前提下，去增加不必要的功能。

（4）數(shù)量上采取7加減2

一般人的短時(shí)記憶容量約為7個(gè)加減2個(gè)，即5–9之間。可以理解為7加減2個(gè)組塊。比方說(shuō)如下圖，Apple官網(wǎng)的導(dǎo)航則設(shè)為7個(gè)種類。

（5）明確目的性的點(diǎn)擊

讓用戶明確知道自己要做什么，點(diǎn)擊哪里，比單純的減少點(diǎn)擊次數(shù)更重要。

（6）席克定律

席克定律是指，當(dāng)選項(xiàng)增加時(shí)，下決定的時(shí)間也增加。

用戶的在某一場(chǎng)景下對(duì)選項(xiàng)的反應(yīng)時(shí)間取決于三個(gè)因素：

1. 前期的認(rèn)知和觀察時(shí)間；
2. 根據(jù)認(rèn)知后，處理的時(shí)間；
3. 選項(xiàng)的數(shù)量。

在人機(jī)交互界面中選項(xiàng)越多意味著決策時(shí)間越長(zhǎng)，用戶越不知道選擇什么。

比方說(shuō)如下圖：

你知道選什么色號(hào)嗎？(#^.^#)

八、設(shè)計(jì)資源匯總

行業(yè)內(nèi)比較有名的B端設(shè)計(jì)規(guī)范

螞蟻Ant Designhttps://ant-design.gitee.io/docs/spec/introduce

餓了么Elementhttps://element.eleme.cn/#/zh-CN

飛冰 https://ice.alibaba-inc.com/

九、總結(jié)

從內(nèi)容上來(lái)看，入門，這些已經(jīng)夠用了，如果想要再進(jìn)一步就需要進(jìn)行項(xiàng)目實(shí)踐了。現(xiàn)在可以去接項(xiàng)目試試了！

有什么疑問(wèn)可以在留言區(qū)留言，閣主會(huì)一一回答。

專欄作家

Sophiallg，微信公眾號(hào)：Sophia的玲瓏閣，人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛(ài)折騰，愛(ài)健身的交互設(shè)計(jì)妹紙。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議