版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認(rèn)領(lǐng)
文檔簡介
引子我們知道,一篇論文的產(chǎn)生,大體經(jīng)過了如下過程:選題、搜集資料、論證、擬定大綱、構(gòu)建框架、撰寫潤色、定稿、發(fā)表。我們做網(wǎng)站實質(zhì)上也是一樣的過程。網(wǎng)站建設(shè)是一個大課題,Boss選好了題,全公司都在為這個“論文”而努力。(此處省略1萬字。)具體到產(chǎn)品設(shè)計呢?情況更復(fù)雜,面對的不僅是整個網(wǎng)站這個大課題,還有各個欄目和平臺這些小論文,千頭萬緒。運營部(包括技術(shù)部)是具體撰寫論文的執(zhí)筆者,大論文的選題Boss早就定下了,從一路的修改、重構(gòu),到其他的小論文,從擬定大綱到發(fā)表,我們幾乎是全程參與,責(zé)任重大呀。我們面對的有用戶、Boss、業(yè)務(wù)部、資源部、客服部以及本部門等各種途徑提交過來的各種需求(選題),經(jīng)過對需求的整理分析、重要性排序、內(nèi)容的布局、流程規(guī)劃、交互和視覺設(shè)計等一系列過程,最終展現(xiàn)給用戶一個完整的網(wǎng)站。我們是一個團隊,既然是團隊,那就會有分工。那策劃組是做什么的呢?我講不全,以后有空整理出來再講,今天只講與我天天在做的一項簡單工作有關(guān)的東西……網(wǎng)頁線框圖
第一章了解線框圖1.1線框圖簡義(Wireframe)線框圖,又有提法是原型、框架圖,它是網(wǎng)站設(shè)計方案中的重要組成部分,是網(wǎng)站策劃師、網(wǎng)絡(luò)產(chǎn)品經(jīng)理的最后交付文檔,通常的呈現(xiàn)設(shè)計是最直觀有效的。我們雖然是用WORD畫的,雖然粗糙,但還是符合直觀有效的。1.2線框圖的本質(zhì)是信息架構(gòu)的表象。
信息架構(gòu)代表的是內(nèi)容的層次結(jié)構(gòu),而線框圖則是承載內(nèi)容的立體框架。根據(jù)需要,線框圖可能是一個獨立頁面或一整套頁面序列:當(dāng)針對中小型項目時,可能只需要首頁以及關(guān)鍵頁面的設(shè)計;針對復(fù)雜項目和大規(guī)模的團隊協(xié)作,則需要一系列相互關(guān)聯(lián)的線框圖,并且包含交互設(shè)計部分,比如我們正在做的事情。第一章了解線框圖1.3確定頁面邏輯架構(gòu)
《畫好線框圖的20個步驟》中有一句話“線框圖是計劃中的第一步也是最重要的一步”,做過的人都知道這是不對的。線框圖肯定不是計劃中的第一步,在沒有確定頁面中“到底有什么”之前,根本無從下手去設(shè)計;確定線框圖的藍(lán)圖不是靠設(shè)計者拍腦門,而是基于對需求和內(nèi)容分析之后的信息架構(gòu)設(shè)計,這個可以參考《從概念設(shè)計到信息架構(gòu)》一文。第一章了解線框圖1.3.1所謂頁面邏輯框架
所謂頁面邏輯框架是在整個網(wǎng)站信息架構(gòu)確立的基礎(chǔ)上,具體描述某個頁面:都包含什么元素;這些元素的權(quán)重;頁面的大概形式。頁面邏輯框架可以用邏輯表和邏輯圖兩種形式交付,可以單獨采用一種形式,也可以同時提交兩者。
邏輯表邏輯圖第一章了解線框圖1.3.2項目的頁面列表
確定各個頁面的邏輯結(jié)構(gòu)是進行頁面線框圖的設(shè)計前提,也是界面設(shè)計、視覺設(shè)計呈現(xiàn)的基礎(chǔ);在著手設(shè)計線框圖之前最好能建立一個《項目的頁面列表》,記錄整個項目需要多少張線框圖的支持,每張線框圖的標(biāo)號和使用模板的情況,如果時間充裕,甚至可以給每張線框圖一個簡潔的描述。這個《項目的頁面列表》對衡量整個設(shè)計的工作量、把控進度和工作重點非常有幫助。第一章了解線框圖1.4低保真還是高保真
線框圖的細(xì)節(jié)要逼真到何種程度,要根據(jù)執(zhí)行團隊的實際情況來決定。一般來說,線框圖的細(xì)節(jié)越逼真,執(zhí)行越流暢,但是給視覺設(shè)計師的發(fā)揮空間越?。幌喾?,線框圖越是粗略,對團隊配合的要求越高,視覺設(shè)計師發(fā)揮的空間越大。就我們來說,我覺得還是盡量做細(xì)的好,這樣一來將更多問題解決在設(shè)計前期,二來也可以減少設(shè)計師自主發(fā)揮時引起的又一輪論證,延長工期。依照與最終產(chǎn)品的接近程度,線框圖分為低保真和高保真兩類。
低保真原型(線框圖)通常包括:頁面的基本布局,元素的大概位置,交互的基本形式,表單項。
第一章了解線框圖1.4低保真還是高保真
高保真原型(線框圖)通常包括:精確到像素的頁面布局,輔助設(shè)計元素的數(shù)量和位置,圖片格式尺寸,屏幕劃分,超級鏈接的標(biāo)示,帶時間軸的FLASH關(guān)鍵幀,每個交互步驟的界面變化,表單項說明,具體文案。
高保真的原型,在提交的時候會更具說服力。但缺點也同樣明顯,同樣一個原型需要投入更多的時間,一旦設(shè)計變更投入的時間就更多;而且在項目前期,一般很難有充裕的時間做一個高保真的原型,所以在整個設(shè)計流程中的應(yīng)用也有局限。
題外話,能做高保真原型的在我看來是高手了,應(yīng)該去做設(shè)計師,做線框圖實在是大材小用了。高保真原型更多情況下是商業(yè)建站的時候用到。如果只是用于內(nèi)部溝通、檢驗交互問題的話,視覺的保真度可以退而求其次,以交互的保真度作為主要維度。應(yīng)該追求速度和數(shù)量,盡可能在產(chǎn)品早期多嘗試,多個方案,以求發(fā)現(xiàn)新想法并降低項目后期風(fēng)險。
對于三兩個人配合的微型項目(比如中小企業(yè)網(wǎng)站)使用低保真原型配合口頭溝通就可以解決實際的問題;對于復(fù)雜一些的項目,更推薦以《低保真和高保真模型混搭》的模式開展工作。
小結(jié)確定了在開始設(shè)計線框圖之前,整個項目及參與團隊需要完成的工作,包括了需求和內(nèi)容的分析。在了解一共有多少頁面,每個頁面都包含什么內(nèi)容,那些內(nèi)容是可以復(fù)用的……等等這些問題之后,細(xì)致梳理分析確定各頁面要素,那么就可以開始具體的線框圖設(shè)計。第二章如何設(shè)計線框圖
在需求和內(nèi)容分析之后就要開始設(shè)計線框圖。無論是設(shè)計低保真草稿還是高保真的模擬原型,線框圖都是從基本的布局開始;良好的布局是順暢視覺流程的開始,同時也奠定了最終訪問效果的基調(diào);布局是一個畫地為牢的過程,什么東西放在哪里一旦基本確定,界面就大體確定了;設(shè)置條條框框并不是為了限制界面設(shè)計師的發(fā)揮,而是要達(dá)到頁面之間的協(xié)調(diào)和整個網(wǎng)站的統(tǒng)一。
第二章如何設(shè)計線框圖
2.1分析估算屏幕依照頁面邏輯架構(gòu),頁面中有多少元素,每種元素要占用多大的屏幕面積,這是一個非常復(fù)雜的問題。引入一個“標(biāo)準(zhǔn)屏幕”的概念,即常用分辨率中最小寬度和高度尺寸的乘積。在這里可能有若干種不同的聲音,在寬屏顯示器越來越流行的今天,網(wǎng)站依然要關(guān)注那些使用4:3比例顯示器的人群,因此,一個相對“保守”的設(shè)計是把“800pix×600pix”作為標(biāo)準(zhǔn)屏幕尺寸。當(dāng)然還有一種相對“大膽”的設(shè)計是以“1024pix×768pix”作為標(biāo)準(zhǔn)屏幕尺寸。第二章如何設(shè)計線框圖
第二章如何設(shè)計線框圖
雖然在設(shè)計低保真時只需要進行粗略的計算,但是如果有時間,還是推薦將所有元素可能占據(jù)的屏幕空間一一列出。最簡便的方法是,保存其他網(wǎng)站上類似元素的截圖,估算它們占用的屏幕面積。這個估算不必十分精準(zhǔn),只需要簡略的進行估計就可以了,畢竟線框圖設(shè)計不是做精確的數(shù)學(xué)統(tǒng)計。第二章如何設(shè)計線框圖
2.2內(nèi)容分塊
“使用縱欄分隔內(nèi)容能夠獲得更靈活的頁面設(shè)計”,看到這句話,那些頁面架構(gòu)師和前端開發(fā)人員都心領(lǐng)神會。眾所周知,Web頁面是一個在縱向無限伸展的巨大創(chuàng)作介質(zhì),這就是為什么鼠標(biāo)要設(shè)置中間的滾輪。要是非要抬杠,Web頁面也可以向橫向伸展的,這樣的網(wǎng)站的確有,但不符合用戶的瀏覽習(xí)慣。第二章如何設(shè)計線框圖
簡單頁面,完全可以不必分欄。復(fù)雜頁面,通常需要有一個橫欄放置Logo等內(nèi)容,然后將頁面分隔成若干的縱欄,便于對信息進行分塊梳理;縱欄通常有兩欄式、三欄式、四欄式,在極其特殊的情況下可能用到五欄式,如果欄目再多,那樣每個縱欄分配的屏幕資源就極其有限了;最后還可以加上給版權(quán)等元素信息用的底欄。在進行分欄的過程中,一定要給每個欄命名,這個命名可以在心里默念,而不必寫在線框圖上。第二章如何設(shè)計線框圖
內(nèi)容分塊的意義將同類內(nèi)容集合在一起,在頁面中規(guī)劃對應(yīng)區(qū)域的好處非常明顯:A.對于設(shè)計者,能夠在增加元素的時,明確的按圖索驥B.對于用戶,能夠形成一定的瀏覽習(xí)慣,知道去哪里找到自己想要的東西(頁面功能)C.對視覺設(shè)計,能夠體現(xiàn)“格式塔視覺原理”中的貼近關(guān)系第二章如何設(shè)計線框圖
內(nèi)容分塊通常包含這樣四個大分類:
A.頁面識別(Page_ID):包含商標(biāo)、標(biāo)語、頁面標(biāo)題、廣告詞、版權(quán)信息等B.導(dǎo)航系統(tǒng)(Navi):導(dǎo)航條、面包屑C.交互工具(Tools):搜索、登錄、功能區(qū)、友情鏈接等D.內(nèi)容(Content):內(nèi)容的正文、列表、摘要第二章如何設(shè)計線框圖
2.3向內(nèi)容分塊填充元素
在完成分欄和內(nèi)容區(qū)塊劃分的基礎(chǔ)上,已經(jīng)可以把頁面邏輯框架中的元素填充到線框圖當(dāng)中去了。推薦先以一個項目中最復(fù)雜的頁面進行填充,這樣能夠?qū)ζ渌撁嬷械姆謾诓缓侠磉M行及時的調(diào)整。低保真模型是高保真模型的基礎(chǔ),千萬不要一次把細(xì)節(jié)描繪完美,向內(nèi)容分塊填充元素的過程就是低保真線框圖描繪的過程,具體操作如下:第二章如何設(shè)計線框圖
A.把每一個元素建立一個單獨的組件,這個組件可以很簡單的用一個方塊表示B.每個組件都要有一個獨立的名字,雖然在線框圖完成之后,這些個名字可以刪去,但是一定要進行命名C.把元素按照分類先放置到內(nèi)容區(qū)塊中D.元素放置過程中以縱向“自上而下、從左到右”的排列“從重要到普通”的權(quán)重第二章如何設(shè)計線框圖
將所有的元素放置到對應(yīng)的區(qū)塊后,一個簡單的線框圖已經(jīng)具有了雛形,當(dāng)然,即便是生成低保真原型,這也僅僅是網(wǎng)頁設(shè)計的一個開始而已。小結(jié)線框圖的本質(zhì)是圖,是一種建立在“視覺為先導(dǎo)”理念上的Web頁面勾勒形式。線框圖產(chǎn)生原因是:大規(guī)模團隊協(xié)作中的信息不對稱。試想,如果視覺設(shè)計師懂得人機交互原理,如果交互工程師熟練掌握Html語言,如果頁面架構(gòu)師深入理解產(chǎn)品策略,如果產(chǎn)品經(jīng)理能夠親自開發(fā)數(shù)據(jù)庫后臺,如果程序開發(fā)人員能夠規(guī)劃合理的頁面結(jié)構(gòu),如果內(nèi)容編輯能夠獨立進行系統(tǒng)架構(gòu)……當(dāng)這些“如果”成為現(xiàn)實,世界上壓根不想要線框圖!事實也證明,由一個人建立的個人主頁往往不是從線框圖開始的,因為一切盡在掌握。線框圖設(shè)計過程很簡單:第一,把想法寫出來;第二,從其他人那里得到反饋意見;第三,修改至定稿。第三章線框圖的意義線框圖設(shè)計的整個過程不外乎如此:將需求討論清楚,將頁面流程圖畫好,將各種分支情況考慮清楚,腦子里才會逐漸對需要多少個頁面形成概念,哪些頁面需要更高的單頁面交互設(shè)計形成概念,而當(dāng)完成這一步,交互的大部分工作都已經(jīng)做完了,剩下的單純?nèi)ピO(shè)計各個頁面,占據(jù)了線框圖階段的很少的時間。更多的時間是花在:
討論——評審——討論——評審——確認(rèn)
第三章線框圖的意義設(shè)計線框圖的過程中要做些什么需求的了解與討論:需求越清楚,以后階段就會越高效。這個階段,交互設(shè)計師還需要借助sitemap,頁面流程圖(pageflow),或者故事板等等工具,來幫助自己和項目組了解產(chǎn)品需求。必須從宏觀到細(xì)節(jié),將產(chǎn)品的交互邏輯認(rèn)認(rèn)真真仔仔細(xì)細(xì)思考清楚,細(xì)枝末節(jié)的東西如果不關(guān)心,到了項目進行過程中,還一定會被開發(fā)工程師追著補充各種流程中的頁面。創(chuàng)造性的方案探索與嘗試:設(shè)計就意味著嘗試各種方案,并對方案進行篩選與確認(rèn)。設(shè)計本身是一種在期望和限制下進行的探索,并且將探索后的成果實施。交互設(shè)計師需要不斷圍繞需求與期望,進行探索并在逐步的限制中,縮小設(shè)計范圍。設(shè)計方案的討論與確認(rèn):線框圖基本完成后,應(yīng)該召集需求方以及技術(shù)方就線框圖展開討論,需求方能確認(rèn)是否滿足期望,技術(shù)方的參與能夠就可行性方面給出意見,并且能夠根據(jù)線框圖進行初步的開發(fā)資源評估。討論后,對線框圖做一些調(diào)整,再次討論確定后,就進入視覺設(shè)計階段,到時候?qū)⒉辉僮鲚p易的結(jié)構(gòu)與內(nèi)容塊定義的調(diào)整,讓大家足夠重視并對線框圖達(dá)成一致。第三章線框圖的意義把問題解決在線框圖階段設(shè)計線框圖的關(guān)鍵在于對于需求的把握、挖掘與快速呈現(xiàn),在于全程中對于各種想法的吸收與管理,在于能不能讓大家都快速明白了解設(shè)計的原因和背景,并對方案達(dá)成一致。有很多有創(chuàng)造力的人,卻不善于空想,對著需求文檔,無法讓創(chuàng)造力的腦細(xì)胞活躍起來,大家都只能對著方案點頭稱是,但是到了線框圖階段,具體的產(chǎn)品原型會激發(fā)更多的想法,因此這個階段,最適合進行產(chǎn)品開發(fā)過程中的第二次頭腦風(fēng)暴。在視覺設(shè)計階段,修改的成本非常高,視覺設(shè)計師是對每一個像素精雕細(xì)琢,產(chǎn)品定位的改變,也許對于他們是“滅頂之災(zāi)”,這可能會意味著很多個頁面要重新開始設(shè)計,當(dāng)視覺設(shè)計已經(jīng)到了一定的地步時,視覺設(shè)計師對“修改”慢慢會變得有點抗拒。而交互設(shè)計師
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 大班社會天安們課程設(shè)計
- 微機課程設(shè)計乒乓球比賽
- 《涼山彝族農(nóng)業(yè)文化遺產(chǎn)“四川美姑苦蕎栽培系統(tǒng)”保護研究》
- 《Graves病患者維生素D營養(yǎng)狀態(tài)及其與骨代謝指標(biāo)的相關(guān)性研究》
- 塑料膜課程設(shè)計圓形底座
- 《桃紅四物顆粒劑制備工藝優(yōu)化及其質(zhì)量控制的研究》
- 《副溶血弧菌口服緩釋疫苗的制備與免疫效果研究》
- 《宋詞《蝶戀花》詞體、詞情與詞藝研究》
- 《刺參Apostichopus japonicus (Selenka)對溫度脅迫響應(yīng)分子機理的基礎(chǔ)研究》
- 進口食品許可證咨詢服務(wù)合同
- 漢字與中國古代文化常識智慧樹知到期末考試答案2024年
- 廣東省普通高中學(xué)生檔案
- 基于PLC與工業(yè)機器人控制的物料搬運及分揀系統(tǒng)的設(shè)計
- 化學(xué)-福建廈門第一中學(xué)2023-2024學(xué)年高一上學(xué)期12月月考帶答案
- 全國古建筑行業(yè)現(xiàn)狀分析
- 廣東省深圳市2022-2023學(xué)年四年級上學(xué)期科學(xué)期末測試卷
- 《講好中國故事》作文
- 《核心力量訓(xùn)練》課件
- 北師大版2024-2025學(xué)年六年級數(shù)學(xué)上冊典型例題系列第二單元:量率對應(yīng)問題“一般型”專項練習(xí)(原卷版+解析)
- 企業(yè)管理人員德能勤績廉考核細(xì)則
- 設(shè)備維修年終個人工作總結(jié)
評論
0/150
提交評論