昆明一条龙桑拿
龍崗網站建設

    網頁設計師要注意那些事兒?

    日期:2019/7/26 人氣:27851
    導讀: 01 圖片邊緣的處理 左圖: 很多圖片,本身并不定完美的,尤其是邊角區域為白色的吋候,如果不處理的話,很容易和白色背景融合。那么我們該如何改變這些問題。 右圖: 于是我們在圖片的邊緣處增加了淺灰色的描邊,有效的解決了這些問題。或者改變與圖片融合的背景把它們改為灰色,這樣就和白色產生了對比。 02 圖片的統一性&n

     01 圖片邊緣的處理

     
    左圖:
     
    很多圖片,本身并不定完美的,尤其是邊角區域為白色的吋候,如果不處理的話,很容易和白色背景融合。那么我們該如何改變這些問題。
     
     
    右圖: 
     
    于是我們在圖片的邊緣處增加了淺灰色的描邊,有效的解決了這些問題。或者改變與圖片融合的背景把它們改為灰色,這樣就和白色產生了對比。
     
    02 圖片的統一性
     
    左圖:
     
    在展示團隊成員照片的時候,很多設計師在擺放團隊成員照片的時候層次不齊,破壞了整個統一性。
     
     
    右圖: 
     
    經過調整后,讓整個圖片在畫面中的比例大小都保持一致,有效的解決了這個問題。
     
    03 圖片色調的統一性
     
    左圖:
     
    上列一排圖片的展示中,有暖色 有暗色,有亮有暗的整個極度不統一。給用戶視覺上造成不便。
     
     
    右圖: 
     
    經過調整后讓整個圖片有色調明暗處理上保持了統一,有效的強調了畫面的一致性。
     
     
    04 圖片的邊框比例
     
    左圖:
     
    圖片的長寬比例數值。這是在視覺上輕易看不出來但是如果給開發人員的時候,就會出現這個毛病。
     
    右圖: 
     
    進過調整后的圖片比例 長度都是偶數,這個時候便于前端工程師開發適配。
     
    05 圖形化的繪制
     
    左圖:
     
    關于圖形化的繪制出現毛邊也是很多設計師會出現的問題。
     
    右圖: 
     
    所以在繪制的時候一定要注意細節,避免出現毛邊的情況。
     
     
    字體
     
     
    01 字體尺寸大小
     
    左圖:
     
    一般在網頁字體開發的時候,發現不少同學會用到15/17 類似這樣的奇數數值大小的字體。其實這并不利于系統的顯示。
     
     
    右圖: 
     
    經過調整后字體顯示的為12/14/16等偶數數值大小。一是讓整個字體在現實的時候沒有毛邊。而且有利技術系統的顯示渲染。
     
     
    02 字體的段落的行高
     
    左圖:
     
    上列字體段落看起來是不是很吃力,每段字體相互干擾。給用戶造成極度困擾的閱讀。
     
     
    右圖: 
     
    經調整后字體段落行高顯示為字體數數值的一半讓段落彼此之間有了透氣性。極大的提高了字體的閱讀性。
     
    03 標題和段落主次關系
     
    左圖:
     
    上列字體段落在視覺上給人感受不到有標題的存在,標題和段落之間的對比不明顯使用戶容易混亂。
     
    右圖: 
     
    調整過后的設計,標題加大了,一般增大段落字體的2/1大小,與段落的間距也是行間距的2倍。使用戶在閱讀的時候,清晰明了。
     
    04 段落文字上的標點符號運用
     
    左圖:
     
    上列段落文字之間的標點符號有的很近有的很遠這樣的設計很容易讓人感到設計人員不專業的行為。所以在視覺上也得不到統一。
     
     
    右圖: 
     
    上列字體的標題符號驚醒調整,讓他們之間保持了一致性。使得我們的設計變得更加嚴謹。
     
     
    05 英文字體使用
     
    左圖:
     
    英文字用英文字體。中文字用中文字體。很多設計師對于中英文字體的運用比較模糊。所以導致了英文字體看起來別扭。
     
     
    右圖: 
     
    上列英文字是修改后的,運用了英文字體。其實啥也不用說了這是每個設計師最基本的知識。
     
    06 每行文字的展示長度
     
    上圖:
     
    上述一行文字是否看得很吃力?是的。因為漢字的信息量極大,每個字之間沒有空格,緊密的挨在一起。所以用戶閱讀的時候比較吃力。
     
     
    下圖: 
     
    下列的文字每行展示的字數控制在35~45字之間是用戶閱讀的時候最容易吸收和理解的。別問我為什么,這是長久以來的研究出來的數據。
     
     
    顏色
     
    01 大面積的用色
     
    左圖:
     
    上面是不是給你一種刺眼和不適的感覺。是的這也是很多設計師所犯的錯誤。
     
    右圖: 
     
    所以在調整過后我們可以適當的減少面積。保留了大量的留白,讓用戶更容易接受。
     
     
    02 色彩的明暗
     
    左圖:
     
    上面色彩大面積會給用戶一種刺眼的感受,主要是設計師沒有敏銳的色彩感知能力。
     
     
     
    右圖: 
     
    經過調整后將色調的明度調整在用戶能接受的階段之內。主要考驗設計師對色彩的感知力。
     
     
    03 彩色與非彩色
     
    左圖:
     
    上面圖片字體配色使得整個畫面顯得亂,因為背景包含了許多色彩,然后文字對色彩又是一種偏藍色的色調,所以導致讓用戶無法進行視覺聚焦。
     
    右圖: 
     
    經過調整后將色調的明度調整在用戶能接受的階段之內。主要考驗設計師對色彩的感知力。
     
     
    04 環境色的運用
     
    左圖:
     
    上面用色在色彩上非彩色是沒有錯誤的。但是卻沒有給用戶傳達出圖中的意境。這是為何呢?
     
     
    右圖: 
     
    經過調整后的文字吸取來環境中的色彩后,一般適合在圖片中色彩數量比較少的情況下可用,這樣就使得文字和圖片完美融合在一起。
     
     
    05 不要超過3個色彩使用
     
    左圖:
     
    上面設計中用戶到底需要注意哪一個文字,是不是有眼花繚亂的感覺。
     
     
    右圖: 
     
    經過調整后的文字采取來兩種色彩,彩色和非彩色的搭配,給用戶傳達出簡潔清晰的感受。
     
    06 相接處與分開
     
    左圖:
     
    上面色彩給你的感受是什么?所以不同的色彩之間是不適合相接觸的,尤其是高飽和的紅和藍兩種色彩。
     
     
     
    右圖: 
     
    這里我們我們把他們分幵后兩種對比色彩相互對比相互不沖突。
     
     
    其他
     
     
    01 完整的PS圖層
     
    左圖:
     
    這樣雜亂不堪的設計圖層,不管是你的設計師還是開發人員都會讓人抓狂。
     
    右圖: 
     
    經過調整后的PS圖層,是不是看起來很整潔。這樣一看就是很專業的設計師。
     
     
    02 文字的顏色
     
    左圖:
     
    很多設計師喜歡把背景上浮動文字,設置透明度來改變字體的顏色,這樣是很方便。但是是很不利于開發人員進行文字色彩取色的。
     
    右圖: 
     
    所以我們在設置文字的色彩的時候,一定要避免設置文字的透明度。
     
     
     

    文本來自采集文章 http://www.spxrs.tw/25/120.html 如需轉載或刪除,請聯系管理員。

    1 2 3 4 5 6 7 8 9
    分享到:
龍崗網站建設
【深一龍崗網絡公司】——承諾3小時內上門服務!龍崗上門全國熱線:400-666-2014 【龍崗網站建設http://www.spxrs.tw】 網站地圖 粵ICP備15108339號 網站維護:深一深圳網站建設
全國深一龍崗網絡公司
昆明一条龙桑拿 期货每天稳赚20个点的方法 时时彩数字对应码 wnba比分直播哪里有 pk10牛牛公式图解 3d技巧文库 双色球输入号码查询器 伊涅斯塔 fg电子平台有假吗 dota2魅惑魔女后期 中彩票骗 飞艇计划app安卓版 bbin波音论坛 石膏线赚钱 新疆时时彩开奖结果 1比1现金兑换捕鱼游戏 头条里的关注能赚钱吗