中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

iOS和Androidd的標(biāo)簽導(dǎo)航設(shè)計(jì)解析

2022-05-26    分類: 網(wǎng)站建設(shè)

今天開(kāi)始,將介紹iOS和Android設(shè)計(jì)規(guī)范中關(guān)于導(dǎo)航的部分。今天要介紹的兩個(gè)控件,經(jīng)常容易混淆以至于用錯(cuò)。請(qǐng)各位讀者仔細(xì)閱讀,防止以后用錯(cuò)。

Material Design Guidelines

標(biāo)簽(tabs)使內(nèi)容在一個(gè)較高的層級(jí)被組織起來(lái)。一般,一個(gè)標(biāo)簽里需要展示與該標(biāo)簽相關(guān)的內(nèi)容。標(biāo)簽的名字需要清楚地描述該標(biāo)簽里所包含的內(nèi)容。

信息架構(gòu)

標(biāo)簽導(dǎo)航一般用于從一個(gè)比較高的層級(jí)來(lái)組織信息,呈現(xiàn)出提綱挈領(lǐng)的效果。例如,使用標(biāo)簽呈現(xiàn)報(bào)紙的不同版面。不要使用標(biāo)簽導(dǎo)航來(lái)呈現(xiàn)不同頁(yè)碼的頁(yè)面(就像搜索結(jié)果頁(yè)中的第1頁(yè),第2頁(yè)那種頁(yè)面),也不要把標(biāo)簽的切換設(shè)計(jì)成可循環(huán)的樣式(即,在最后一頁(yè),繼續(xù)向下切換又回到第一頁(yè))。

下面所示的用法示例需要注意:



內(nèi)容

一個(gè)標(biāo)簽里的所有內(nèi)容應(yīng)該屬于一個(gè)大分類(比如“設(shè)置”或者“音樂(lè)”),并且標(biāo)簽之間內(nèi)容不能有重疊。標(biāo)簽可以包含圖標(biāo)(icon)和文字。如果使用文字,則盡量簡(jiǎn)短。

另外有以下用法示例需要注意:


使用

標(biāo)簽有兩種,一種是固定標(biāo)簽,適用于標(biāo)簽的數(shù)目比較少的情況。每個(gè)標(biāo)簽固定的位置,有利于用戶的記憶:


固定標(biāo)簽示例

另一種是可劃動(dòng)標(biāo)簽,適用于標(biāo)簽數(shù)量比較多的情況。同時(shí),可劃動(dòng)標(biāo)簽的寬度可以長(zhǎng)短不一,根據(jù)標(biāo)題長(zhǎng)短決定。


可劃動(dòng)標(biāo)簽示例

通常,標(biāo)簽被建議使用在以下的情況:

需要經(jīng)常切換視圖;

應(yīng)用包含的視圖比較少;

應(yīng)用提供的幾個(gè)視圖都比較重要(由于標(biāo)簽切換,相對(duì)于別的導(dǎo)航方式來(lái)說(shuō),操作更容易。因此通過(guò)標(biāo)簽導(dǎo)航提供的幾個(gè)視圖,相對(duì)來(lái)說(shuō)到達(dá)率會(huì)更好。筆者注)。

iOS Human Interface Guidelines

分段控件可以包含兩個(gè)或者更多的分段選項(xiàng),每一個(gè)選項(xiàng)作為一個(gè)獨(dú)立的按鈕而存在。在一個(gè)分段控件里,所有的分段選項(xiàng)在長(zhǎng)度上要保持一致。和按鈕一樣,每個(gè)分段選項(xiàng)可以包含文案或者圖片。分段控件通常用來(lái)作為不同視圖的入口,比如在地圖應(yīng)用里,分段控件可以讓用戶在“地圖”、“交通”和“衛(wèi)星”等視圖間切換。


△ iOS系統(tǒng)自帶的地圖應(yīng)用

關(guān)于分段控件的使用,蘋果規(guī)范給出了以下幾個(gè)要點(diǎn):

限制分段選項(xiàng)的數(shù)目,以提高可用性。更寬的分段選項(xiàng)更容易點(diǎn)擊。在iPhone上,蘋果建議一個(gè)分段控件包含的分段選項(xiàng)最多是5個(gè)(想說(shuō)5個(gè)也不少了好不好。。)

盡量保證每個(gè)分段選項(xiàng)里的內(nèi)容的尺寸是一致的。因?yàn)樗械姆侄芜x項(xiàng)在長(zhǎng)度上需要保持一致,所以如果有的分段選項(xiàng)內(nèi)容很滿,而有的比較空,在視覺(jué)上會(huì)不太美觀。

在一個(gè)分段選項(xiàng)里,避免同時(shí)使用文案和圖片。盡管單個(gè)分段選項(xiàng)里可以包含文案或者圖片,但是同時(shí)包含兩者可能會(huì)使界面看起來(lái)割裂和迷惑。

如果你定制了一個(gè)分段控件的外觀,那么請(qǐng)確保內(nèi)容的位置是恰當(dāng)?shù)?。比如,如果你更改了分段控件的背景,那么?qǐng)確保里面的內(nèi)容看起來(lái)是OK的,并且是對(duì)齊的。

以上介紹了MD和iOS設(shè)計(jì)規(guī)范中對(duì)于標(biāo)簽導(dǎo)航和分段控件的介紹。這兩個(gè)控件由于長(zhǎng)得比較相似,因此經(jīng)常會(huì)用錯(cuò);尤其是分段控件,需要注意它是不能通過(guò)劃動(dòng)來(lái)切換的。

討論使我們認(rèn)識(shí)更加深刻,歡迎留言討論。

最近整理了交互方面對(duì)實(shí)戰(zhàn)很有幫助的一些知識(shí)點(diǎn),在千聊上跟大家分享,希望可以幫助大家提高交互技能。分享是一個(gè)系列,總共包含6次主題分享:

場(chǎng)景

心理模型和流程設(shè)計(jì)(一)

流程設(shè)計(jì)(二)

流程設(shè)計(jì)(三)

正確使用iOS和Material Design控件

方案測(cè)試和驗(yàn)證

網(wǎng)站名稱:iOS和Androidd的標(biāo)簽導(dǎo)航設(shè)計(jì)解析
文章鏈接:http://m.rwnh.cn/news44/159394.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)標(biāo)簽優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)站策劃

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)
黄陵县| 镇原县| 蕲春县| 京山县| 临沧市| 鄱阳县| 贵德县| 自贡市| 华安县| 萨迦县| 岱山县| 金阳县| 乐陵市| 徐汇区| 房产| 额济纳旗| 望江县| 兰溪市| 阳山县| 福泉市| 景谷| 荔浦县| 石泉县| 岐山县| 绥棱县| 乌审旗| 六枝特区| 太谷县| 浮梁县| 巴马| 鸡泽县| 建水县| 南开区| 高州市| 遂川县| 柳州市| 东明县| 上高县| 石嘴山市| 客服| 库尔勒市|