如何做好網頁前端的設計

2021-05-22 16:07:36 字數 1106 閱讀 3674

設計稿的分析是指對設計稿如何製作成頁面的分析,即哪一塊的內容可以做為公共的部分、哪一塊的內容結構可以如何實現等。對設計稿的分析能力可以劃分成下面的幾個階段:

能分清設計稿中的公共與私有的部分

在1的基礎上對各部分的實現方式有乙個初步的方案(包括如何切圖、寫結構、寫樣式)

在1的基礎上,準確的給出各部分的實現方案(包括如何切圖、寫結構、寫樣式)

在3的基礎上,能同時考慮方案的擴充套件性、復用性及頁面效能(包括如何切圖、寫結構、寫樣式)

在4的基礎上,考慮整站的結構分布(包括檔案分布、目錄結構)

上面這些都是在還沒開始動手製作之前所要做的。

切圖是指將設計稿切成便於製作成頁面的。都有個誤區,覺得切圖就是把切出來,其實並不完全是這樣,還包括把切出來的合併到一起,怎麼切、從哪切才能將效能最大化,說「切圖是一門藝術」完全不為過。切圖也可以劃分成幾個階段:

切成所需要的(如何將需要的部分切出來)

在1的基礎上,對切出來的進行一些優化(包括壓縮檔案大小、選擇型別)

在2的基礎上,規劃切出來的(包括檔案分布)

在3的基礎上,考慮整體的效能(包括合併、壓縮檔案大小)

html和css的編寫是指將上面完成的內容,通過html和css的編寫,將設計稿轉換成web頁面最重要的一塊,也是我們所要重點掌握的內容,把它們放在一起,是因為它們相互的關聯性太強,html的寫法會影響到css的寫法,它又可以劃分成下面幾個階段:

還原設計稿視覺效果,並通過標準驗證(html)

在1的基礎上,實現多瀏覽器的相容(html)

在2的基礎上,標籤語義化(html)

在3的基礎上,選擇較優的實現方式(包括模組化結構,方便程式指令碼使用,html和css)

在4的基礎上,考慮到擴充套件性、復用性和可維護性(html和css)

在5的基礎上,考慮到整站的樣式分布(包括如何實現分布)

在6的基礎上,樣式寫法的優化(包括技巧的應用)

是對所遇到問題的解決能力,這一點在不同的階段都可能會遇到,所以沒有寫到上面。

如果你已經達到或超過3、4、5,恭喜你,你已經是乙個職業的「頁面重構工作者」了。為了我們自身的發展,關注新技術、技術創新、提高使用者體驗、審美觀、程式指令碼的實現方式等,也是十分必要的。大家一起進步吧

如何做好產品設計

今年早些時候,我曾經問過幾位作家是怎麼寫書的,比如 流血的仕途 作者曹公升 科幻作家劉慈欣,發現他們寫書的方式,居然和我想的不一樣。據他們說,基本上是順序寫下來的,甚至寫的過程中自己也不知道後面會發生什麼情節,也許和他們寫的是 有關係。對比起來我的寫作就很特別了,簡直是把書當軟體來做了,有點瀑布模型...

如何做好用例設計?

本人總結了之前做的專案,在這裡與大家分享我的個人想法。如有雷同,不勝榮幸。歡迎交流互動!當接了乙個專案,我認為初級測試人員要做到以下幾點 1 熟悉需求文件 可以根據文件作為參考,當遇到模糊不清楚的,多與產品經理 需求分析人員交流,利用一切可以利用的資源快速高效的提公升自己對產品的認知。因為一切的用例...

如何做好PL

最近事情太多,主要有三類 新專案開發,開發團隊有8個人,維護版本過tr5點,如果測試提出問題,必須保證問題單不能過夜,當天解決。網上問題,產品技術問題支援。結果,這個星期有三天晚上是1點後回家的,我在想。pl到底是怎麼樣乙個角色?是管理還是技術主導多一些?那些問題其實組員是能夠搞定的,但是我之前已經...