技術資訊
網站設計之設計步驟及思考
2008-03-20 11:07:00
與之前的步驟不同,這是實際操作的步驟.本文包括了大局的步驟和欄目,圖片,小到一個圖標的選取等等等等,可能會漏掉很多的東西.歡迎補充.我只是引導你去思考,本章絕對不是網頁的標準制作步驟,我相信也沒有什么標準的制作步驟.
本章的設計步驟是建立在 網頁設計進階之一 (步驟和大局觀) 之上的.可能會涉及一些平面相關的知識.和網頁與平面的比較.網頁與平面的區(qū)別我會在以后在寫.
本章所講的基于PHOTOSHOP軟件制作.
本章印證了網頁90%是排版這句話.
遵循從整體到局部的順序.
1、在定位的基礎上,搞明白自己要做什么.
這句其實不用解釋了.你要明白的是我要做的站大概有什么樣的效果,并有例子在腦海里浮現(xiàn).要做的這個站屬于什么樣的行業(yè),這個行業(yè)的站都有什么共同的特點.
2、你的目標/效果和你希望達到的目標/效果是怎么樣的.你設計的目標,與客戶的目標和公司領導的目標是否一致,有什么區(qū)別.
3、你要如何去做,怎樣去做,用什么樣的手法手段,來達到你的目標/效果.又用怎樣的設計來強化和突出這個效果.
4、你的布局,應該怎樣和你的設計搭配,怎樣來突出你的思路.
5、是否有不同的風格,是否只是顏色上的變換.(將所有含有顏色的背景層保留)
這幾步,是在動手之前要寫下來的.甚至有更詳細的功能和版面的東西,自己搞定吧.
下面才是真正的動手設計的步驟:
1、確定分辨率.和不同分辨下對應的效果.
與平面的載體的不同,決定了網頁具有比平面更靈活的表達方式.
站點的滿屏概念其實是分相對和絕對兩種,相對的,是針對當前分辨率的滿屏.而絕對滿屏幕,則是不同的顯示器不同的分辨率下都是滿屏,一般我會給出一個最小分辨率,最大到無限.相對滿屏,比如1024×768,800×600等.最好是用絕對寬度來定義,就是像素為單位.而絕對滿屏,則用百分比.
在確定分辨率之后,你的PS圖要比實際設計的圖要大.要考慮用戶使用高于你設計的分辨率下,網頁以怎樣的形式表達,是居左,還是居中,還是靠在右邊.
2、大背景,3條輔助線及邊界處理.結構(頭部,中間,底部的大概位置.)
整體是否有背景.
左邊界線,右邊界線,和中間線.
如果是絕對寬度的設計,那么用戶使用較高分辨率瀏覽時,內容與多出的屏幕是否有分割.
結構,究竟是上中下結構,還是左中右結構,還是其他的.每一塊,大概放什么內容.
3、導航和標志.
網站的100-1%是導航.這是一句被傳爛了的話.
你的導航是長的還是短的,是橫的還是豎的.還是弧形的.是否有下拉菜單.比重各是多少.和標志處在什么位置.各語言版面入口在哪里.登陸(后臺管理/用戶/MAIL)在什么位置,標志附近是否有點睛一般的廣告詞.
好了,我們進行下一步.
4、banner同導航,和過度.
導航跟banner是分開的還是在一起的.在一起的話你是否采用flash制作,如不用flash制作,你設計的背景是否適合切割成平鋪的背景,怎樣讓背景圖片體積最小.記住不要用2×2的背景做平鋪.banner是占據了整個寬度,還是只是一部分.如果是一部分,那么空出的地方你準備放什么東西.
5、主體內容部分.
我的中間是左右機構,還是一大塊,還是左中右結構的.每一塊的分割采用什么手法.顏色以怎么樣的規(guī)則變化.然后將內容填充進去.
6、底部版權信息及其他.
7、不同的風格的調整.
基本是這些.我理不清頭緒,寫出來的這些自己基本都不滿意,但總可以讓自己規(guī)避很多的問題吧.
關于圖片和小圖標的選擇:
圖片選擇遵循以下幾點要素:
- 必須有一個鮮明的主題.
- 圖片盡量有懸念.
- 突出的內容只有一個(圖片突出的內容只有一個,版面也一樣)
- 從目標對象或目標服務對象來考慮圖片的選擇.
- 要善于從做背景.
- 新手盡量大面積留白.
- 新手慎用弧.
圖標選擇注意要素:
- 圖標表達意思與title相適應
- 同色系或統(tǒng)一風格.
- 學會突破(圖標不受title的背景限制)
- 圖標大小要特別注意.
- 善用圓角.(與弧不同)
- 要便于記憶.
- 盡量避免重復(純裝飾除外,重復刺激效果的除外)
我要吐血了...........有必要闡述一下整體和局部的關系...但是還是放在以后吧.
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網品牌數字化
- [2023-05-06 10:32:26] 青島網站建設公司,高端網站定制,一站式網站服務——力圖數字科技
- [2023-04-27 13:47:54] 高端定制網站建設——從滿足預期到走向卓越
- [2023-04-11 09:17:49] H5頁面設計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數字科技配套網站服務支持
- [2021-05-18 10:14:11] 青島網站建設的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網建設項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網站建設最容易忽略的人性化設計
- [2020-12-16 16:55:32] 建設一個常規(guī)的公司網站建設成本大概是多少?
延伸閱讀
- [2011-11-07 22:35:37] 細節(jié)處理讓網頁設計與眾不同
- [2014-12-02 23:16:32] 新老網站被百度K站后的原因分析與解決辦法
- [2014-12-10 09:47:11] 網站SEO優(yōu)化的最新趨勢與理論
- [2008-08-27 17:17:00] 迭代的設計
- [2009-03-26 07:58:00] 網站設計的書
- [2011-10-27 14:11:28] 網站內容如何做到偽原創(chuàng)
- [2015-09-22 12:26:04] 微信為什么這么人在用
- [2015-02-12 10:29:31] 不對稱網頁設計頁面處理
- [2013-03-01 17:03:29] 如何通過網頁廣告來賺錢
- [2011-10-21 15:02:35] 青島網站設計成功要素
- [2012-02-09 23:48:14] 如何讓百度快速的收錄網站
- [2014-12-06 01:06:15] 最新的網站優(yōu)化原則和方法