網(wǎng)站制作成都:更好的設(shè)計網(wǎng)站的方法

網(wǎng)頁設(shè)計過程
網(wǎng)頁設(shè)計作為一門專業(yè)已經(jīng)發(fā)展了近10年，很多。有效的工作流程和實踐已經(jīng)出現(xiàn)，并證明是事實上的行業(yè)標準。但是，仍然有一些實踐可以避免網(wǎng)頁設(shè)計的早期遺存。
這種無效和過時的方法是三模型方法。在過去，要求網(wǎng)站設(shè)計服務(wù)的公司要求設(shè)計師提供三個（通常）PS圖像處理軟件模型（或其他形式的高保真度評分）選擇。這些選擇通?；谝唤M初始的簡單要求或與一個客戶進行協(xié)商。T.這種方法的最終產(chǎn)品是基于個人喜好和主觀選擇的設(shè)計，就像在黑暗中拍攝，以滿足用戶需求和企業(yè)目標的方式進行拍攝，應(yīng)該避免這種工作方式（向網(wǎng)頁設(shè)計師提出要求）。
一個更好的設(shè)計網(wǎng)站的方法是重復使用Jesse James Garrett的用戶設(shè)計元素。它由五個階段組成，每個階段都基于所做的決定、完成的工作以及前面的步驟。
策略、范圍、結(jié)構(gòu)、框架和風格：網(wǎng)頁設(shè)計的五個階段。
包括這里，我們有一個非常濃縮的版本，涉及到各個階段：
業(yè)務(wù)范圍-記錄所需的功能和內(nèi)容。它還包括決定在當前項目中構(gòu)建什么和不構(gòu)建什么。交付：項目規(guī)范
結(jié)構(gòu)-信息架構(gòu)和交互設(shè)計。在此階段，網(wǎng)站及其頁面的結(jié)構(gòu)通過卡片分類和用戶旅行地圖確定。對于應(yīng)用程序，創(chuàng)建流程圖和狀態(tài)圖?？山桓督Y(jié)果：網(wǎng)站地圖、低保真原型或線框
框架-UI設(shè)計、信息設(shè)計和導航。根據(jù)本地結(jié)構(gòu)，目的決定開發(fā)什么內(nèi)容、使用什么UI元素以及它們將如何工作。此時應(yīng)添加所有導航元素，并將實現(xiàn)和內(nèi)容添加到適當?shù)奈恢??？山桓督Y(jié)果：網(wǎng)站或應(yīng)用程序H全功能模型
風格――運用視覺加工和品牌風格引導的工作產(chǎn)品。網(wǎng)站功能齊全，布局合理，容易對企業(yè)或產(chǎn)品進行品牌化，使其視覺加工的目標選擇。
這是一個反復的過程，每一步都要經(jīng)過幾個周期，直到它被批準為止。在過程的每一步中，也有可能發(fā)現(xiàn)缺陷，或者改進現(xiàn)有的方法，在交付前改變反射。在每一步測試可用性的能力的主要優(yōu)勢是它避免了時間和預算的概念，這是后來證明是根本錯誤或不令人滿意的。
網(wǎng)頁設(shè)計師精通現(xiàn)代實踐和流程應(yīng)該熟悉的工具、原型和線框，如uxpin、balsamiq或axure。有些人喜歡在ps圖像處理軟件上創(chuàng)建、焰火或InDesign，另一些人則直接訪問他們喜歡自助或流行的css框架。advanta后者的通用電氣公司認為，這些早期的原型后來演變?yōu)閷嶋H的生產(chǎn)模板，這消除了死區(qū)交付，并縮短了生產(chǎn)時間。
最后，本文中描述的方法以及類似的方法可以更好地理解、研究和數(shù)據(jù)驅(qū)動的選網(wǎng)站制作成都擇，在整個設(shè)計過程中使用較少的主觀決策。這樣，您可以通過詢問不同元素、位置和樣式的布局推理來輕松地識別設(shè)計師實踐。做一個項目。他們應(yīng)該能夠給你快速而簡明的答案，支持事實和研究結(jié)果。
對網(wǎng)頁設(shè)計過程的響應(yīng)
如今，任何一個新的網(wǎng)站都能在盡可能多的設(shè)備上被訪問，這在很大程度上是至關(guān)重要的，因為網(wǎng)絡(luò)流量來自具有不同功能的移動設(shè)備。網(wǎng)站設(shè)計針對眾多屏幕和設(shè)備的開發(fā)過程通常被稱為響應(yīng)式網(wǎng)頁設(shè)計或自適應(yīng)設(shè)計（即響應(yīng)設(shè)計）。
今天網(wǎng)站上對這個問題是否有回應(yīng)已經(jīng)無關(guān)緊要了；回答清楚，是的！即使谷歌不適合那些移動設(shè)備背后的網(wǎng)站，真正的問題是如何在不超出預算或失去移動用戶體驗視角的情況下實施成功有效的多設(shè)備策略。
任何有經(jīng)驗的網(wǎng)頁設(shè)計師都應(yīng)該在構(gòu)建網(wǎng)頁響應(yīng)技術(shù)的過程中。為了幫助您找到項目的好競爭對手，我們準備了幾個問題和指導方針。此外，在設(shè)計和響應(yīng)網(wǎng)站開發(fā)的重要因素必須得到解決。
跨設(shè)備的內(nèi)容策略
響應(yīng)式設(shè)計不僅僅是將所有東西都安裝到任何尺寸的屏幕上；設(shè)計師必須考慮環(huán)境中每個設(shè)備的跟蹤能力。
由于移動革命，網(wǎng)頁設(shè)計者不得不考慮許多不同的軟件和硬件平臺。
有時，最好跳過移動設(shè)備上的復制，使用替代復制或不同的圖像資產(chǎn)，因為網(wǎng)站需要在不同屏幕之間進行導航更改。否則，應(yīng)在移動設(shè)備上啟用內(nèi)容或特定功能，例如單擊呼叫按鈕，提供基于用戶位置的交互?；蚴褂锰囟ㄔO(shè)備下載應(yīng)用程序的按鈕。

問：我們是否準備不同內(nèi)容或資產(chǎn)的設(shè)備

有時，是的。在這種情況下，這種改變是必要的：
最常見的圖像必須出現(xiàn)在不同的小屏幕上；寬寬寬高比圖像桌面網(wǎng)站的橫幅很好，但直立的智能手機屏幕實際上是不可用的。
在計算機屏幕上的大型演示視頻中，如果您希望流量設(shè)備與移動互聯(lián)網(wǎng)的連接速度特別慢，則可以用移動設(shè)備上的圖像和文本來代替。
復制某些片段可能會被忽略（或重寫），而小屏幕設(shè)備的用戶可能無法讀取。
某些電話的移動控制可能會被改變以更好地網(wǎng)站制作成都適應(yīng)設(shè)備；例如，信息計算機可能會被電話取代。
在小屏幕上，復雜的圖表、圖表和長表格仍然保留到單獨頁面的鏈接，而不是允許它們在頁面上傳輸內(nèi)容。另一個想法是以不同的方式呈現(xiàn)相同的數(shù)據(jù)，或者只顯示最重要的部分。
導航應(yīng)該重新考慮，甚至是單獨設(shè)計，以適應(yīng)不同的屏幕大小。這不一定是它的可視化效果，但通常具有不同的結(jié)構(gòu)，例如鏈接的簡單列表而不是下拉菜單/下拉菜單，或者通過在特定設(shè)備上更復雜的菜單上顯示較少的深度。
不同屏幕布局中的優(yōu)化
電腦和大型膠片水平握把，提供了大量的水平空間來放置網(wǎng)站的內(nèi)容，小屏幕讓你有較少的空間來放置并列的元素。這就是為什么網(wǎng)站在智能手機上通常只有一個單列布局。這是設(shè)計網(wǎng)站時的一個主要問題：如何應(yīng)對頁面布局的變化。
問：如何確保內(nèi)容布局在不同的設(shè)備上看起來不錯你用什么技術(shù)來實現(xiàn)它
一些斷點應(yīng)該基于流行的設(shè)備大小定義、類型和上下文。這些預定義的屏幕寬度（屏幕高度較少）、頁面布局更改，例如，從三列、兩列到一列。目前，最流行的寬度斷點是：
1920：電視屏幕和大型桌面顯示器
1280-1920年：絕大多數(shù)的筆記本電腦、許多現(xiàn)代臺式電腦顯示器和大片（通常是10臺）都是以景觀模式保存（展開）的。
800-1280：橫向模式的小型平板電腦和老式或小型顯示器
480-800：智能手機處于縱向（垂直）和橫向模式
前480名：縱向模式的智能手機
CSS代碼用于基于屏幕大小的不同樣式的媒體。例如，將段落的字體大小更改為14像素僅與屏幕寬度大于480像素但小于800像素的設(shè)備相關(guān)。以下規(guī)則適用：
CSS媒體（最小寬度：480px）和（大寬度：799px）字體大小：14px；
另一個重要的考慮是，HTML代碼需要以相同的順序顯示在移動設(shè)備上。一般來說，編寫干凈、結(jié)構(gòu)良好和語義正確的HTML代碼對于網(wǎng)站的順利實現(xiàn)有很長的路要走。
不同設(shè)備的用戶界面交互
由于不同的設(shè)網(wǎng)站制作成都備不僅在屏幕大小上，而且在輸入方法上，請確保每個UI元素的工作預期在每個設(shè)備類型的上下文中進行。這意味著下拉菜單應(yīng)接受計算機屏幕，但在智能手機和平板電腦上，用戶希望導航方法更類似于移動應(yīng)用程序中使用的方法。
問題：如何確保UI的工作感覺自然，以及在不同的設(shè)備上做什么一對夫婦的名字不適合特定設(shè)備的交互模式。
不同的設(shè)備有不同的功能，用戶希望在其設(shè)備的網(wǎng)站上使用類似的應(yīng)用程序。
臺式機和移動用戶界面之間最重要的區(qū)別在于，臺式機通常由鼠標或觸摸板以及快速且易于使用的鍵盤控制，而移動設(shè)備則依賴觸摸屏，屏幕上沒有指針和鍵盤，這通常是一個很難使用的問題。另一個考慮因素是，設(shè)備缺少POIN鼠標和懸停狀態(tài)，通常用于觸發(fā)網(wǎng)頁上的某些操作。指針和觸摸屏這兩種輸入方法更容易（自然）或更難，同時執(zhí)行不同操作的速度也更慢。例如，移動屏幕上的對象可能使觸摸屏更容易（從而避免桌面），同時單擊S商場控制和鼠標指針更容易（所以UI控制應(yīng)該在觸摸屏上更大）。
基于屏幕大小的資產(chǎn)優(yōu)化
即使相同的資產(chǎn)可以用于不同的設(shè)備，也不意味著相同的圖像大小或視頻質(zhì)量將是優(yōu)化。減少加載時間，特別是對于移動互聯(lián)網(wǎng)連接，網(wǎng)頁設(shè)計者應(yīng)該知道不同設(shè)備的資產(chǎn)。
例如，在智能手機中，寬度為1920像素（400kb）的背景圖片是一臺很好的臺式計算機，它將是冗余的（質(zhì)量）和緩慢的下載（文件大小方面）。因此，如果用戶的屏幕足夠小，最好使用較小的圖像版本。您不希望用戶下載版本和只看到一個。
問題：如果您提供相同的資產(chǎn)，屏幕大小是否重要圖像和背景在這方面有什么區(qū)別嗎
這一點很重要，至少對于具有不同版本的移動設(shè)備和桌面屏幕的較大圖像文件來說是如此?？梢韵蛞苿佑脩籼峁┫嗤瑘D像的較小副本，以減少加載時間。圖像的大小，但不包括移動設(shè)備的屏幕密度（如果可行），因為它們通常比桌面計算機顯示器高很多。應(yīng)根據(jù)具體情況作出決定，因為某些圖像可能不會同時產(chǎn)生太大的視覺影響，因此保留尺寸減小的細節(jié)非常重要。
在技術(shù)層面上，有很大的差異（在后臺圖片中定義的css）和內(nèi)容（包括在html圖片文件中的圖片），在不同的css媒體查詢中可以很容易地單獨設(shè)置后臺，因此每個版本只在用戶顯示一個查詢時提供，其他的不從web服務(wù)器下載。html sti中的圖片根據(jù)用戶的屏幕大小，ll沒有內(nèi)置的工作和支持服務(wù)。實現(xiàn)了不同的技術(shù)，例如使用polyfill腳本、模擬即將出現(xiàn)的行為元素或其他腳本、有自己的習慣或使用CSS背景圖像顯示。
但是，一般來說，應(yīng)該避免使用CSS方法，因為CSS背景圖像的修飾沒有任何語義。此外，它還可以描述缺少標題和alt屬性：標記

網(wǎng)站標題：網(wǎng)站制作成都：更好的設(shè)計網(wǎng)站的方法
文章分享：http://jinyejixie.com/news18/220118.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站制作等

廣告

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