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

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

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

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

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

網(wǎng)站標(biāo)題：網(wǎng)站制作成都：更好的設(shè)計網(wǎng)站的方法
文章分享：http://www.bm7419.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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)