首頁 > 業界 > 關鍵詞 > 網頁設計最新資訊 > 正文

網頁設計中的7個基本原則

2021-01-09 09:41 · 稿源:站長之家

網站設計對于能否給用戶留下好的印象至關重要,你可以采取各種策略來提高轉化率或符合搜索引擎要求(提高SEO排名),但如果網站設計讓人不令人滿意,那么一些可能只是徒勞。

SEO,關鍵詞,網站,數據

確保網站有不錯的視覺效果,并提供無縫的用戶體驗是重中之重。WebFX的研究表明:

  • 94%的第一印象與網站設計有關。

  • 一個網站75%的可信度來自它的設計。

  • 89%的消費者會因為用戶體驗不佳轉而選擇競爭對手。

你的產品和/或服務可能做的很好,但如果沒有充分展示你的數字品牌,可能會面臨達不到目標的風險。

設計是一種營銷,它傳達了品牌的個性。如果你想要以吸引人的方式受眾推廣品牌,那么你需要遵循以下7個基本原則,才能創造出吸引力:

1. 視覺層次結構

網頁設計中最重要的原則之一,視覺層次是關于重要元素的排列。每個頁面內容的層次結構是由以下因素影響的:

  • 尺寸:較大的元素更容易被注意到。

  • 顏色:明亮的顏色比暗淡的顏色更能吸引注意力。

  • 方向和對齊:與其他大部分元素不同的元素會更突出。

  • 重復:重復相同的風格可以暗示內容更相關。

  • 對比:色彩的強烈對比會使一個特定的元素突出。

  • 留白:元素周圍留有更多空間更能吸引眼球。

  • 紋理和風格:更豐富的紋理和/或風格更能脫穎而出。

這個原則的一個關鍵部分是,你想建立一個讓受眾最關注的區域。銘記自己商業目標,并對受眾最需要看到的內容進行排名。然后調整上述特征,以確保人們會關注到這些東西。

2.??硕?/strong>

根據??硕桑ㄒ孕睦韺W家威廉·埃德蒙·??撕屠住ずB拿置模?,建議你給用戶的選擇越多,做出決定的時間就越長。

大家應該都有這樣的經歷,比如去了一家有很多菜選擇的餐館,就會花更多時間決定點哪些菜。

同樣的道理也適用于網站,你提供給訪問者的選項越多,他們就越難瀏覽?;旧?,你需要保持簡單并排除選項。如果你提供的產品種類很多,那么考慮提供一個過濾功能,不要隱藏它!

想象一下,如果亞馬遜、淘寶等在他們的主頁上展示所有的產品,那只會讓用戶看花了眼。

3.費茨定律

這一定律以著名心理學家保羅·菲茨的名字命名,使用指點設備到達一個目標的時間,與當前設備位置和目標位置的距離(D)和目標大小(S)有關。

1.設備當前位置和目標位置的距離(D)。距離越長,所用時間越長;

2.目標的大?。⊿)。目標越大,所用時間越短。

例如,將鼠標(指移動設備拇指)移動到你想點擊的下一個地方所需要的時間。通過到目標的距離除以目標大小來計算。因此,網站上的距離越長,元素的大小越小,用戶到達它需要的時間就越長,這就導致他們需要花費的精力更多。

記住,好的UX(用戶體驗)是讓你的用戶更容易而不是更困難,但這并不意味著越大越好。占據半個屏幕的按鈕顯然就非常不合理。

更重要的是在屏幕主要元素上與所有其他按鈕保持合理的比例,對于不同設備(如手機、平板電腦、臺式機等)來說是不一樣的。

4. 三分法

三分法來源于黃金分割理論。三分法解釋了一張圖像應該被分成9等份。如下所示:

將圖像分成9等份,可以得到4個交點。這些交點往往是會讓大家眼睛停留最久的位置。設計師可以根據重要性定位圖片想要突出內容的位置。

正如你在上圖中所看到的,你的眼睛會花更多的時間在右上方的交叉點上,那是也是適合放置關鍵內容的地方。不管你是不是有意的,三分法總是有效的。

5.格式塔設計原則

格式塔設計法則是德國心理學家馬克斯·韋特海默、庫爾特·考夫卡和沃爾夫岡·柯勒設計的一套原則,描述了人眼如何感知元素。

這些原則的名字“格式塔(Gestalt)”,在英語中的意思是“統一的整體”,建立在“一個有組織的整體,被認為大于其各部分之和”的理論基礎上。

構成格式塔設計法則的法則多達10條,但最常見的法則是:

1. 簡單原則(Simplicity),人腦有化繁為簡的能力,設計的構圖越復雜用戶理解起來越費勁。

2.圖形與背景關系原則(Figure-ground),在設計中應用圖形與背景關系原則,可以使你的作品傳達信息的方式有很大的不同。

3.接近性或鄰近原則(proximity),即空間中距離相近的元素有被看作一體的趨勢。

4.相似原則(similarity),刺激物的形狀、大小、顏色、強度等物理屬性方面比較相似時,這些刺激物就容易被組織起來而構成一個整體。

5.連續性原則(good continuation)

如果一個圖形的某些部分可以被看作是連接在一起的,那么這些部分就相對容易被我們知覺為一個整體。

6.封閉的原則(closure).有時也稱閉合的原則。有些圖形是一個沒有閉合的殘缺的圖形,但主體有一種使其閉合的傾向,即主體能自行填補缺口而把其知覺為一個整體。

這些設計原則對于設計適合品牌的網站至關重要。好的用戶體驗讓用戶的生活更加輕松,那些訪問你網站的人應該一眼就能找到他們要找的東西。

6. 留白

整合空白(元素之間的空白)是一個很好的做法,可以確保你的網站不會堆滿內容。應該創建一個簡潔的設計,以正確地傳達你的信息,以你必須明智地決定把包括圖像在內的內容放在哪里,以及不放在哪里。

在上面的圖片中,頁面的一邊是擁擠的,不利于閱讀;另一邊是清晰的,便于瀏覽者一眼就能看到內容??偠灾?,一定要避免填鴨式的內容。

7. 奧卡姆剃刀原理

“奧卡姆剃刀”(Occam 's Razor)是哲學家奧卡姆(Occam)威廉(William of Occam)提出的另一個保持簡潔的原則。再次強調,不要用信息轟炸人們,而要采取極簡主義的方式。簡單往往是正確的。

如果你不想完全隱藏所有的信息。把它放在次要位置,比如放在網站的另一個頁面上。那些認真尋找關于你的企業信息的人會主動去找到它,但對大多數人來說,他們只是想在登陸(首頁/介紹)頁面上看到簡單的內容。

結論

可以說這些原則中有一些是重疊的,但是,你仍然需要把每一個都考慮進去。有效的網頁設計并不等同于好的藝術。你的目標只是讓人們在你的網站上停留足夠長的時間,以完成業務目標,同時提供高質量體驗,讓他們繼續回訪。

注:文章由站長之家編譯自uxplanet,內容有刪改,點擊這里可閱讀英文原文。

  • 相關推薦
  • 大家在看
  • 小議搜索需求與SEO網頁title

    一般符合SEO的網頁title怎么寫?大概就是「一個核心詞」+「N個詞綴」,一個詞綴代表一個搜索需求。在很多行業,搜索需求并非一成不變,隨著移動設備、網絡速度、地理位置、網頁技術進展等搜索場景的變化,會同步新增,或減少一些搜索需求

  • 干貨!簡化和改進站UI設計的7個技巧

    據統計,成年人平均每天在手機上花費3到4個小時。盡管大家不懂如何創建APP或網站,但卻能明顯感知一個產品設計的好壞。這可以很明顯的映在產品使用時間上,并且很大程度可以歸結為直觀的用戶體驗和可能被忽視的UI界面。

  • 蘋果上線支持頁面詳解 AirPods Max 低功耗工作模式

    因為蘋果沒有在 AirPods Max 上加入開關,所以這款耳機的低功耗模式具體是如何運作,在發布后便引發了很多的疑問。日前蘋果就放出了一份支持文檔來詳細對該問題進行說明,蘋果概述了剛剛發布的 AirPods Max 的關鍵性能指標,包括充電和電池相關方面。

  • 谷歌正在測試桌面瀏覽器 Google 搜索頁面的黑暗模式

    據9to5Google 報道,盡管夜間模式目前已經在Android和iOS移動端上很普遍,但在桌面端的大屏幕上卻很少見。而Google目前已經在正在A/B測試其桌面搜索頁面的的黑暗模式支持。

  • OPPO海外主題商店設計私享會:發布三大計劃,組建百強設計師矩陣

    12月22日,由OPPO海外主題商店主辦的《乘風“造”浪》2020設計私享會在北京圓滿結束?;顒悠陂g,OPPO海外主題商店團隊從海外主題商店市場現狀、海外用戶喜好、海外主題內容生態建設等多個方面,與到場設計師、設計團隊及開發者進行了深度分享,同時帶來“沖浪計劃、馭浪計劃、造浪計劃”三大計劃為主題內容出海保駕護航,并宣布組建“百強設計師”矩陣,與OPPO海外主題商店官方團隊合作,共同為全球用戶打造優質的主題內容。通過海

  • 廈門外貿優品展新展開幕,在廈門看見當代好設計

    2020年12月25日,“廈門外貿優品展——廈門好設計”暨“看見當代好設計——2020當代好設計獎獲獎作品展”在廈門紅點設計博物館正式開幕?!皬B門外貿優品展——廈門好設計”由廈門市商務局主辦,紅點設計博物館?廈門承辦,廈門市進出口商會協辦,展覽將全方位展示廈門企業出色的創新設計,引導外貿企業精準對接國內市場消費升級需求,打造高品質且符合消費者需求的產品,推動內銷產品品牌化、規?;?,以設計助力企業轉型、產業升級?

  • 元旦來襲!字體超市讓你活動設計快人一步!

    轉眼2020年即將接近尾聲了,你們做好了迎接2021年的準備了嗎??字體超市已攜手各大字體商家早早為大家備好新一年的元旦活動字體啦,趕緊來提前感受一下節日的氣氛吧!

  • 2021年移動UX設計十大趨勢

    2020年即將結束,這是探索2021年將會有什么樣的改變最佳時機。以下是將影響2021年的10大移動用戶體驗(UX)設計趨勢。

  • UI設計暗黑模式指南,助你增強用戶體驗

    ?從手機屏幕到大屏電視,黑暗模式的UI設計隨處可見。暗黑主題更能表達力量、奢華、精致和優雅。然而,暗黑模式UI設計也帶來多種挑戰,如果沒做好,就無法滿足人們的期望。因此,在決定采用這種模式之前,設計師們應該先謹慎考慮。

  • 新頂級域名nTLD對網站優化有什么好處嗎?

    John Mueller表示:谷歌對所有域名都一視同仁,并不會因為網站使用了新頂級域名(nTLD),而在SEO排名上有所提高或降低。同理,在域名名稱中添加數字或者國家、地區的名稱也不會讓網站的SEO有所提高。因此,站長在選擇域名時,只需選擇與品牌契合的網域名稱,并挑選任何一種頂級域名類型即可。使用新頂級域名或在域名中添加數字并不會提升網站的排名。

  • 卡貝家居喜獲2020當代好設計

    12月18日,備受期待的2020當代好設計獲獎名單正式公布,卡貝家居攜旗下的“頂紅”面盆龍頭和“黑晶”面盆龍頭從眾多設計作品中脫穎而出,雙雙榮獲“當代好設計獎”,彰顯了卡貝家居卓越的產品設計能力?!爱敶迷O計獎”簡稱CGD,由德國紅點獎機構與廈門文廣傳媒集團共同發起,旨在為當代社會甄選好設計。當代好設計獎沿襲了紅點獎的的國際頂級設計獎項運作經驗和設計資源,極具專業性、嚴肅性與權威性,被工業設計界認為是全球最?

  • 庫克回應有些用戶沉溺蘋果設備:不會設計過分吸引用戶的產品

    受疫情影響,人們開始更加依賴于自己的手機,當然極個別用戶甚至會出現沉迷手機的現象。據QuestMobile數據顯示,過去一年,移動用戶月人均使用時長增長了12.9%,由2019年4月的128.2小時增長至2020年4月的144.8小時。

  • 一加手表和一加手環大量功能信息泄露,手表將采用方形設計

    一加曾宣布在今年發布其首款智能手表,有可能在第一季度發布上市。同時還有消息稱一加會推出一款手環產品,現在有一條爆料內容,同時提供了大量有關一加手表和手環的功能等信息。

  • Mozilla正更新Firefox的設計 地址欄將有大改版?

    Mozilla正在為該組織內部稱為“ Photon”的Firefox網絡瀏覽器進行設計更新。Firefox上一次重大的設計更新是在2017年11月Firefox57發布的,當時被稱為“Photon”。

  • 為肥宅而生?肯德基游戲主機可以炸雞!還設計成空氣炸鍋形狀

    還記得近年7月份,西二旗某公司程序員用CPU烤肉的視頻嗎?這種大膽的想法還真的有人做成了產品。據外媒報道,肯德基早前公布的KFConsole游戲主機將于下月公布更多細節。外媒稱,從肯德基六月份公布這款產品以來,酷冷至尊就一直在與肯德基合作開發該產品。

  • 谷歌回應反壟斷訴訟:重新設計搜索會損害互聯

    谷歌在官方博客上做出了回應稱,其搜索引擎是根據用戶反饋而演變的,而不是為了讓競爭對手處于劣勢?!拔覀兺ㄟ^嚴格的測試發現,用戶更喜歡這些類型的豐富結果,”該公司在談到其當前的設計時寫道,其中包括與企業(和其他谷歌服務)的直接鏈接。谷歌表示,競爭對手必應的設計也表明微軟已經從其用戶那里收集了類似的反饋。

  • 亞洲家居裝飾展3月重啟 設計本聯袂打造高峰論壇

    3月24日,2021 HD+ Asia 亞洲家居裝飾展(簡稱HD+Asia展會)將在上海盛大開啟。屆時HD+ Asia 展會將匯聚來自全球728+展商參展,為家居行業帶來最新的產品和前瞻性設計理念。展會上,HD+ Asia展會將聯合設計本打造“陳設深圳 摩登上?!避浹b論壇活動。作為國內高端室內設計服務平臺,設計本致力于為室內設計師提供原創作品展示及品牌推廣,為全國數百萬業主提供高端個性化室內設計服務。此次雙方聯袂合作,將給行業帶來一場設計盛宴

  • 華為旗下哈勃投資九同方微電子公司 后者服務于集成電路設計

    近日湖北九同方微電子有限公司(下簡稱“九同方微電子”)發生工商變更,股東新增哈勃科技投資有限公司(華為投資控股有限公司全資持股)、深圳市紅土善利私募股權投資基金合伙企業(有限合伙)。

  • AMD申請了基于MCM模塊化芯片設計專利,GPU將采用多核封裝

    據wccftech報道,AMD 于2020年12月31日向美國專利及商標局提交了一份專利申請,展現了全新的模塊化 GPU 設計方法。該圖形芯片令人回想起基于MCM的CPU設計。

  • 【科勒精選,為美執著】科勒精選尚思智能座便器獲美國室內設計雜志年度大獎

    凝聚科勒精選品牌的高標準與高品質,將設計、藝術與科技融入每一件產品,科勒精選 尚思智能座便器延續品牌經典,融匯尖端科技與藝術設計,締造冠絕群倫的非凡體驗,近日榮獲2020美國室內設計雜志《Interior Design》年度大獎(Best of Year Awards)衛浴設施類大獎。年度大獎(Best of Year Awards)由美國權威設計雜志《Interior Design》創辦,今年恰逢15周年。作為表彰全球設計行業從業者的卓越獎項,《Interior Design》年度大

  • 參與評論
文明上網理性發言,請遵守新聞評論服務協議
  • 熱門標簽

熱文

  • 3 天
  • 7天
美国一级片_欧美人与动性行为视频_三级片在线