從瀏覽器接近網站設計過程
已發表: 2022-03-11“獻給那些瘋狂的人、不合群的人、叛逆者、麻煩製造者、方孔中的圓釘……那些以不同方式看待事物的人——他們不喜歡規則……你可以引用他們，不同意他們，讚美或讚美他們。誹謗他們，但你唯一不能做的就是忽視他們，因為他們改變了事情……” ——蘋果公司的Think Different活動，史蒂夫喬布斯，1997 年。
大多數時候，設計師仍在網站設計過程中使用傳統設計工具創建靜態屏幕模型。 但是一些設計師正在邁出一大步，繞過它們，直接編寫代碼，在瀏覽器中構建和調整設計，並實時測試他們的設計。 他們是瘋子、格格不入、叛逆者嗎？
通常，傳統的網站開發過程涉及多個階段，包括規劃、內容策略、設計、線框圖、原型設計、測試、開發、發布等。 但是在設計階段，是否有另一種方法可以產生“像素完美”的響應式網站設計並完全繞過設計工具？
隨著響應式設計的興起和使用中的各種設備（手機、平板電腦、筆記本電腦、台式機、手錶），保持一切一致變得更加困難——並且需要考慮更多移動部件，設計網站和界面的方法在改變。
儘管設計師不必成為專家級編碼員，但一種解決方案是讓設計師直接開始使用驅動網站的代碼。 只需一點 HTML 和 CSS 就可以編寫代碼的設計師會發現自己對任何團隊來說都是一筆巨大的財富，並且總體上擁有巨大的優勢。
為什麼？ 在參與具有所有復雜性的響應式網站設計項目時，設計師通常沒有時間跨 10 種不同的分辨率和視口創建一個組件（例如頁眉或頁腳）的靜態設計。 即使只為最流行的設備設計，他們仍然必須考慮具有不同縱橫比、屏幕密度和屏幕尺寸的 4-5 個屏幕。 至少可以說這不是一項小任務。
先用筆和紙解決網站設計挑戰
讓我們探索一種不同的網站設計方法和規劃過程。
第一階段從客戶問卷開始，從業務角度詢問一般項目目標、目標受眾、轉換策略、各種績效期望等。 這是在實際設計階段啟動之前完成的，以更好地了解客戶的需求和整個項目，從而提高生產效率。
下一步是編寫項目大綱，以確認摘要已被理解。 在您可能沒有太多經驗或專業知識的利基市場中開展項目時，這很有幫助。 將其稱為功能規範，但技術含量較低。
這有助於定義術語、關鍵字和流程。 根據項目的複雜性，執行多個場景和用戶流程是一個好主意——通常是入職流程、搜索和導航站點，或者如果它是電子商務站點，則執行“添加到購物車”和結帳流程。
線框圖和原型設計
原型設計是網站設計過程的下一個階段。 構建快速線框來討論頁面佈局、功能以及網站頁面在不同設備上的外觀是一個好的開始。 構建數十個不同模板和組件的線框並不需要太多時間。 可以從中創建一個簡單的網站原型，並且根據項目的複雜性，可以使用 InVision、Adobe XD、Balsamiq、Moqups 或 Axure 等原型製作工具。
情緒板和界面庫存
下一步是組建一個情緒板：設計師、客戶和其他利益相關者可能喜歡其他網站的東西的集合——佈局、外觀、顏色或字體、圖標、圖像等等。 這將有助於定義網站的整體外觀。 如果客戶有品牌風格指南，則應考慮並將其納入新的網站設計中。
一旦批准了各種工件——線框、原型、模型、情緒板等——做一個界面清單是個好主意。
界面清單是構成界面的各個部分的綜合集合。
布拉德弗羅斯特
如果從頭開始進行響應式網頁設計，那麼首先要寫下將構建項目的所有組件和元素。 一個無序列表就可以了，而且總比沒有好。 例如表格、按鈕、圖像、排版、媒體、表單、導航、組件等。
在瀏覽器中設計
“在瀏覽器中設計”是一個隨著響應式網頁設計的興起而流行的術語。 為了最大限度地減少在 Sketch 等設計程序上花費的時間，設計師們被敦促將設計階段轉移到瀏覽器中，並利用 CSS 進行佈局和造型。 這種網站設計方法被證明更有效，因為它減少了很多步驟。
通過專注於 HTML 模型，並使用 CSS“在瀏覽器中”測試設計理念，可以節省通常花費在其他設計工具（如 Sketch）中創建頁面靜態模型的時間。 對於設計人員來說，掌握一個好的代碼編輯器並提出一個好的瀏覽器刷新方法是一個好主意，這樣他們就可以實時看到變化。 例如，Sublime Text 和 Codekit 就是一個很好的組合。
HTML 和 CSS 以它們的結構，迫使你思考模式並讓你保持控制。 在構建可以輕鬆複製、複製和填充動態數據同時保持相同結構的 HTML 組件時，更容易考慮模塊化。 如果要創建特定修改，則必須明確定位該元素，或添加另一個 CSS 類。
當您設置標題樣式時，除非它們被覆蓋，否則它們將在整個站點中保持一致。 其他元素也是如此。 這種類型的思維迫使你標準化，將通用元素組合在一起，盡可能多地重用已經樣式化的元素，最重要的是，保持一切模塊化。
通過單個 CSS 聲明，您可以更改按鈕上的填充以獲得更好的觸摸目標，並直接在手機、平板電腦和台式機上進行測試。 這在 Photoshop 或 Sketch 中不容易做到，因為其他元素在佈局中不知道彼此，並且每次調整某些東西的大小時都必須重新組織對象。
想嘗試不同的標題配色方案嗎？ 通過僅使用幾行 CSS 代碼，所有 HTML 模板、所有設備和屏幕上的更改都立即可見。 當你有 20 個靜態模型時，這種靈活性是無法輕易模仿的。 當然，您可以在 Sketch 或 Adobe XD 中使用“符號”來表示可重用組件，但它們不如 CSS 通用。
在這個階段，需要做出幾個技術決策。 需要回答的問題是：
- 你會使用 CSS 預處理器嗎？ （推薦的）
- 您將使用哪種類型的響應式網格進行佈局？
- 您想使用的字體是否可以購買？ 客戶是否有購買高級網絡字體的預算，或者您會恢復使用可用的免費網絡字體嗎？
- 你會使用多色還是單色圖標？ 整個網站的大小會有所不同嗎？ 接下來，您是依賴自定義繪製的圖標，還是依賴現有的圖標包？ 您的圖標需要適應什麼尺寸？
字體和響應式網頁設計的問題
為響應式網頁設計項目選擇字體可能具有挑戰性。 有很多可能性，也有同樣多的陷阱。 由於該設計將在瀏覽器中使用，因此這是試用它們的最佳場所。 字體可讀性可能因大小、重量、顏色和渲染而異，因此通過直接在瀏覽器中試用字體，設計人員可以確保事情看起來正確，並滿足預期的期望。
有許多在線工具可用於選擇和測試字體以及嘗試字體組合。 在 Typetester 和 Typecast 上，可以找到並測試來自各種服務和代工廠的不同字體。 當使用特定字體訂閱服務（如 Typekit 或 Fonts.com）時，設計人員可以直接生成字體並在其頁面模板上進行測試。 使用新字體生成 Typekit 包既簡單又快速，您可以輕鬆查看特定字體將如何影響網頁的性能。
符合品牌風格的圖標
如果繪製自定義圖標，則需要定義大小、網格和样式。 例如，在 Illustrator 中工作時，每個畫板都代表一個圖標。 圖標可以很容易地從 Illustrator 導出為 SVG 或 PNG，以後可以通過 Icomoon 等服務轉換為圖標字體。 建議使用矢量圖標 (SVG)，因為矢量與分辨率無關，因此無需擔心它們在高清 (Retina) 屏幕上的顯示方式。
控製網站設計過程的樣式指南和 CSS
即使我們在瀏覽器中進行設計，使用數十個模板和組件，我們也可能會忘記使用某些東西的位置以及使用方式。 將所有組件的樣式指南構建為中央存儲庫是一個好主意。 通過將 UI 組件和元素組合到網頁中，將從本樣式指南構建特定的頁面模板。
UI 組件可以是分頁、產品列表、圖片庫、模式窗口、表單元素等，並用作模板的構建塊。 當需要測試構建特定的 UI 組件時，將所有內容保存在一個地方非常方便。
使用 CSS，將組件樣式分離到單獨的文件中是一種最佳實踐。 例如，分頁樣式將在_pagination.scss中，表單元素在_form.scss中，所有這些文件將與其他文件（變量、mixin 等）一起包含在單個 SCSS 文件中。
雖然style.scss可能由幾十個“小文件”組成，但當幾個人在同一個項目上工作時，如果將所有內容分成更小的塊，則更容易跟踪更改（無論是否使用源代碼控制）。 在網站設計項目投入生產後，繼續維護風格指南很重要，因為團隊需要跟踪每個網站組件。
使用樣式表——模塊化 CSS
從開發的角度來看，編寫模塊化 CSS 有很多方法。 最著名的是 SMACSS（CSS 的可擴展和模塊化架構）、BEM（塊、元素、修飾符）和 OOCSS（面向對象的 CSS）。 即使您最終開發了自己的方法，也有很多東西需要學習。 此時，您應該有一個很好的 UI 組件和網頁集合，這將使您能夠輕鬆地構建新的網頁。 您可以從樣式指南中復制和粘貼元素，並根據需要重新排列它們。
由於一切都是模塊化的，您不必擔心設計和代碼的一致性； 但不要忘記，如果您在系統範圍內調整 UI 組件，則需要使用更改更新樣式指南（或添加新組件）。 為了保持一切井井有條，最好使用某種模板/自動化方法來處理網頁，例如 Gulp 或 Grunt。
下一步是什麼？ 在瀏覽器中設計
現在，您擁有 UI 組件的中央存儲庫，記錄了每個元素以及從這些組件構建的網頁。 從這一點開始，設計師很可能不再需要打開他們最喜歡的設計工具，因為大部分“設計”將直接在代碼中完成，並在瀏覽器中預覽。
不太確定特定更改將如何影響設計？ 現在，您可以同時在不同的設備和瀏覽器上預覽您的設計，以查看標題上的字體如何更改，或者更改按鈕的大小和顏色將如何影響設計。
使用自定義 Web 字體時，添加更多字體權重將如何影響頁面加載性能？ 我們可以使用 WebPageTest 等服務測試正在進行的網頁性能，並對實際結果做出明智的決定。 我們絕對不能在 Photoshop 或 Sketch 中做到這一點。
在網站設計過程中，使用 HTML 和 CSS 以及在瀏覽器中工作可能並不適合每個設計師。 但如果設計師真的關心他們的作品在各種設備和屏幕尺寸上的外觀，他們需要確保它每次都完美無缺。 當在移動設備上的網絡瀏覽器中查看時，作為靜態設計模型看起來令人驚嘆的東西可能看起來不太理想。 精明的設計師應該在每個人都能在瀏覽器中看到它們的環境中構建和測試網頁設計。
進一步閱讀 Toptal 設計博客：
- 響應式設計——最佳實踐和注意事項
- 如何設計有效的登陸頁面
- 電子商務網站設計終極指南
- 網站重新設計的基礎——案例研究
- 設計的驅動力——網站重新設計案例研究