頁面設計網站-如何設計網站
壹、網站結構設計
網站結構設計包含網站欄目設計和網站模塊設計以來確定網站提供服務的壹種邏輯表現形式,也是網頁之間的層次關系。
1.網站欄目能起到提綱挈領額作用
2.網站欄目具有清晰導航的功能
3.網站模塊要做到順序清晰且緊密結合
二、網站主題設計
網站主題設計實際就是網站視覺呈現風格的設計。網站的主題風格要能充分吸引用戶的註意力,為用戶提供愉快的訪問體驗。
1.設計能反映網站內容的logo,並且將logo放在網站的醒目位置。
2.網站的顏色要統壹,要突出網站的主調色彩。
3.相同類型的圖像要有相同的效果。
4.網站要有壹句明晰的宣傳標語。
三、網站布局類型
1.國字型布局
這種布局類型分為上邊欄、左邊欄、中間內容區、右邊欄和底部的頁腳區域,其形狀酷似壹個“國”字。國字型結構是目前比較常用的壹個網頁布局結構,它適用於信息分類繁多、需要良好組織的網站。
2.T字型布局
這種布局類型由上邊欄、左邊欄、內容區、下邊欄組成,其形狀有點像壹個英文字母寫的“T”字。T字型結構網站目前在壹些權威機構、企事業單位的公司網站出現得比較多。
3.左右框架型布局
這類網站主要由左邊欄和內容區組成,組成比較簡潔,主要用於精彩內容的呈現,主要是很多個人站點、博客的首選。
4.上下框架型布局
這類網站由上下邊欄組成,上邊欄用來放置logo和鏈接等信息,下邊欄用來放置網頁的內容。上下型網站經常用來進行個性化展示,在企業門戶網站的公司展示中也比較常用。
5.標題正文型布局
這類網站的布局結構由上邊欄和內容區組成,上邊欄用於顯示文章的標題。主要用於顯示文章的標題,內容區放置文章的內容,這類布局在壹些論文、學術網站的設計中比較常用。
網站設計都不會單獨使用以上列出的某壹種布局結構,而是通過混合使用多種布局結構來實現自己想要的效果,這類布局通常稱為“綜合性布局”。
四、網站頁面設計
網站頁面是網站的最終表現形式。網站頁面由頁面內容的質量度和頁面的美觀度來決定。頁面設計應該遵循的原則如下:
1.符合企業的行業屬性和企業特點。客戶打開網站能直觀感受企業所傳遞的理念和特征。
2.符合用戶的瀏覽習慣。根據網站內容的重要性進行排序,讓用戶花最短的時間能夠找到自己需要的信息。
3.符合用戶的使用習慣。將用戶經常使用的功能放在網站的醒目位置。
4.圖文搭配。
5.利於搜索引擎優化。減少圖片和動畫,多使用文字描述,以便於搜索引擎收錄,讓客戶更容易找到妳。格子網絡解答。
如何設計網站目錄方法1:3個基本規則1、規則1:傾聽妳的客戶。2、規則2:了解妳的用戶正在尋找什麽,並進行相應的設計。3、規則3:傾聽自己。方法2:方針1、踐行良好的用戶界面設計。2、建立壹致的風格。3、使可讀性最大化。4、使妳的網站具有普遍的可讀性。5、測試妳的網站。6、發布您的網站。設計壹個優秀的網站可能看起來像壹個巨大的挑戰,但只要遵循設計的基本要素,妳就會發現這個過程很有趣而且令人愉快。這不僅僅是聽起來很好!我們將會說明進行設計的基本要素和壹些壹般性的指導方針,以幫助妳設計有用戶粘性的網站。
方法1:3個基本規則
1、規則1:傾聽妳的客戶。妳可以設計壹個“有史以來世界上最好的網站”,具有豐富的黑色精細字體、大膽的有藝術色彩的網站,仿佛在召喚“現在就來瀏覽我吧!”。很不幸,妳的客戶想要的卻是具有大塊粉色和橙色這種風格的菜單條。妳被解雇了,妳有史以來最好的網站,再也沒有機會面對用戶,客戶會把它們擱置在他們的備份硬盤裏。研究客戶的企業形象。有客戶會告訴妳壹些他們真正喜歡的網站。這不僅會提示妳迎合他們的想法,它也會給妳壹些自己未想到的設計靈感。
如果妳以為橙色和粉色的網站是在開玩笑,試想壹下這個有史以來最酷的網站如何推動它們的產品:
2、規則2:了解妳的用戶正在尋找什麽,並進行相應的設計。人們建立自己網站的原因是希望其他人看到他們。這個網站可能用來提供信息,有商業用途,或者供特定受眾娛樂。作為設計師,妳要知道在為誰設計網站,並讓他們打開妳的網站後就壹直待在上面。妳可能會認為,“如果網站看起來很漂亮,用戶就會留下來。”,其實這不壹定。讓我們看看房地產的例子。這裏是壹個網站,具有整潔,有趣的設計。它有大量的開放式的白色空間,大膽的色彩和壹個強烈現代感的寬屏格式,超鏈也被突出顯示了:
現在想想如果用這種做法在同壹位置銷售不動產的效果:頁面淩亂,花哨的顏色,大量的廣告。
想壹想哪個網站可以更好地為人們尋找家園呢?沒錯,就是把“家”羅列出來供人瀏覽的那個!當人們正在搜索“聖莫尼卡待售房產”時,他們並不關心網站的美學。他們不想了解房地產經紀人,或是看到漂亮的城市景色圖片。他們想看的就是房產。
3、規則3:傾聽自己。妳了解客戶喜歡什麽,妳知道市場需要什麽。現在是時候關註妳自己,網站的設計者!就妳的選擇在繪圖軟件中建立壹個模板。在不同的層(這樣做可以後續再修改而不破壞整體的模板)上創建頁面元素。這些因素可能包括:頁頭。它將在網站的每個頁面上***用。組成頁頭的包括網站的名稱和標誌,以及到其他下級網頁(比如關於、聯系人等)的鏈接。不管是視覺上還是實際操作,頁頭都會把網站的各部分整合起來。把菜單欄上的第壹個按鈕設置為返回主頁也是很好的做法。
讓我們來看看蘋果公司的網站,如下:
與大多數蘋果產品壹樣,他們的首頁設計得非常幹凈、整潔。註意橫穿網頁頂部的菜單欄,每個按鈕都有與內容相符的標題,還有壹個搜索框,如果妳的網站也支持,就能很友好地到達各個所需的網頁。現在,讓我們來看看iPad按鈕對應的頁面,有幾個頁面元素:
菜單欄的變化只是將iPad按鈕變暗。
頁面的主題在左上角以黑色大字體顯示。
出現了壹個新的子菜單欄,這樣使用戶可以了解更多關於產品的信息。如果點擊那些子菜單,妳會看到每壹頁都會提供新的主題相關的內容,但在布局和設計風格上都是統壹的。
可能妳的網站上,會有菜單欄主標題下包含多級子標題的情況。妳可以考慮不用二級菜單欄,而使用彈出菜單的方式,例如下面這個音樂家之友網站:
邊欄。這種設計在網站上很常見,但不壹定所有網站都需要,記住--內容為王。但它也是壹個非常重要的元素,需要精心設計,以保證直觀,避免不必要的混亂。不像菜單欄,邊欄的內容可以是動態的。考慮下面兩個邊欄,它們來自房地產營銷網站Trulia,首先是給買家的:
第二個是給租客的。請註意它們有非常類似的信息,但是關註點完全不同,並且這些關註點都顯示在邊欄的相同位置:
頁面主體。這是網站的主要部分,也是妳的設計中變化最多的部分。如果妳正在設計壹個電子商務網站,可能某個頁面上會進行產品的展示,還有二十個待售項。妳的工作是把這兩部分整合在壹起,使他們不顯得雜亂。妳可以使用相似的顏色,字體和界面元素把它們融合在壹起。
頁腳。這部分並非每個網站都有或需要。它經常用來整理雜項,或是集中網站中非焦點的部分以供訪問。如下是壹個來自Groupon網站的例子:
方法2:方針
1、踐行良好的用戶界面設計。定位網站的各種元素,如標題,邊欄,標誌,圖形和文字,把它們放置在每壹頁的同壹個位置上,這樣會讓妳的網站很直觀且導航性良好。在每壹頁的頂部保持相同的頁頭。無論妳的網站內容本身是否有很多重復的元素,都必須確保每壹頁都有統壹的頁頭。
使妳的設計保持邏輯性。應當保證壹個頁面上的元素按照重要性或主題有邏輯地排列;網站的各個頁面也都要這樣做。
2、建立壹致的風格。統壹的布局能夠給網站帶來結構上的壹致性,統壹的風格帶給網站的則是主題的和諧壹致。堅持使用兩個或三個主色調,並確保他們協調統壹。
避免使用太多的字體樣式或尺寸,如果妳打算交替使用幾種不同的設置,就要確保在每壹頁上以同樣的方式使用它們。
使用層疊樣式表(CSS)來管理統壹的風格,它也使修改整個網站的元素更加容易,不必再去每壹個頁面修改了。
3、使可讀性最大化。為了讓文字更容易閱讀,需要把它們分解成較小的幾部分。使用小標題和適當的間距以使各部分分開。
使用粗體或不同尺寸的字體,這樣可以顯示主題的層次結構和重要性。
註重文本處理。不要使字體太小,並擴大行距,使大塊的文本更具可讀性。大塊的文本更難閱讀,所以最好把它們分解成小段落。
4、使妳的網站具有普遍的可讀性。使用標準的HTML,避免使用只適用於某個品牌或瀏覽器版本的標簽、功能和插件。盡管大部分當代的瀏覽器和電腦都可以處理復雜的圖像,如果能保持圖片具有較小的尺寸並為網絡做過優化,也會加快對這些網頁的訪問。在質量和速度之間要進行平衡。
5、測試妳的網站。確保每壹部分運行正常,圖像顯示正確。妳也可以實施壹些可用性測試:請壹些目標受眾成員測試網站的清晰度和易用性,並在網站上進行反饋。
6、發布您的網站。如果妳還沒有做,就需要先買壹個域名。定期檢查鏈接,以確保它們仍然存在,並瀏覽網站訪問者通過電子郵件發送的建議。
小提示不要用艷麗,花哨的圖形轟炸觀眾。Flash動畫,明亮的色彩,有圖案的背景以及每次頁面加載都會自動播放的音樂,這些在20世紀90年代是壹個有趣的體驗,但會趕走今天的網絡用戶。要堅持用簡單的、與文字顏色有反差的背景,以最大化地增加可讀性。
為了適應有聽覺和視覺障礙的訪問者,妳可以給視頻加上字幕,轉錄音頻,並對可訪問性進行說明。雖然表格是壹種組織信息的有效方式,但當弱視訪問者使用屏幕閱讀程序時,他們可能無法有序地聽到表格中的內容。
妳可能有自己的設計感覺,或者也有壹些已經在其他網站上應用的頗受喜愛的設計,妳可以以它們為基礎來設計布局,但是購買壹個現成的模板可能是更容易的方法。
要保持不浪費遊客的打印油墨,就需要在打印時使用壹個單獨的樣式表來格式化妳的網站。當設置打印參數時關閉背景圖片。
在白色背景上使用黑色文本。
移除菜單欄和任何不必要的圖片。
總是可以使用CSS保持適合的段落間距。
警告避免剽竊,遵守所有版權法。不要添加來自網絡的無來源圖片,或是無授權的結構性元素。往網站上添加任何東西都必須遵守法律和道德。
40個網頁設計優秀案例關於我們的頁面設計並不難,但是要設計壹個完美的版本並不容易。它通常取決於妳的出發點,是要個性化的設計,還是品牌化的運作?是提供自己聯系方式,還是獲取用戶的聯系方式?下面的優秀案例會告訴妳,優秀的關於我們頁面要如何設計。
1、友好的界面
友好的聯系人界面總會讓人感到親切的,如果它還具備壹些功能性,並且易於閱讀,用戶會感覺更加舒適的。“Whatcanwehelpyouwith”則可以引導用戶去點擊“加入我們”“聘用我們”以及參與郵件訂閱。
2、展示全球各地辦公室
Tool的關於我們頁面中,設計師用醒目的字體標註出團隊在洛杉磯、紐約和法國的辦公室的地址和聯系方式,點開關於我們頁面的用戶不就是想知道這些信息麽?正確的聯系方式,簡單直接的設計,就是這麽做的。
3、簡化溝通流程
ProductiongLocation的聯系我們頁面同樣采用了大膽而視覺化的頁面設計,但是和其他的同類頁面不同的是,它簡化了溝通流程,把用戶可能會關註的內容和需要溝通的具體部分都劃分了壹下,讓不同需求的用戶直接被引導到特定的頁面和部分,從而達成簡化和分流的目的。
4、頭像和個性化的信息
放上設計師和團隊成員的圖片,讓用戶認識妳。最關鍵的並不是妳的頭像夠不夠漂亮,而是要讓用戶知道這個漂亮的網站背後是壹位和妳我壹樣真實而平凡的設計師,是他或者她努力設計之後的成果。頭像可以讓頁面更加個性化,也能讓它更加真實而親近。
5、鼓勵用戶溝通
關於我們頁面的核心設計目的通常是溝通,而HelloInnovation的頁面設計則充分貫徹這壹思路:試圖鼓勵用戶主動同網站進行溝通。用親切而富有親和力的設計,留下聯系方式,從文案到留下郵箱的地址都在鼓勵用戶。聊壹句,能有多難呢?
6、用圖片來傳遞隱喻
設計博物館中收藏了許多設計相關的藏品,而關於我們頁面中的這個電話不僅是網站的藏品,而且作為壹個重要的隱喻來向用戶傳遞“溝通”的意象,這也算得上是壹種設計上的“雙關”了。
7、創造令人難忘的設計
古怪的設計和有趣的文案總能讓人難忘,每天海量的信息攝入讓人們只會記住最突出的那些。不過,古怪的設計不壹定適合任何品牌任何網站,但是對於那些古靈精怪的網站而言,那些獨樹壹幟的腦洞總能起到作用。
8、表現品牌的性格
對於網站而言,在關於我們頁面中將自家的品牌性格呈現出來自然是合理合適的。BooneSelections就是這樣優雅又專業地將品牌配色和相關設計元素融入關於我們頁面的。作為壹個專業的葡萄酒進口公司,BooneSelections的關於我們頁面用獨特的排版和滾動式的頁面設計,營造出獨有的品牌氣息。
9、展示聯絡方式
ThisAlso的關於我們頁面設計可謂是可靠而到位了,頁面地圖標註出了公司地點也就算了,當妳向下滾動頁面的時候,還能看到詳細地址的說明、沿線地鐵的乘坐方式、溝通的電子郵件地址、電話,等等等等,不壹而足。
10、給個提示
網站DeuxHuitHuit的關於我們頁面並沒有提供傳統意義上的溝通方式,而是設計成了壹個直觀而簡單的對話框。頂上“Sayhello”的對話框非常直接地提示用戶,只要輸入內容,網站的開發者就能看到了。
11、標明開門/工作時間
對於諸如餐廳、博物館、商店等有具體營業時間的機構的官方網站,在關於我們頁面當中標註店鋪開門的時間、接受電話咨詢的時間,可以讓用戶更加有效地接受服務。
12、使用醒目的字體
Panache的關於我們頁面中標題字體采用了非常醒目的“TravaillonsEnsemble”,這種字體更為輕巧,雖然獨特但是具有極高的識別度。
13、使用大膽的配色方案
經典的黑白黃的配色方案被運用到Sponge的關於我們頁面當中,這種強對比的配色結合細致的細節刻畫,讓整個頁面看起來銳利又富有質感。設計師將明亮的色彩運用到最關鍵的信息上,讓用戶更容易註意到它們。
14、采用形象化的插畫
插畫總能以更加視覺化的方式來吸引用戶的註意力,尤其是當插畫足夠風格化、個性化的時候。LegworkStudio的關於我們頁面中,加入了狼頭人插畫,配合手寫字體,營造出了壹種個性化的氛圍。
15、使用簡約的圖形
GiampieroBodini的關於我們頁面並沒有使用復雜的設計技巧,而是在素描的繁復背景上,放上壹個簡單的矩形,將聯系方式與相關信息置於其中。繁復和簡單,手繪和圖形,形成了鮮明的對比。
16、借助表單來溝通
溝通是相互,妳可以發信息給網站,也可以留下聯系方式,讓網站的運營者給妳發信息。QEDGroup直接在聯系我們頁面中留下壹個表單,妳可以通過這個表單留下聯系方式。
17、使用單色配色
簡單優雅和易讀是JosephAAvoue的網站聯系我們頁面的設計風格,沒有華麗的設計,也沒有花哨的功能,壹個纖細的環,中間是最基本的聯系信息,就是這麽直接。
18、幽默
幽默的設計師不會放過任何壹個搞怪的機會,Bio-Bak的設計師即使是在聯系我們頁面當中也會嘩眾取寵壹把。塗鴉字體和俏皮的文案讓人忍俊不禁,妳能夠從每壹個細節感受到這個設計師的幽默細胞。
19、填寫表單
Anakin的關於我們頁面同樣是讓用戶填寫聯系信息,不過在表單的設計上更加獨特,並沒有專門的表單,而是使用占位符提示用戶各個位置需要填寫的內容,貼心、直覺,也非常走心。
20、個性化的辦公地點展示
和第二個案例類似,CPB集團在全球各地都有辦公室,但是在設計的樣式上也更加獨特,各地辦公室的內容和個性化的背景融為壹體,信息得到了整合,展現方式也個性十足。
21、介紹壹下業務
在關於我們頁面當中介紹自己並不稀奇,不過除此之外可以做的還有很多,比如介紹壹下自家的業務,展示壹下自家的品牌,吸引用戶來聊聊也是很不錯的手段。HelloMonday的關於我們頁面就是這麽做的。
22、視頻背景
在網站裏面添加視頻背景已經是壹種非常流行的手段了,而作為電影制作工作室而存在的Moodboard在關於我們頁面中使用視頻背景不僅符合他們團隊的工作性質,而且讓整個關於我們頁面更加鮮活了。
23、使用柵格布局
要設計結構化的頁面,柵格總是妳最好的朋友。UrbanInfluence的關於我們頁面使用柵格來組織整個頁面的信息,需要展示的內容,讓用戶輸入的部分,裝飾性的部分和展示用的地圖,都界限分明地分布在頁面上。
24、讓界面更加友好
如果讓界面更加友好,設計師要做的工作並不少。清晰而易讀的界面設計是最基本的,信息要能夠清晰的傳遞出來,沒有侵略性的配色,讓人感到熟悉、親切的呈現方式,易於操作的交互方式,這都是設計師要做好的地方。
25、分步引導
取得聯系包含著壹系列的操作,如果將整個交互過程分割成為若幹步驟,壹步壹步引導用戶來操作,加入動效和微交互,這絕對是壹種不壹樣的體驗。
26、增加聯系人快捷方式
團隊中負責不同部分的負責人通常不壹樣,用戶打開聯系我們頁面通常有著明確的目標,如何將FAQ部分加入其中,並且添加特定的聯系人的聯系方式,讓用戶可以更加直接地同不同的負責人進行溝通。
27、同網站其他部分整合到壹起
RobbyLeonardi的網站似乎被設計成壹個扁平風的電腦遊戲,當妳瀏覽頁面的時候,會隨著主角去不同的頁面,做不同的事情,而去關於我們頁面也是其中的.壹個“場景”。這是壹種整合頁面的方式,值得學習。
28、團隊合影
許多網站背後都是壹整個開發和設計團隊在運作,用團隊成員合影作為關於我們頁面的背景圖也是非常合理且有個性的做法。
29、使用留白
通常留白能強化整個頁面的空間感和結構感,而BetaTataki在關於我們頁面就放置了壹個設計感十足了電話,通過留白強化了聯系方式等內容的存在感。
30、活用字體排版
精心設計的字體排版不僅具有裝飾性,還可以承載壹定的內容。PaulineOsmont的聯系我們頁面使用了黑色、銀色和金色來構建吸引人的字體排版主視覺設計。當妳向下滾動頁面的時候,能看到易於閱讀排版到位的表單。
31、親手展示
這也是近幾年比較常見的壹種內容展現方式,設計師親手舉起展板來展示設計作品。如果用在聯系我們頁面中,這種設計師手法也是相當的應景呢。就像MarkJaworkski的這個頁面,設計師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。
32、列舉社交媒體聯系方式
現在哪個網站沒幾個社交媒體帳號呢?在關於我們的頁面當中將自家網站的各個社交媒體的鏈接都貼出來,對於許多用戶來說反而更加便於聯系。
33、借用傳統的溝通方式
復古的樣式是不錯的選擇,但是使用傳統的聯系方式來設計,似乎更加走心也更有意思。Lionway的聯系我們頁面就設計成了明信片的形式,還有壹些固定的信息幹脆就列舉在壹個打印賬單上。
34、俏皮的文案
文案的設計也是聯系我們頁面中重要的部分,親切、幽默的文案設計會讓用戶感到親近,但是同樣的,俏皮的、機智的文案也壹樣會讓用戶難忘。
35、展現個性
設計工作室Resn的聯系我們頁面設計絕對是這組案例中最有個性的頁面之壹,充滿80年代風情的設計元素,和帶著動物頭套的團隊成員圖片組成了頁面的主體。
36、運用信息圖
信息圖是近幾年壹直處於上升階段的設計手法,如果有合適的展示內容,在關於我們頁面中使用信息圖也是相當不錯的選擇。Quicksprout的關於我們頁面就使用了信息圖來呈現內容,清晰易讀,而且準確到位。
37、動畫和卡通
在聯系我們頁面中使用卡通和動漫式的形象來呈現設計師和設計團隊是相當常見也相當有效的手段,Melonfree的關於我們頁面就將設計師和開發者的卡通形象擺了出來。
38、使用半透明的圖形
人的眼睛總會有意識地去識別想要石碑的內容,所以即使的半透明的元素加載在壹起,也不會特別嚴重地影響閱讀體驗。Indofolio的頁面設就充分運用半透明的元素,將核心的聯系方式放在半透明的矩形上,透過圖形用戶依然能看到背景的細節,但是又不會看不清關鍵的聯系方式。
39、手繪效果
手繪的聯系我們頁面,尤其是那些畫的還相當養眼的頁面,總能讓用戶感受到設計者的貼心。MarioPetrone的這個頁面設計就相當的俏皮有趣。
40、僅用壹個下拉框
SpokesPedicabs的聯系我們頁面其實談不上壹個完整的頁面,而用壹個下拉框代替,當妳點擊導航了中的鏈接,會出現這個醒目的橙色下拉框。
網頁設計色系案例分析
橙色又稱之為橙黃或者是橘色,它的穿透力僅次於紅色,色感較紅色更暖。在網頁設計中橙色是十分活潑的色彩,給人以華貴而溫暖、興奮而熱烈、歡樂與活力的感覺,也是令人振奮的顏色。
橙色在網頁中的使用範圍非常廣泛,可以通過變換色調營造出不同分氣氛,不僅僅能表現出青春活力,也能達到壹個穩重的效果。橙色的波長居於紅和黃之間,具有健康、富有活力、勇敢自由等象征意義,為了讓大家對橙色有更好的理解,下面分別對不同類型網頁進行分析。
壹.食品飲食類網頁設計案例分析
推薦案例:橙色+黃色+深橙色
整個頁面以橙色為主,通過不同明度和純度的“黃”進行調和,頁面非常融洽而不顯單調。很好的突出了的圖片,食品圖片色調也是相近的,故不會非常的突兀。而利用白色將網頁分層,有層次感。
二.娛樂類網頁案例分析
推薦案例:深橙色+土黃色+黃色
整個頁面是利用深橙和淺黃色的搭配來展現的,使頁面看起來更加的溫暖,深色的鋪墊,黃色的文字,達到壹種突出而不突兀的視覺效果,賦予了網站生命力。
三.電子商務網站案例分析
推薦案例:橙色+卡其色+綠色
這壹個案例使用的顏色相對較多,而橙色的導航輔佐明度較高的卡其色,不會顯得非常淩亂,反而更加有特色,很活潑。加上利用壹些綠色的按鈕來點綴頁面,頁面就顯得不那麽單調,有萬橙之中壹點綠的視覺效果。
四.科技發展機構網站案例分析
頁面用的色彩相對較雜,但讓人感覺亂中