介紹網站設計的7個技巧 網站設計的技巧有哪些?

保持簡單且實用 。 這個概念可以追溯到1960年 , 當時美國海軍實施了KISS原則 , 該原則堅持認為 , 大多數系統在簡單而不是復雜的情況下才能發揮最佳作用 。 幾乎任何網站設計項目也是如此 。
大多數網頁設計師在其職業生涯的早期就了解KISS 。 那你怎么辦呢?創建一個簡單的設計要比你想象的要復雜一些 。 這里有七個設計規則 , 可幫助你消除所有混亂并創建一個精美簡單的帳戶 。 接下來專業網站設計公司Angle就帶大家去看一下吧 。
1.每頁設定一個目標
簡單設計的開始從項目目標和網站每一頁的特定目標開始 。 每個頁面應引導用戶執行一項操作 , 但導航和頁腳除外 。 這可以是任何事情 , 例如單擊鏈接 , 以表格形式輸入信息 , 觀看視頻或玩游戲 。 但是每個頁面都應專注于單個用戶操作或轉換 。 太多的事情會使用戶不知所措 。 他們可能會忽略應該完成哪些操作 , 并可能做出較不理想的選擇 。 計劃網站設計 , 以便每個頁面將用戶引導到一個目標 。 同一頁面上的滾動條上方和滾動條下方的每個可操作按鈕都應執行相同的操作 。 這種一致性可以幫助用戶了解他們為什么在你的網站上以及應該做什么;這些選擇的簡單性使設計變得輕松而引人入勝 。
2.堅持兩種類型字體
有太多的設計指南為項目推薦了三種字體 。 你可以使用兩個健壯的類型族來進一步簡化該過程 。 尋找一個包含多個權重的類型族 , 在常規和粗體或黑色選項之間要有足夠的對比度 。 要獲得更出色的顯示效果 , 請選擇一種顯示選項 , 其中包括一些可以在超大標題中使用的備用字符 。 然后 , 你所需要做的就是將主體字體和顯示字體進行混合和匹配 , 以使整個設計中的字體得到很好的組合 。 就像你為特定的粗細或樣式選擇更多具有特定用途的選項一樣 , 使用兩個類型族 。 你會發現這可以幫助您創建易于管理且具有視覺一致性的高度可讀且易于使用的排版調色板 。
3.使用一致的對齊方式
左中至右 , 無論你喜歡哪種對齊方式 , 在整個設計過程中都要堅持下去 。 這包括對齊類似的項目 , 例如文本框和元素 , 它們彼此不同但可以組合在一起 。 更重要的是 , 這種一致的對齊方式會與其他標題和CTA對保持一致 。 對齊方式與滑塊的流量匹配 , 滑塊的流量也沿互補方向移動 。 對于文本元素 , 左對齊和居中對齊是最常見的選項 , 因為它們最易讀 。 對于較長的文本 , 左對齊是首選 。
4.建立層次結構
用戶不必考慮要看什么或如何在設計中移動 。 即使是最簡單的視覺作品也應具有獨特的層次結構 。 它始于主導視覺 。 它可以是圖像 , 視頻或文本顯示 , 也可以是第一印象的任何其他內容 。 然后應該有某種文本告訴用戶設計和網站正在嘗試交流的內容 。 這通常是以與主要視覺效果兼容的簡單標題的形式 。 第三是用戶要完成的第二部分文字或操作 。 最終的視覺元素是導航菜單 。 用戶期望找到所有這些元素 , 并且訓練眼睛基本按此順序在元素之間移動 。 通過這種方式進行設計 , 使它們變得容易 。
5.給元素足夠的空間
如果你現在還不知道 , 請將其提交到內存:空白是你的朋友 。 給網站設計中的每個元素留出足夠的空間 。 空間將有助于吸引人們對單個元素的關注 , 占用“空間” , 這樣你就不會試圖將畫布弄得亂七八糟 , 并有助于創建具有焦點的整體設計 。 充分利用空間的訣竅是一致性 。 為圍繞單個元素或在文本行之間適合的空間量設置規則 。 如果設計最終看起來過于貧瘠 , 則可能需要稍微縮短間距 。 當你重新打開設計并轉到你要用戶首先看到的地方時 , 你會知道間距是正確的 。 (不確定它們是什么?回到第4點-建立層次結構 。 )
6.放大對比
高對比度的設計元素-從顏色選擇到元素的大小 , 即使在最小的框架下 , 也可以為項目提供所需數量的視覺效果 。 對于時髦的選項 , 請嘗試使用鮮明對比的調色板來吸引用戶的注意力 。 與黑白選項相比 , 大膽的顏色會使簡單的設計更復雜 , 更有趣 。 為了充分利用對比色 , 請從色輪上相反的位置選擇具有相似飽和度的色相 。 如果你不喜歡該選項 , 請嘗試其他基于色輪的對 。 (你甚至可能會發現一個意外的新喜歡項 , 例如上面的紫色和藍綠色組合 。 )
7.使用一致的圖標和元素
設計的一致性是殺手級設計中最好的(也是最壞的)秘密之一 。 這是因為設計項目中雜亂無章的多種按鈕樣式或社交媒體圖標而與網站的其他圖標不匹配的情況下 , 人們經常忘記這些事情之一 。 用戶界面元素不應該是事后的想法 。 重要的是創建圖標和用戶界面元素集以及規則 , 并以相同的方式在整個項目中使用它們 。 (如果你不想從頭開始創建圖標字體或用戶界面元素套件 , 甚至可以購買或下載 。 )為元素選擇一種顏色 , 對每個元素使用相同的懸停動作或效果(一種用于可單擊的元素 , 另一種用于不可單擊的元素) , 并根據使用情況調整大小 。 (對于圖形更多的元素 , 既有圖標大小又有超大尺寸選項是可以接受的 。 )

推薦閱讀