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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這很重要，至少對(duì)于較大的圖像文件，有移動(dòng)設(shè)備和桌面屏幕的不同版本。較小的同一幅圖像的副本可提供給移動(dòng)用戶減少加載時(shí)間。圖像的大小，但不可大大降低（如果可行的話）的移動(dòng)設(shè)備的屏幕密度，因?yàn)樗麄兺ǔ１扰_(tái)式電腦顯示器高很多。決定應(yīng)在逐案基礎(chǔ)上由于一些圖像可以沒有太多的視覺沖擊的同時(shí)，對(duì)其他重要的是保留細(xì)節(jié)的尺寸減小。

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

網(wǎng)站名稱：網(wǎng)頁設(shè)計(jì)流程
轉(zhuǎn)載源于：http://jinyejixie.com/news/20230.html

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

廣告

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