您的位置: 首頁 > 藝術設計 > 設計理論 > 頁面構建的審圖與細節
怎樣做符合用戶預期的設計 回到列表 "少即是多"—UI設計的三大趨勢
 頁面構建的審圖與細節

作者: 時間: 2012-04-24 文檔類型:轉載 來自:

作為專業的頁面構建工程師,除了在專業技能上有很高的要求以外,還需要具有一定的對設計圖的審稿能力。審圖,并非是意味著追求跟PSD一模一樣,甚至耗費大量時間截屏跟PSD去“對像素”。在我的理解中,審圖是通過對UI設計稿的分析,充分理解UI設計師的意圖,再結合UE的交互狀態,從中做到真正的“還原設計稿”。

事例一:有取有舍,方是領悟

比如,在這樣一張設計稿中

設計師的意圖:

這個話題列表的行高19px,每個單條話題下面是有4px邊距的。而話題標題與其自身的描述文字之間沒有間距。

頁面構建工程師的分析過程:

由于該模塊對行高的重置,已經“約定”好了,文本規范的行高是18px。通過溝通,設計師認可將本段落的行高由19px改為18px。但這僅限于標題與描述文字之間的行距。而標題與標題之間4像素下邊距,從構圖上說明了單條話題之間的段落關系,不能一味的用18px行高解決。因為通過我們對設計稿的理解,設計師用這4像素,拉大了標題之間的間距,從視覺上形成了段落感。所以對于重構來講,這4像素萬萬不能忽略,不然從視覺呈現的角度,設計師就不能容忍了。所以,有取有舍,方是領悟。

在這個模塊的制作中,還發生了一個小插曲。如下圖:

設計師的意圖:

這是11號的細明體,因為是點綴,又是提示性圖片,所以小于前面標題的宋體12號字。

頁面構建工程師的分析過程:

起初,重構組的同學在討論設計稿時,都提議把它們做成活文字,就是宋體12號。彩色圓角塊用CSS3寫,擴展性特好。因為這個模塊是運營團隊負責,在未來也更能夠滿足隨時更換文字的需求。萬一以后再來個“驚爆”、“頭條”啥的呢?每張圖都重新切、重新拼么?

但是,站在理解視覺設計的角度,這種小tag講究的就是精致。如果做成文本文字,雖然面臨將來的需求變更時,會有一定程度上的成本,但是與正文區別太小,就突出不了小tag的感覺,也顯得沒有那么精致了。所以在各種糾結權衡下,我最終選擇把它們做成了圖片。

事例二:麻煩的CSS寫法能換來更好的視覺效果

再舉另外一個例子,我們有這樣一個模塊。

設計師的意圖:

頭像與名稱頂端對齊,微群等級圖標與微群名稱底部對齊。

頁面構建工程師的分析過程:

因為微群等級圖標的尺寸是16×16,高于文字本身的高度,為了在各瀏覽器下都保證這個對齊效果,我采用了這樣一種思路。

按視覺稿百分百還原,做出來左圖的效果,雖然css代碼看起來有點兒麻煩。但是如果怎么簡單怎么寫,做出來的頁面效果,卻沒有這樣做的實際效果好。

事例三:頁面構建細節上多處理一點點,用戶體驗提升一點點

還有這樣一個模塊:

頁面構建工程師的分析過程:

通常遇到這樣子的模塊,我們會這么劃分結構

由于用戶頭像只有30px正方的大小,所以算來用戶名稱只能顯示2—3個漢字,其實很難讓用戶直觀的區分出這個人究竟是誰。如果通過傳統的思路來做,產品和設計估計都不會滿意。那么,頁面構建的過程中,我們就要想辦法擴大用戶名稱的顯示區域。

于是,我采用下面這個切圖思路,在不改變HTML結構的情況下,只通過改變css,達到了擴大用戶名稱顯示區域的目的。

給用戶頭像名稱模塊定寬,然后利用margin的負數值,讓vs向左偏移。蓋住部分頭像1的區域。最終效果,可以顯示4個漢字。

重構組的實習生同學,由于沒有項目經驗,導師講什么就是什么,于是一聽到導師說“對像素”,就真的去專注于此,萬一設計稿本身有些問題,也不會判斷一下,結果把自己搞的挺為難。有時候,拍屏靜態頁面的呈現效果與設計稿去對像素,其實沒相差幾個像素,但靜態頁面看著就不跟設計稿感覺不一樣。這時候總是需要不斷的修改、截屏、對像素、再修改…這樣的重復勞動,在快節奏的開發中不但浪費時間,更有可能由于不得要點,在數據的裝載后越發“不是那么回事兒”了。還不如靜下心來,先去細細的審圖,和設計師充分的溝通,有取有舍,聰明判斷,然后再去做具體開發,出來的頁面不需要這么焦頭爛額的打補丁對像素,也許能更好得達到設計師設計的初衷呢。

本文鏈接:http://www.ditdrb.tw/design/doc/2012/8764.asp 

出處:
責任編輯:bluehearts

作者文章 更多作者文章
OPPO首屆手機主題設計大賽
想用限免推送1.1上線appstore
專訪菲爾造型藝術設計葉浩天
騰訊保安華麗轉職工程師
晉江市撤縣設市20周年活動標志征集
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
國外創意名片設計欣賞
情感化界面
線下項目工作流程(歸納篇)
線下項目工作流程(分析篇)
簡約而不簡單-Practise平面設計
培養用戶的使用習慣
優秀名片設計
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾
分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特