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

談?wù)勗O(shè)計(jì):列表中間隔內(nèi)容的視覺設(shè)計(jì)

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

大家好,我叫斑馬紋

  列表中使用兩種相同的樣式但顏色不同的背景,來間隔顯示的內(nèi)容。
當(dāng)然這個(gè)釋義我是借鑒《designing interfaces》來的,略有不同。我肯定承認(rèn)這是一本神作,不過看了當(dāng)下很多界面以及自身平時(shí)的設(shè)計(jì)之后,發(fā)現(xiàn)實(shí)際情況中使用的斑馬紋在原來基礎(chǔ)上通過視覺的處理有了擴(kuò)展,不僅僅是一深一淺單純顏色的配合使用。

圖一:最正宗的斑馬紋應(yīng)用

圖二:斑馬紋的延伸 – 內(nèi)容高度不一致的應(yīng)用

圖三:斑馬紋的延伸 – 增加線條的分割

圖四:斑馬紋的延伸 – 僅使用分割線

圖五:斑馬紋的延伸 – 單行顏色漸變形成的錯(cuò)落分割

圖六:斑馬紋的延伸 – 僅僅使用留空來分割(有一種神交的感覺)


什么時(shí)候你該披上我:

  斑馬紋的使用是當(dāng)在列表中,各行的內(nèi)容(每一行中又有多行內(nèi)容)甚至有多列數(shù)據(jù)在視覺上很難區(qū)分,起到一種規(guī)整的作用。從而使用戶在閱讀每一行的單個(gè)甚至多列內(nèi)容時(shí)形成聯(lián)系。

  有時(shí)候在帶有標(biāo)題的內(nèi)容時(shí)同樣使用深淺顏色作為區(qū)分,形成斑馬紋的效果。比如picasa的內(nèi)容區(qū)設(shè)計(jì)。當(dāng)然這是一種特例,但細(xì)心留意,卻也在被流行開來。

圖七:picasa的斑馬紋特殊用法


斑馬得皮膚病了

  為什么會去嘗試對斑馬紋做個(gè)了解,其實(shí)是最近會收到這樣的反饋:“斑馬紋搞得我文字看不清?。。?!”“啊,這里原來還有顏色啊”“太不舒服了”……我對我的行為深深的陷入了自責(zé),因?yàn)樵O(shè)計(jì)的結(jié)果把大家給激動(dòng)壞了(當(dāng)然我的出發(fā)點(diǎn)絕不是這樣的)。好吧,那怎么辦,調(diào)一調(diào),調(diào)一調(diào)。我相信調(diào)節(jié)結(jié)果會有另一部分的人出來說“啊,好深啊,”“啊,好亂啊,看不清內(nèi)容啦。”對于每一位用戶的意見都是應(yīng)該尊重的,當(dāng)然通過一定的方式大家就不會對這個(gè)結(jié)果有太大的異議,也許是習(xí)慣,也許是淡忘,也許是出現(xiàn)更加激動(dòng)的東西,也許還有其他什么我不知道的原因,但作為一名有良心的設(shè)計(jì)師,我決定對斑馬紋的設(shè)計(jì)做一個(gè)泛泛的了解。


斑馬你長的好奇怪啊。

  我是個(gè)務(wù)實(shí)的人,問題的關(guān)鍵點(diǎn)在于斑馬紋的兩個(gè)顏色之間的色值差異。所以文章也僅僅是對這做一分析。

  不同斑馬紋從內(nèi)容表達(dá)上都有他自身特定的含義。而從規(guī)整每一行的視覺角度出發(fā),斑馬紋和線條的分割是一個(gè)不錯(cuò)的選擇,如果兩者同時(shí)使用,未嘗不可,但兩個(gè)拳頭同時(shí)發(fā)力,總是看的費(fèi)力,用的也比較復(fù)雜。除非線條被用的很輕,好比兩拳同時(shí)出擊,其中一個(gè)虛晃一槍,僅為迷惑用,也其當(dāng)好處。但在一行之中又有多列的情況,線條形式的缺點(diǎn)就會暴露無遺,顯的條條框框局促不安,尤其在某些界面全屏的時(shí)候,內(nèi)容卻被用戶舍不得用去幾行,中國人省吃儉用的一面可見一斑。因此從視覺的簡潔上看來斑馬紋的深淺搭配是一種選。

  其實(shí)包括很多設(shè)計(jì)師在設(shè)計(jì)斑馬紋的時(shí)候,基本是自身的感覺,這個(gè)感覺是對整體色調(diào)和相關(guān)元素色調(diào)的分析后的主觀感受(包括我)。同時(shí)斑馬紋的兩種顏色基本是兩個(gè)調(diào)性一致,顏色相似的兩個(gè)顏色。但我認(rèn)為不管是何種顏色的為基點(diǎn)調(diào)節(jié)的斑馬紋,他們之間的明暗值都會在一定范圍值之間。范圍值小了,則斑馬紋模糊不清起不到應(yīng)有的作用,范圍值大了,則跨越太大從而干擾到用戶對內(nèi)容的閱讀。


如何把唐僧的白馬畫成斑馬

  尋找斑馬紋界面比較費(fèi)神,首先想尋找各個(gè)系統(tǒng)中的界面,其次尋找具有代表性的產(chǎn)品,因?yàn)樗麄兙哂邢鄬^高素質(zhì)的設(shè)計(jì)師,相對成熟的設(shè)計(jì)觀念,及相對完善的設(shè)計(jì)規(guī)范。

  發(fā)現(xiàn)微軟的產(chǎn)品是基本不使用斑馬紋的,一般通過感覺和用戶進(jìn)行神交。而win系統(tǒng)中的一些其他軟件的斑馬紋設(shè)計(jì)基本來源于對蘋果的參考,但是否遵循一定的原則,就不得而知了。而蘋果的界面一旦出現(xiàn)列表時(shí)就肯定使用分割,但表現(xiàn)的方式略有差異,大界面基本使用雙色斑馬紋,小屏幕基本使用線條分割,這和google設(shè)計(jì)的產(chǎn)品思路如出一轍。因此搜尋的案例基本集中在蘋果系統(tǒng)下的大屏幕界面。

  斑馬紋的深淺兩種顏色根據(jù)整體色調(diào)和界面色彩搭配的習(xí)慣性給出一個(gè)使用的建議:

  1.當(dāng)界面的主色調(diào)為淺色的時(shí)候,斑馬紋的淺色基本使用白色,斑馬紋的深色以界面主色調(diào)為基準(zhǔn)點(diǎn)保證色調(diào)的一致并進(jìn)行調(diào)整。(圖八左)

  2.當(dāng)界面的主色調(diào)為深色的時(shí)候,斑馬紋的深色基本使用主色調(diào)一致的顏色,斑馬紋的深色以界面主色調(diào)為基準(zhǔn)點(diǎn)保持色調(diào)的一致并進(jìn)行調(diào)整。(圖八右)

圖八:界面主色調(diào)影響下的斑馬紋色彩基本樣式

  那我們來分析下界面斑馬紋深淺兩種顏色的范圍值:

圖九:mac系統(tǒng)界面的斑馬紋顏色

  Mac系統(tǒng)中本身的界面都采用此種深淺顏色的搭配,無論內(nèi)容是否復(fù)雜,無論高度是否一致,在白色為基準(zhǔn)下,兩者之間的僅作純度的變化,相差7%的間隔。同時(shí)每一行的高度和內(nèi)容相對比較統(tǒng)一,但每一行有多列的現(xiàn)象。

圖十:mac系統(tǒng)軟件淺色界面的斑馬紋顏色一

  Mac系統(tǒng)中例如itunes的界面的斑馬紋,兩者顏色的差異小于系統(tǒng)自身的界面,純度相差3%,明度相差2%,兩者同時(shí)混合作用。同時(shí)每一行的高度和內(nèi)容相對比較統(tǒng)一,但每一行也有多列的現(xiàn)象。

圖十一:mac系統(tǒng)軟件淺色界面的斑馬紋顏色二

  Mac系統(tǒng)中的其他軟件界面中出現(xiàn)的斑馬紋分割,兩者都是小界面,皆是明度的變化,左圖顏色值的明度相差6%,且一行有多列現(xiàn)象,但列數(shù)相對大界面要少。中圖顏色值的明度相差2%,只有單列,每一行內(nèi)容相對集中。右圖顏色值明度相差7%,純度相差1%,每一行內(nèi)容比較內(nèi)容相對統(tǒng)一。

圖十二:mac系統(tǒng)軟件深色界面的斑馬紋顏色二

  Mac系統(tǒng)中斑馬紋在深色界面中的表現(xiàn),為imover與itunes為系統(tǒng)中的同類軟件。兩者的間隔顏色的差異小于系統(tǒng)自身的界面,純度相差3%,明度相差2%,他們的間隔方式和itunes一模一樣。每一行比較規(guī)整同樣有多列現(xiàn)象。

圖十三:Ipad app淺色界面的斑馬紋顏色

  Ipad上itunes播放器的界面,除了深淺顏色的分割,還增加了分割線的使用,兩者的間隔顏色所以比較的適中,純度相差1%,明度相差4%。每一行很內(nèi)容統(tǒng)一,且有多列形式,同時(shí)每一行之間的底圖空隙比較大。

圖十四:Ipad app灰色界面的斑馬紋顏色

  Ipad上nytimes的界面,除了深淺顏色的分割,同樣增加了分割線的形式,兩者的顏色相差也很適中,純度相差2%,明度相差2%。單行,每一行內(nèi)容很多,但內(nèi)容分布比較統(tǒng)一。

圖十五:斑馬紋延伸應(yīng)運(yùn)的顏色差異

  Iphone上的兩個(gè)特殊斑馬紋的應(yīng)用,在此不做比較,僅作參考。受限于單個(gè)底色的漸變形式,勢必會出現(xiàn)兩個(gè)內(nèi)容之間的線條分割,左圖每一行內(nèi)容比較統(tǒng)一,兩者顏色僅為明度變化相差8%。右圖的內(nèi)容和每一行高度并不是絕對的統(tǒng)一,兩者顏色比較平緩,純度相差3%,明度相差4%。

本文題目:談?wù)勗O(shè)計(jì):列表中間隔內(nèi)容的視覺設(shè)計(jì)
新聞來源:http://m.rwnh.cn/news18/165318.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、云服務(wù)器、外貿(mào)建站、建站公司網(wǎng)站策劃

廣告

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

外貿(mào)網(wǎng)站制作
雷波县| 巴林右旗| 毕节市| 堆龙德庆县| 赣榆县| 长治市| 崇义县| 鄂州市| 响水县| 武川县| 淄博市| 泰来县| 侯马市| 亳州市| 聂拉木县| 南充市| 固阳县| 新和县| 克拉玛依市| 曲水县| 深圳市| 陈巴尔虎旗| 青田县| 噶尔县| 贡山| 改则县| 永城市| 天柱县| 盐边县| 三台县| 泽州县| 平南县| 永平县| 永兴县| 运城市| 咸宁市| 望奎县| 浦县| 桓台县| 淅川县| 邻水|