2022-06-13 分類: 網(wǎng)站建設(shè)
“所謂設(shè)計(jì),指的是把一種計(jì)劃、規(guī)劃、設(shè)想、問題解決的方法,通過視覺的方式傳到出來的活動(dòng)過程?!?br />設(shè)計(jì)是一個(gè)有意識(shí)的計(jì)劃、規(guī)劃信息的活動(dòng)。從這個(gè)角度來說,制定并執(zhí)行規(guī)范過程本身就是設(shè)計(jì)。
迷你屋商城視覺規(guī)范在之前大量的視覺設(shè)計(jì)基礎(chǔ)上加以整理、提煉出6類,共13項(xiàng)基本界面元素。商城中的所有頁面都嚴(yán)格的依據(jù)視覺規(guī)范進(jìn)行設(shè)計(jì)。下面簡要介紹一下迷你屋商城視覺規(guī)范的具體內(nèi)容:
文字顏色
文字顏色定義了三種,分別是:突出色,正文顏色和輔助色。
突出色是頁面上的最搶眼的顏色;正文顏色,無需多解釋;注釋、說明之類不需要太讓用戶留意的文字使用輔助色。
一個(gè)網(wǎng)站的文字顏色總體上可以按上面這三種劃分,當(dāng)然不一定只有三個(gè)文字顏色。單純的來看文字顏色,并沒有太多的問題。但文字顏色與鏈接樣式;文字顏色與頁面背景顏色這兩個(gè)問題就比較復(fù)雜了。這些問題將在下面分別討論。
鏈接
鏈接最傳統(tǒng)的表現(xiàn)手段是:藍(lán)色+下劃線。但是由于這兩個(gè)表現(xiàn)手段明顯的缺陷,多數(shù)時(shí)候難于應(yīng)用。
從上面這個(gè)最傳統(tǒng)的表現(xiàn)還可以演化出很多種鏈接的表現(xiàn)手段:
1. 鏈接文字只用藍(lán)色。鏈接文字默認(rèn)狀態(tài)時(shí),只顯示為藍(lán)色,鼠標(biāo)經(jīng)過時(shí)再出現(xiàn)下劃線或者反色。Yahoo.com flickr都使用的是這樣的方式。這種表現(xiàn)的缺陷:網(wǎng)頁上多數(shù)文字是有鏈接的,于是頁面上多數(shù)文字都是藍(lán)色的了,視覺表現(xiàn)可發(fā)揮的空間比較小。
2. 鏈接文字只加下劃線。有下劃線的文字是可以點(diǎn)擊的,這是足夠清楚的表現(xiàn)了。這種表現(xiàn)的缺陷:很多鏈接的時(shí)候,就會(huì)是滿頁都是下劃線了。同樣是讓視覺表現(xiàn)比較痛苦。
3. 列表文字默認(rèn)不加下劃線;分散出現(xiàn)的鏈接有下劃線。Qzone就是應(yīng)用的這種。缺陷:在一個(gè)頁面中同時(shí)出現(xiàn)這兩種情況,和列表中的鏈接相比,分散出現(xiàn)的鏈接加了下劃線,顯得更為強(qiáng)眼,更明確的傳達(dá)出“可點(diǎn)擊”的信息。而分散的鏈接并不總是要強(qiáng)調(diào)的。所以需要再用其他方式補(bǔ)救,必要的時(shí)候讓列表突出。Gmail中有比較不錯(cuò)的方式。
鏈接的表現(xiàn)方式也許還有更多,但無論是什么樣的表現(xiàn),都需要確保一個(gè)基本原則:操作前操作可識(shí)別,即,直接瀏覽頁面就可以知道哪些文字是可以點(diǎn)擊的。
迷你屋商城頁面中主要是圖片的展示,文字相對較少,很少在一頁中大量出現(xiàn)鏈接,因此采用了第二種方式:鏈接文字只加下劃線。
第二種表現(xiàn)方式鏈接的表現(xiàn)并不涉及顏色,任何顏色的文字都可以加鏈接。之前我們也規(guī)定好了不同類型的文字使用的顏色。這樣的組合規(guī)范自由度較大。文字的顏色取決于它的重要程度。非常重要的用紫紅色,非常次要的用灰色(輔助色)。有鏈接則加下劃線。不存在“鏈接文字需要強(qiáng)調(diào),但又不得不用鏈接文字的固定顏色”的問題。
背景色
背景色也是一個(gè)應(yīng)該與文字顏色一起考慮的元素。迷你屋商城視覺規(guī)范中定義的背景色,除了白色背景,另外主要還有兩種:輔助的淺灰色和主色彩-橙色。
淺灰色是用于區(qū)隔內(nèi)容,內(nèi)容表達(dá)上并不總是能用邊線來區(qū)隔的,那么可以使用這個(gè)淺灰色作為背景加以區(qū)隔。
主色調(diào)的背景下會(huì)出現(xiàn)各種文字,強(qiáng)調(diào)色的文字、正文文字、鏈接,甚至是輔助文字。因此需要背景色能適應(yīng)上面所說的種種文字。
主色彩上的文字有可能會(huì)出現(xiàn)強(qiáng)調(diào)色文字,所以,主色彩和強(qiáng)調(diào)色文字不能是同一個(gè)顏色。主色彩上會(huì)顯示鏈接,如果鏈接選用了藍(lán)色文字顏色的方案,主色彩最好不選用藍(lán)色,在藍(lán)色背景下顯示藍(lán)色的鏈接,效果不好,如上圖。
迷你屋選用了橙色。選用橙色是出于產(chǎn)品內(nèi)涵的考慮,因?yàn)槊阅阄菔且粋€(gè)結(jié)合Qzone與QQ秀的產(chǎn)品,在黃與紅之前。但是,作為主色彩,橙色并不是最好的選擇,橙色比較搶眼、亮,頁面上需要突出的是強(qiáng)調(diào)色的文字和突出的按鈕,而不是主色彩。主色彩并不宜過亮。在橙色的基礎(chǔ)上再選擇更亮的顏色作為突出的文字顏色,我們選擇了紫紅。
網(wǎng)站欄目:大量的視覺設(shè)計(jì)基礎(chǔ)設(shè)計(jì)出迷你屋商城視覺規(guī)范
轉(zhuǎn)載來于:http://m.rwnh.cn/news34/166784.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站改版、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(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)
猜你還喜歡下面的內(nèi)容