技術(shù)資訊
專題類的網(wǎng)頁設(shè)計(jì)要點(diǎn)
2012-11-07 11:06:25
某些具體的事物組合在一起也可以表達(dá)一個明確的主題。
例如
這些素材組合在一起讓你聯(lián)想到了什么。
沒錯就是“圣誕節(jié)”。
例如下面這個例子:
優(yōu)秀的素材是設(shè)計(jì)稿的靈魂。
設(shè)計(jì)師將眾多素材合適的組合在了一起。即使不用一個文字,所有的素材也都在共同的訴說這一個主題——圣誕節(jié)
所以做專題的時候要注意選擇合適的素材:
來看看這個新年的專題。
這個頁面用的素材很多,但是再多的素材也都是一個調(diào)調(diào)。例如地面的積雪,遠(yuǎn)處的松樹,還有女孩手上的燈籠,質(zhì)感都是相近的。
如果這個時候頁面加進(jìn)來一個右下角那個圣誕老人呢?這個圣誕老人的質(zhì)感過于卡通,過于平面化,跟頁面的其他素材質(zhì)感嚴(yán)重不符。所以選素材的時候應(yīng)該回避這類素材。
再來看這個頁面。這個頁面中板凳,油漆桶文具都是很寫實(shí)的素材,在這個頁面里素材的質(zhì)感統(tǒng)一為寫實(shí)類。所以像下面那個卡通babe的素材是不適合的。
以CP設(shè)計(jì)的的這個奧運(yùn)專題為例分析專題設(shè)計(jì)中常遇到的一些問題。
這個頁面存在的問題很多,我們來一個個分析。
首先第一個問題首屏高度:
分析一下常見分辨率及瀏覽器下高度數(shù)據(jù):
在window XP常見分辨率1024×768下我們除掉任務(wù)欄,瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁首屏高度平均值是584。
Win7下是574。在window XP常見分辨率1440×900下我們除掉任務(wù)欄,瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁首屏高度平均值是716。Win7下是706。
綜合上面表中個分辨率及瀏覽器下的統(tǒng)計(jì)數(shù)據(jù),我們很容易畫出兩條首屏線,分別是580PX和710PX,對應(yīng)不同的分辨率。
再來看下不同分辨率用戶的占比情況:
通過對大于30W臺客戶端用戶進(jìn)行測試,得到的測試數(shù)據(jù)如下:
- 首屏高度低于等于 580 的有 116786 個人,占 44.64%;
- 首屏高度低于等于 720 的有 216227 個人,占 82.64%;
- 首屏高度低于等于 800 的有 241420 個人,占 92.27%;
- 首屏高度低于等于 900 的有 259174 個人,占 99.06%;
即當(dāng)首屏高度大于580時有44.64的人看不到;大于720時有82.64%的人看不到;
大于800時有92.27%的人看不到。
我們將這個數(shù)據(jù)轉(zhuǎn)化成3條線直觀的顯示在專題頁面上:
總結(jié)起來就是注意首屏高度。
建議將最主要的信息顯示在580PX高度的范圍以內(nèi) 讓用戶打開網(wǎng)頁第一屏就可以直接看到不用向下滾動
這個第二個專題的第二個問題:標(biāo)題夠顯眼么?
檢驗(yàn)一個專題頭圖標(biāo)題是否夠顯眼其中的一個方法就是將網(wǎng)頁去色,站在遠(yuǎn)處看看標(biāo)題是否還看得清。
我們有這個方法來檢驗(yàn)一下這個專題:
是不是就可以看出頭圖文字跟背景混在一起不夠清晰。
我們再來看一下正面的例子。
專題的主文字傳達(dá)的是頁面最主要信息,需要足夠醒目,所以要有整個頁面最大的對比度
去色檢驗(yàn)后的效果。
去色后主文字總是有最大的明暗對比,并且最主要信息始終保持在第一屏內(nèi)顯示完全.
正面例子二:
深色的底上面可以選用淺色亮色的文字, 反之,淺色的底上可以選用深色的文字以獲得最大的對比
去色后title總是有最大的明暗對比,并且最主要信息始終保持在第一屏內(nèi)顯示完全
總結(jié)上面說的注意的第二點(diǎn):
Title是頁面的視覺焦點(diǎn)要足夠顯眼
大?。褐鞔萎嬅鎸Ρ龋苊馔w平均 明暗:看看去色后設(shè)計(jì)稿的樣子是否還足夠顯眼。
再來看看看奧運(yùn)專題設(shè)計(jì)稿的第三個問題:
他們的光環(huán)境一致么?
最左邊張學(xué)友臉色發(fā)白皮膚呈棕色。左邊第二個莫文蔚應(yīng)該是在室內(nèi)拍的照片,皮膚呈暖色光源在頂部。中間的王力宏光源在右側(cè),并且用交明顯的陰影,猜測在室外拍的照片。右邊第二個張靚穎她的照片光源在左側(cè)暖色調(diào)。最右邊變林宥嘉照片光源在左側(cè)。
五個人有五種不同的光照效果,光環(huán)境在這個頁面很混亂。
來對比看看正面的例子:
作者把幾個人物素材的光環(huán)境調(diào)整到了一致。就好像他們本身就是站在一起一樣。
再看這個游戲?qū)n}的例子。
在頁面中人物左側(cè)的黃色高光部分跟頁面左上角撒下的光輝對應(yīng),造成真實(shí)的融入感
光運(yùn)用的實(shí)際例子
原圖是張很普通的照片,由于逆光臉部偏暗。于是給他疊加了三個圖層。一個頂部的白光提亮整體。左側(cè)的藍(lán)光和右側(cè)的紅光,讓人物與背景更加融合。調(diào)整了光的頁面整體效果好了很多。
總結(jié)第三點(diǎn)就是掌控你頁面里的光。
色溫色調(diào):所有素材(色彩)都會被周圍環(huán)境光影響,用的時候注意調(diào)整統(tǒng)一。 光照:注意主光源(環(huán)境光)的類型,位置。契合頁面環(huán)境。
再看這個頁面的第四個問題,摳圖有毛邊。
不論你頁面設(shè)計(jì)的多么有創(chuàng)意多么好,一旦摳圖不干凈,有毛邊頁面檔次一下就下去了。
猜測設(shè)計(jì)人員做的時候應(yīng)該是用的魔術(shù)棒摳圖的。魔術(shù)棒雖然好用摳圖很快,但是魔術(shù)棒摳出來的容易留下毛邊。
摳圖方法很多,各人有各人的習(xí)慣。在這里分享一下我自己的摳圖方法。不一定是最快的,但是這個方法摳出來的還算干凈。
我習(xí)慣用橡皮擦工具摳圖。
用橡皮擦擦除的邊緣,沒有鋸齒有半透明的過渡
在擦除時候的一些小技巧。
擦除的時候可以放大畫布,調(diào)整合適的畫筆大小。
按住shift可以擦連續(xù)的區(qū)域。
對于對于凹進(jìn)去不好擦的區(qū)域可以借助快速蒙板來擦除。
例如王力宏肘那里。
點(diǎn)快速蒙版,進(jìn)入快速蒙版的的編輯模式。選擇“所選區(qū)域”
然后用畫筆在需要擦除的區(qū)域涂抹,再用橡皮擦擦除多余的部分退出快速蒙版,剩下的紅色部分就能生成一個選區(qū)。最后點(diǎn)刪除就能得到需要擦除的圖。
有時候需要給人物扣頭發(fā),很頭疼。這里順便分享一下如何摳頭發(fā)
拿年輕時候的乖乖虎蘇有朋的照片做例子。
復(fù)制一個圖層,然后選擇–色彩范圍,選頭發(fā)的黑色顏色容差調(diào)到150左右。點(diǎn)確定
然后反選刪除。就能夠得到這樣一個頭發(fā)的圖層。
用橡皮擦擦掉圖層1的頭發(fā)部分。合并兩個圖層。人物的頭發(fā)就摳出來了。
總結(jié)下這部分的所說的內(nèi)容:
摳圖拒絕毛邊
橡皮擦摳圖:按住SHIFT可以擦一條直線的區(qū)域,配合快速蒙版擦角落
摳頭發(fā):巧妙利用選擇色彩范圍摳頭發(fā)。
再來看這個專題,這個專題問題很多但是最突出的問題還是“亂”。內(nèi)容多,而且沒有條理,不知道該看哪里,不知道什么才是這個頁面的重點(diǎn)。
再看看正面的例子,對個頁面條理重新梳理后調(diào)整的頁面。
同樣的內(nèi)容,梳理后的頁面條理會清楚很多,頁面內(nèi)容有正確的視覺引導(dǎo)更有主次,用戶能更容易的“掃描”頁面的信息。
最后我們再來看舌尖上的中國這個專題:
這個專題最突出的問題是素材的選材不當(dāng)。
分析下這個頁面的選材。木板、紙張、云、以及食物對主題氛圍的烘托也顯得有些不足。
并且木板和木板上的碗給人的感覺是俯視,但是云給人的感覺是仰視天空的感覺。兩者放在一起很沖突。
那么接下來我們就說下做專題時候怎樣選擇合適的素材。
以“舌尖上的中國”為例:
我們先將“舌尖上的中國”提取關(guān)鍵字“舌尖”、“中國”。舌尖讓我們聯(lián)想到什么呢?有美食、餐具、,等等。中國讓我們聯(lián)想到什么呢?功夫、水墨、剪紙、龍、國畫,等等。
像這樣就可以把一個抽象的概念逐級具體化,然后從具體化的事物中選擇合適的作為你需要的素材,來表達(dá)抽象的概念。
這是舌尖上的中國的節(jié)目的片頭截圖,是不是應(yīng)正了之前的分析,水墨、食物、國畫、餐具。
總結(jié)前面說的:
選擇合適的素材
優(yōu)秀的素材是靈魂,平庸的素材只是裝飾
- 找素材要保證素材能對表達(dá)的氛圍有幫助能恰當(dāng)表意;
- 要保證頁面上的素材風(fēng)格一致,都是一個調(diào)調(diào);
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-07-02 11:53:00] 從網(wǎng)頁設(shè)計(jì)到UI設(shè)計(jì)—重在設(shè)計(jì)理念的轉(zhuǎn)變
- [2008-11-01 09:36:00] (翻譯)用擴(kuò)展卡片分類技術(shù)獲悉網(wǎng)站架構(gòu)設(shè)計(jì)1
- [2011-09-10 23:12:11] 青島網(wǎng)站制作哪家好?
- [2012-08-20 12:29:56] 網(wǎng)站的表單設(shè)計(jì)要點(diǎn)
- [2011-11-13 11:03:19] 如何讓搜索引擎收錄更多的內(nèi)容頁
- [2009-02-08 10:16:00] [譯]在線廣告及其在網(wǎng)頁設(shè)計(jì)中的重要性
- [2012-02-21 22:36:55] 反饋表單的輸入優(yōu)化
- [2008-12-15 21:39:00] 為什么網(wǎng)頁設(shè)計(jì)不應(yīng)強(qiáng)調(diào)分工1
- [2012-11-07 11:24:02] 網(wǎng)頁設(shè)計(jì)元素的減法式優(yōu)化
- [2008-10-15 15:43:00] 探索網(wǎng)頁設(shè)計(jì)中的黃金比例
- [2013-12-27 00:18:02] 那些即將在網(wǎng)頁設(shè)計(jì)中被淘汰的效果
- [2014-12-01 09:19:17] 網(wǎng)頁設(shè)計(jì)的關(guān)鍵所在
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
企業(yè)網(wǎng)站 良好的導(dǎo)航 插畫 青島網(wǎng)站SEO robots 營銷型網(wǎng)站建設(shè) 膠南網(wǎng)站建設(shè)公司 青島SEO 網(wǎng)站優(yōu)化 色彩心理學(xué) 青島網(wǎng)站設(shè)計(jì)哪家好 網(wǎng)站SEO 青島海洋投資集團(tuán) 青島網(wǎng)站案例 網(wǎng)頁設(shè)計(jì) 搜索引擎蜘蛛 青島flash網(wǎng)站 css 青島高端網(wǎng)站建設(shè) 企業(yè)網(wǎng)站為什么要備案 搜索引擎 手機(jī)網(wǎng)站 版面布局 輪胎網(wǎng)站設(shè)計(jì) 青島輪胎網(wǎng)站設(shè)計(jì) 外貿(mào)網(wǎng)站設(shè)計(jì) 青島抖音小程序開發(fā) 微信營銷的優(yōu)勢 網(wǎng)站規(guī)劃 IT資訊