技術(shù)資訊
網(wǎng)站的視覺設(shè)計十八條
2008-08-15 11:59:00
自己從工藝品設(shè)計到平面設(shè)計到網(wǎng)絡(luò)設(shè)計,雖然設(shè)計原則不離其宗,但經(jīng)驗下來的心得告訴自己,設(shè)計媒介的變化帶來很多媒介自身的特殊性,下面總結(jié)下網(wǎng)站視覺設(shè)計的一些要點(diǎn),有他人經(jīng)驗,也有自己的心得:
1—logo:
基本logo特征,符合logo設(shè)計基礎(chǔ)(平面設(shè)計通用)顯示器效果:清晰度,最小尺寸(因顯示器分辨率而帶來的,等同線下平面設(shè)計的印刷效果)
2—文字:
內(nèi)容等級決定字體、字號大小、粗細(xì);狀態(tài)決定顏色(默認(rèn)或者根據(jù)網(wǎng)站特殊統(tǒng)一)
3—廣告、內(nèi)容圖片:
尺寸樣式的定位,同一頁面的和諧性,圖片的優(yōu)化,位置的節(jié)奏,大小對比。
4—icon:
品牌性,表達(dá)準(zhǔn)確合理,設(shè)計手法(依據(jù)品牌性),一致性,作用:吸引,醒目,方便識別、理解、操作、記憶。
5—可點(diǎn)擊(button):
區(qū)別(不可點(diǎn)擊),根據(jù)人的生活經(jīng)驗:厚度,可按,質(zhì)感(實體聯(lián)想),色彩(品牌性、統(tǒng)一性、對比性);統(tǒng)一的樣式大小(依據(jù)里面文字的內(nèi)邊距統(tǒng)一)
6—背景圖片:
氛圍效果營造,同產(chǎn)品的統(tǒng)一性,優(yōu)化(品質(zhì)大小,色彩信息,實現(xiàn)方案),
7—圖文排版:
主圖次文,圖文節(jié)奏,空隙,模塊化。
8—當(dāng)前狀態(tài):
放大(形狀),變色(反色、對比色、明度純度區(qū)別色),鏈進(jìn)鏈出后指定內(nèi)容提示。
9—交互控件:
樣式合理準(zhǔn)確性(人對系統(tǒng)默認(rèn)的認(rèn)知和生活常規(guī)認(rèn)知),狀態(tài)(視覺表現(xiàn)樣式和動作過程優(yōu)化),創(chuàng)意。
10—loading:
內(nèi)容關(guān)聯(lián)性(loading前后的內(nèi)容關(guān)聯(lián)),無聊等待的樂趣,體積、面積優(yōu)化,創(chuàng)意。
11—用戶反饋_ 成功、出錯、提示、無結(jié)果:
文案(明確、合理、人性化、創(chuàng)意),圖形(明確、醒目、色彩的心理認(rèn)知準(zhǔn)確度)。
12—動畫效果:
過程合理(模擬真實環(huán)境的合理化),連續(xù),節(jié)奏感,用戶日常動作表現(xiàn),音效配合,創(chuàng)意。
13—首尾設(shè)計:
首(品牌宣傳、自身特點(diǎn)、明確內(nèi)容、氣氛表達(dá)、創(chuàng)意。尾:呼應(yīng)、節(jié)奏(與首),創(chuàng)意。
14—適應(yīng)屏設(shè)計(全屏設(shè)計):
最大最小屏幕的考慮(文字、圖片的位置、折行效果)
15—固定尺寸的柵格設(shè)計:
合理的單元格(考慮黃金分割),單元格面積節(jié)奏,邊距統(tǒng)一性
16—demo設(shè)計樣稿:
對內(nèi)容最多最少的考慮。
17—頁面:
品牌性,基調(diào)元素一致性,復(fù)用性,節(jié)奏感、面積感,視覺第一吸引,引導(dǎo)瀏覽,點(diǎn)線面關(guān)系,素描原理(運(yùn)用素描的基本規(guī)律來做頁面)。
18—閱讀:
背景對閱讀(視力)的舒適度,內(nèi)容與背景的對比舒適度。
其實還有很多設(shè)計的點(diǎn)比如交互設(shè)計,比如代碼設(shè)計,我們可以展示給用戶看到的這些綜上所述,構(gòu)成了用戶體驗設(shè)計的一個大過程,自己在做的很多時候其實也不是都能估計到每個點(diǎn)的,總結(jié)出來以幫助隨時審視!
原文:http://ued.taobao.com/blog/2008/08/14/%E7%BD%91%E7%AB%99%E7%9A%84%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1/
近期更新
- [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è)計開發(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è)項目
- [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è)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-12-23 08:52:00] 遠(yuǎn)觀頁面評估視覺設(shè)計
- [2009-02-16 22:27:00] 視覺設(shè)計時不應(yīng)產(chǎn)生新信息
- [2008-11-17 22:20:00] 簡談衡量界面視覺設(shè)計的方法
- [2008-12-03 08:50:00] 視覺設(shè)計師扛起UE大旗?
- [2008-12-24 08:55:00] 一名視覺設(shè)計師對于網(wǎng)站設(shè)計的思考
- [2009-03-27 09:03:00] 淺談購物類網(wǎng)站如何保持視覺設(shè)計的一致性
- [2008-04-14 15:47:00] 網(wǎng)站中文字的視覺設(shè)計
- [2013-01-08 08:45:07] 視覺設(shè)計在網(wǎng)站制作上的應(yīng)用
- [2008-09-01 11:43:00] 交互設(shè)計與視覺設(shè)計哪個更重要?
- [2012-02-27 14:25:24] 網(wǎng)頁的視覺設(shè)計要點(diǎn)
- [2008-09-02 12:02:00] 現(xiàn)實與浪漫
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
扁平化設(shè)計 SEO 頁面設(shè)計 圖形網(wǎng)格 SEO優(yōu)化 視覺靈感 robots 建站常識 營銷策略 程序開發(fā) css 交互設(shè)計 互聯(lián)網(wǎng) H5 網(wǎng)站品牌 青島網(wǎng)站SEO 微信小程序 高端輪胎網(wǎng)站設(shè)計 html和css 青島網(wǎng)站建設(shè)基礎(chǔ)知識 青島開發(fā)區(qū)建站公司 網(wǎng)站策劃 平面設(shè)計 網(wǎng)站交互設(shè)計 青島高端網(wǎng)站建設(shè)公司哪家好 青島海洋投資集團(tuán) 網(wǎng)站的速度 網(wǎng)站推廣 網(wǎng)站優(yōu)化 微官網(wǎng)帶來的好處