2014-08-16 分類: 網(wǎng)站建設(shè)
網(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圖象處理軟件模型(或其他形式的高保真譜曲)選擇。這些通常是基于一組初始的簡(jiǎn)單的要求或一對(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)受眾(基于市場(chǎng)研究、焦點(diǎn)小組、用戶角色,等等)。可交付成果:高水平的簡(jiǎn)介,設(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)建。可交付成果:站點(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)行可用性測(cè)試的能力的主要優(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í)踐通過詢問他們?cè)诓煌氐牟季滞评恚恢煤鸵粋€(gè)項(xiàng)目上工作的風(fēng)格。他們應(yīng)該能給你快速和簡(jiǎn)潔的答案?jì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ú)立頁面而不是讓他們?cè)诰W(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){字體大小:14px;}
另一個(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)樗麄兺ǔ1扰_(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://m.newbst.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)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容