網(wǎng)頁設計流程

網(wǎng)頁設計流程
網(wǎng)頁設計作為一種職業(yè)已經(jīng)發(fā)展在過去的10年里，很多。有效的工作流程和做法已經(jīng)出現(xiàn)，并已被證明是事實上的行業(yè)標準。然而，仍有一定的實踐，對網(wǎng)頁設計的早期遺跡，這是應該避免的。
這樣一個無效的和過時的做法是“三模型”的方法。在過去，這需要網(wǎng)站設計服務的公司都要求設計師提供三（通常）PS圖象處理軟件模型（或其他形式的高保真譜曲）選擇。這些通常是基于一組初始的簡單的要求或一對夫婦與客戶談判。這種方法的最終產(chǎn)品是基于個人偏好和主觀選擇的設計。在用戶的需求和實現(xiàn)企業(yè)目標的這種方式，就像在黑暗中拍攝。這個工作方式（請求從一個網(wǎng)頁設計師）應避免。
一個更好的方法來設計網(wǎng)站是迭代過程杰西杰姆斯加勒特在用戶設計的元素。它包括五個階段，每一個的基礎上作出的決定，做工作，在以前的步驟。

戰(zhàn)略、范圍、結(jié)構(gòu)、框架、風格：滿足網(wǎng)頁設計的五個階段。
包括這里我們有一個非常濃縮版的工作涉及的各個階段：
•戰(zhàn)略–定義關鍵業(yè)務目標的產(chǎn)品和平衡與用戶需求的目標受眾（基于市場研究、焦點小組、用戶角色，等等）?？山桓冻晒焊咚降暮喗椋O計團隊的要求，項目目標
•經(jīng)營范圍–記錄所需要的功能和所需要的內(nèi)容。還包括決定要建什么，什么不是，在當前的項目。交付：項目詳細規(guī)范
•結(jié)構(gòu)–信息架構(gòu)和交互設計。在這個階段，結(jié)構(gòu)的網(wǎng)站，其頁面，決定通過卡片分類和用戶的旅行地圖。對于應用程序，流程圖和狀態(tài)圖的創(chuàng)建?？山桓冻晒赫军c地圖、低保真原型或線框
•骨架–UI設計、信息設計和導航。隨著地方結(jié)構(gòu)，目的決定可以作出關于制定內(nèi)容，什么UI元素的使用，他們將如何工作。所有的導航元素應該在這一點上，實現(xiàn)與內(nèi)容添加到適當?shù)牡胤??？山桓冻晒喝δ軜訖C的網(wǎng)站或應用程序
•風格–應用視覺處理和品牌的風格指南的工作產(chǎn)品。一個完整的功能和布局合理的網(wǎng)站，它很容易將企業(yè)或產(chǎn)品品牌，使其視覺處理的目標選擇。
這是一個迭代的過程，每一步都會經(jīng)過幾個周期，直到它的批準。在每一步的過程中，發(fā)現(xiàn)的缺陷也有可能，或提高現(xiàn)有的方式，改變交付之前反映。對每一步進行可用性測試的能力的主要優(yōu)點是避免了時間和預算的想法，后來被證明是根本錯誤的或不理想的大承諾。

網(wǎng)頁設計師深諳現(xiàn)代實踐和流程應該熟悉的好工具，原型和線框圖如uxpin，Balsamiq或Axure。有些人喜歡在PS圖象處理軟件上創(chuàng)建，煙花或InDesign，他人實施直接進入他們喜歡自助或基礎流行的CSS框架。后者的優(yōu)點是，這些早期的原型，后來演變?yōu)閷嶋H生產(chǎn)模板。這消除了死胡同的可交付成果和減少生產(chǎn)時間。

最后，本文描述的方法，以及類似的方法，導致更好的了解、研究和數(shù)據(jù)驅(qū)動的選擇，在整個設計過程中使用較少的主觀決定。這樣，你可以很容易地識別設計師實踐通過詢問他們在不同元素的布局推理，位置和一個項目上工作的風格。他們應該能給你快速和簡潔的答案備份了事實和研究結(jié)果。

響應網(wǎng)頁設計過程
這些天，與來自不同能力的移動設備的互聯(lián)網(wǎng)流量的很大一部分，這是至關重要的，任何新的網(wǎng)站可以在盡可能多的設備上。并適用于無數(shù)的屏幕和設備的網(wǎng)站設計開發(fā)過程通常被稱為“響應式網(wǎng)頁設計”或“適應性設計”（也就是指在響應設計的具體方法）。
今天是否有響應網(wǎng)站的問題不再是相關的；清晰地回答“是的！“即使谷歌不適合移動設備背后的那些網(wǎng)站。真正的問題是如何進行成功有效的多設備戰(zhàn)略沒有超出預算或丟失的移動用戶體驗的角度。

任何有經(jīng)驗的網(wǎng)頁設計師應該在做一個網(wǎng)站響應技術貫通。為了幫助您為您的項目找到比賽，我們已經(jīng)準備了幾個問題和指導方針。還有，必須解決在設計和響應的網(wǎng)站發(fā)展的重要因素。

跨設備的內(nèi)容策略
響應式設計不僅僅是擬合所有內(nèi)容到任何尺寸的屏幕；設計師必須考慮環(huán)境中的每個設備可隨著它的能力。

由于移動革命，網(wǎng)頁設計師必須考慮許多不同的軟件和硬件平臺。
有時，跳過復制某件在移動設備上，使用替代復制或不同的圖像資產(chǎn)，因為一個網(wǎng)站需要不同的屏幕之間的導航變化。其他時候，內(nèi)容或特定的功能件應在移動設備上啟用，如“點擊通話”的按鈕，提供基于用戶位置的相互作用或?qū)μ囟ㄔO備的使用“應用程序下載”按鈕。
問：我們要準備不同的內(nèi)容或資產(chǎn)不同的裝置？
有時，是的。這是的情況下，這樣的改變是必需的：
•最常見的圖像必須出現(xiàn)不同的小肖像屏幕；一個寬的寬高比圖像桌面網(wǎng)站的旗幟是偉大的但在直立的智能手機屏幕幾乎無法使用。

•在一個大的演示視頻可以在電腦屏幕上是巨大的，它可以在移動設備上的圖像和文字代替，如果你期望從交通設備與移動互聯(lián)網(wǎng)連接特別慢。

•復制一些碎片可能會被忽略（或重寫）為小屏幕設備的用戶可能不會去讀它。
•行動控制一定的電話可能會改變以更好地適應設備；例如，“發(fā)送消息”電腦可能是由“電話”手機取代。

•在小屏幕上，復雜的圖表，圖表和長長的桌子還是留鏈接獨立頁面而不是讓他們在網(wǎng)頁的內(nèi)容流。另一個想法是以不同的方式呈現(xiàn)相同的數(shù)據(jù)，或者只顯示最重要的部分。
•導航應該反思，甚至單獨設計，為不同的屏幕尺寸。這不一定是它的可視化，但往往有不同的結(jié)構(gòu)，如一個扁平的鏈接列表而不是下拉菜單/下拉菜單，或通過顯示更少的深度在更復雜的菜單在特定設備上。

在不同的屏幕布局優(yōu)化
而計算機和大型片橫握，提供很多的水平空間奠定了網(wǎng)站的內(nèi)容，小屏幕讓你有并排放置的元素更少的空間。這就是為什么網(wǎng)站在智能手機上通常設計有一個單欄布局。這是一個主要的問題在設計網(wǎng)站時，應該如何回應：頁面布局變化。
問：你如何確保內(nèi)容布局看起來不錯，在不同的設備？你用什么技術實現(xiàn)的？
一些“斷點”應該是基于流行的設備尺寸的定義、類型和語境。這些預定義的屏幕寬度（較少的屏幕高度），頁面布局的變化，例如，從三列，兩然后一列。目前，最受歡迎的寬度斷點：

• 1920：電視屏幕和大型臺式顯示器
• 1280至1920：筆記本電腦的絕大部分，許多現(xiàn)代臺式電腦顯示器以及大片（通常10”了）當在風景模式舉行（展開）
• 800至1280：在景觀模式小藥片以及年齡較大的或較小的顯示器
• 480至800：在肖像模式片（舉行的垂直）和橫向模式的智能手機
• 上480：在肖像模式智能手機
使用基于屏幕尺寸不同的風格“媒體使用CSS代碼，例如，改變一個段落的字體大小為14像素只與屏幕寬度大于480像素的設備，但小于800，下列規(guī)則應用：
CSS media（最小寬度：480px）和（大寬度：799px）{字體大?。?4px；}

另一個重要的考慮是把HTML代碼以同樣的順序需要顯示在移動設備上。一般來說，書寫干凈，良好的結(jié)構(gòu)和語義正確的HTML代碼，用于響應網(wǎng)站的順利實施有很長的路。

對不同設備的用戶界面交互
由于不同的設備不僅在屏幕尺寸也在輸入方法上，確保每個UI元素的工作預期在每個設備類型的上下文。這意味著，下拉菜單應該接受的電腦屏幕，但在智能手機和平板電腦，用戶希望導航方法更類似于那些在移動應用程序。
問：如何確保UI作品，感覺自然，在不同的設備上做什么？一對夫婦的名字，不適合特定設備的交互模式。
不同的設備有不同的功能，用戶希望在他們的設備功能類似的應用程序在他們的設備的網(wǎng)站。

桌面和移動用戶界面之間最重要的區(qū)別是，臺式機通常用鼠標或觸控板和一個快速和易于使用的鍵盤控制，而移動設備依靠觸摸屏沒有指針與屏幕上的鍵盤，常常是一個麻煩來使用。另一個考慮是，設備沒有指針也缺乏懸停狀態(tài)這是經(jīng)常用來觸發(fā)網(wǎng)頁上的某些行動。兩個輸入方法，指針和觸摸屏，同時做不同的動作更容易（自然）或更困難和更慢。例如，在屏幕上移動物品或?qū)⒏菀子|摸屏（因此，將避免在臺式機），同時點擊小控件與鼠標指針容易得多（因此UI控件應在觸摸屏大）。

資產(chǎn)優(yōu)化基于屏幕尺寸
即使同樣的資產(chǎn)可以為不同的設備并不意味著相同的圖像的大小或視頻質(zhì)量將優(yōu)化。減少加載時間，尤其是在移動互聯(lián)網(wǎng)連接，網(wǎng)頁設計師應該知道的資產(chǎn)，他們?yōu)椴煌脑O備。
例如，一個寬1920像素的背景圖片400 KB，這是罰款的臺式電腦，將多余的（質(zhì)量方面）和緩慢的下載（文件大小明智）在智能手機。所以，有一個縮小版的形象很好，這將是如果用戶的屏幕足夠小。你不想讓用戶下載的版本而S /他只看到一個。
問：它如果你提供相同的資產(chǎn)，無論屏幕大小有關系嗎？在這方面有圖像和背景之間有什么不同嗎？

這很重要，至少對于較大的圖像文件，有移動設備和桌面屏幕的不同版本。較小的同一幅圖像的副本可提供給移動用戶減少加載時間。圖像的大小，但不可大大降低（如果可行的話）的移動設備的屏幕密度，因為他們通常比臺式電腦顯示器高很多。決定應在逐案基礎上由于一些圖像可以沒有太多的視覺沖擊的同時，對其他重要的是保留細節(jié)的尺寸減小。

在技術層面上的，之間有很大的差異（背景圖像中定義的CSS）和內(nèi)容（包括圖片在HTML圖像文件）。背景可以很容易地被分別設置在不同的CSS媒體查詢，所以每個版本只提供如果用戶顯示與某個查詢；其他不是從Web服務器下載。圖片在HTML中，仍然沒有內(nèi)置的工作和支持服務方式根據(jù)用戶的屏幕尺寸不同的文件。不同的技術來實現(xiàn)，例如使用polyfill腳本，模擬即將到來的行為<圖片>元素，或其他腳本，有自己的習慣，或者使用CSS背景圖像顯示。
一般來說，CSS的方法，但是，應避免因為CSS背景圖像沒有任何語義是裝飾。此外，它能描述的缺乏性頭銜和ALT屬性： 標簽

網(wǎng)站名稱：網(wǎng)頁設計流程
轉(zhuǎn)載源于：http://www.muchs.cn/news/20230.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、品牌網(wǎng)站建設、自適應網(wǎng)站、品牌網(wǎng)站制作、云服務器、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)