Web設計精確點滴

2022-05-01 02:39:07 字數 1797 閱讀 4230

這篇文章說實際問題的,所以不多強調,下面是我總結的一些比較突出的細節問題,而且我一直認為這些問題比較嚴重,正因為這些都是基本問題,很容易解決的,但把這種忽略養成一種習慣性的「經驗」那就「杯具」了,然而這些細節問題也不同程度的代表了你的工作態度。

1)調整後的毛邊

當對乙個點陣圖的大小進行調整後,正常情況下會留下1px的毛邊(如果你注意的話),邊界會變得模糊,如果繼續調整模糊度會加大,這個問題太不起眼了,以至於你無法用肉眼來理繪,我們先用商品舉例子:

也許單張小圖還不夠顯注,下面對比乙個列表圖和大圖,當然了除非你故意想要這種效果。

放大2倍後對比

放大2倍後對比

另外不要試者調整帶有邊框的,最好是自己繪製,這個面兩張對比圖不用放大就能全面看到問題:

2)關於邊框和背景

有 些區塊需要用邊框裝飾點綴得醒目一點,有文字區塊區塊等,文字區塊加邊框的建議使用同基色的背景色填充區塊,不然內容會很空洞,加邊框的話,如果 是css定義的邊框最好是加上間隔距離,因為不是固定的,所以可能會出現底色與邊框不協調,嚴重的會造成毛邊效果,下面用幾個例子來說一下:

文字邊框背景:

因為區塊加了邊框後背景與邊框之外的背景顏色相同,所以感覺空洞,所以最好是區塊加上背景,而且背景色與邊框最好是同乙個基色。

白色背景下,背景不要比邊框太深,再努力的調整區塊內容的顏色能與背景融合也於事無補,邊框成了毛邊。

在深色背景下,才使用加亮邊框。

關於邊框,本身就有背景,而且色彩是多樣的,在給加邊框時也最好是與背景同乙個基色的背景,而且最好是取與最邊上的色彩的深基色,如果是邊上有多種顏色,取最多的那顏色,例:

如果邊框是用css定義的,而且是圖列,比喻說是產品列表,而列表中的產品類別和背景色都不一致,就會出現邊框與背景同色或不協調的情況,例如:

上圖中間一排邊框的色彩就不協調了,如果在是不確定的情況下,加邊框時最好是給與邊框之間加上邊框距。

在看看在深色背景下的效果,深色背景下可以有兩種方案,一是去掉外框,以白色間距邊框,二是加亮外框,留出與背景相同顏色的間距。如下圖:

3)關於邊距與對齊

設計師尋找靈感時,偶爾會隨意、自由的拖拉擺放區塊、填色、繪製等,直到滿意才會停下,在這個過程中會出現有與「經驗」掛鉤的細小漏洞,例如:

下圖表面看上去沒問題,細看之下有點小彆扭,放大後就可以看清楚了,導航文字偏高,搜尋框與導航沒有對齊,搜尋框中button圖示距離也有問題。

調整之後如下圖:

在看下面的例子:

上圖中區塊上下間距與左右間距不勻稱,和前幾的列子一樣,文字與區塊上下垂直間距不協調,下圖是修正後的結果。

在來看圖列間距:

下 面這個列圖看似沒問題,其實有兩個細節問題(其中乙個應該算是使用者體驗的問題)。首先第一列與第二列的間距要比第二列與第三列的距離要小2px,對於這個 問題,有人會說這個間距用css定義就統一了,不會存在差異!注意了,我們討論的是視覺設計,不能把這個問題丟給前端,否則你後面丟過去的更多(相信 我),其次縱間距太小排的過於緊密。

調整過後如下圖:

4)關於陰影與質感:

在設計點綴版面時需要有深度和3d質感的時候,可能就會用到投影、陰影、光線感等效果。但web設計和平面廣告不同,太強、太硬的質感只會讓頁面顯得粗糙,web頁面是個很細緻的活,還是那句話,這裡只說細節,先看圖:

理論上講,將乙個沒有質感的元素進行投影或加陰影是不現實的!前面講的一些陰影效果,元素本身沒有任何質感。看下面的例子:

上圖button和**區塊的投影沒有質量,修改後如下圖:

關於深色背景下的質感,陰影和投影是不現實的,所以只能用發光或光線質感來實現。

就說到這裡了,沒時間往下說了,我要整理東走了,上面都只是你可能不注意的小小細節問題,你注意到的我也不會說了。

設計模式點滴

1 變更才顯真功夫。業務需求變更永無休止,技術前進就永無止境。在發生變更時才能發覺我們的設計或程式是否是松耦合。2 穩定性較高的設計,在周圍環境頻繁變化的時候,也能做到 我自巋然不動 3 介面負責定義pubilc屬性和方法,並且宣告與其他物件的依賴關係,抽象類負責公共構造部分的實現,實現類準確的實現...

Web站點測試經驗點滴

1.在執行客戶端併發效能測試的過程中,需要同時監控資料庫伺服器 web伺服器以及網路資源等使用情況,以便對系統的效能做全面評估 2.錄製指令碼和手工編寫指令碼相結合 3.設定資料池,實現變數載入 4.業務批量執行 5.模擬使用者數的遞增 6.合理設定交易之間時間間隔 7.模擬ip 位址變數的技術 8...

verilog設計經驗點滴

組合邏輯 1,敏感變數的描述完備性 verilog 中,用always塊設計組合邏輯電路時,在賦值表示式右端參與賦值的所有訊號都必須在always 敏感電平列表 中列出,always中if語句的判斷表示式必須在敏感電平列表中列出。如果在賦值表示式右端引用了敏感電平列表中沒有列出的訊號,在 綜合時將會...