中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 藝術(shù)設(shè)計(jì) > 設(shè)計(jì)理論 > 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案
交互設(shè)計(jì)實(shí)用指南:操作入口明確 回到列表 內(nèi)容適應(yīng)形式
 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案

作者:笨活兒 時(shí)間: 2010-03-18 文檔類型:翻譯 來自:笨活兒

第 1 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [1]
第 2 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [2]
第 3 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [3]
第 4 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [4]
第 5 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [5]
第 6 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [6]
第 7 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [7]
第 8 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [8]

網(wǎng)頁設(shè)計(jì)中,內(nèi)容組織恐怕是最至關(guān)重要、最影響設(shè)計(jì)品質(zhì)的方面了。如何將信息組織到好的布局中,是一個(gè)網(wǎng)站的基礎(chǔ),并且應(yīng)該在考慮外觀之前就決定好。沒有好的布局,網(wǎng)頁信息流就不能正確傳遞,所有東西都不能建立起合理的聯(lián)系。

在這篇文章中,我們將討論八個(gè)布局解決方案/技巧,這些方案和技巧將有助于你創(chuàng)建整潔有序的內(nèi)容布局。這八個(gè)技巧包括:滑門(sliders)、標(biāo)簽式、漸進(jìn)布局(progressive layouts)、結(jié)構(gòu)網(wǎng)格、模態(tài)窗口(modal window)、翻轉(zhuǎn)元素、手風(fēng)琴效果(accordions)以及超大下拉菜單(mega drop-down-menus)。

1. 滑動(dòng)樣式與傳送帶(Sliders and Carousels)

滑門(Sliders),也可稱為傳送帶(carousels),是一種有序的、交互性強(qiáng)、十分平滑地展示內(nèi)容的方式;T樣式是一個(gè)非常流行的技巧,大家都覺得它很好用,能讓你在固定的區(qū)塊內(nèi)填充上大量內(nèi)容。沒有滑門的幫助,這些內(nèi)容可能就要分開放到頁面中的各個(gè)地方。而大多數(shù)時(shí)候,你在使用頁面空間時(shí)總是捉襟見肘;蛘撸行﹥(nèi)容是你希望“用戶要求”后才出現(xiàn)。這有助于讓用戶一次只關(guān)注一個(gè)內(nèi)容區(qū)塊,也符合他們自己的便利需求。

滑門樣式的實(shí)例

導(dǎo)航區(qū)提供縮略圖與圖標(biāo)

運(yùn)用滑門和幻燈樣式時(shí),最好在導(dǎo)航區(qū)提供圖標(biāo)或縮略圖,以便使導(dǎo)航更加簡單直觀?s略圖和圖標(biāo)給用戶指出明路,向他們解釋當(dāng)前所在位置,以及有哪些瀏覽選項(xiàng)可供選擇(比如說幻燈片的導(dǎo)航可以是水平的,也可以是垂直的)。另外,還能方便他們快速選擇特定滑門頁。

Coda網(wǎng)站的滑門頂部設(shè)計(jì)了標(biāo)簽卡,他們使用的是“滑動(dòng)門+標(biāo)簽卡”的混合樣式。這個(gè)主意絕頂聰明,因?yàn)橥ㄟ^看縮略圖,用戶就能快速得知特定滑門頁的內(nèi)容。而且,這些圖標(biāo)也提供了強(qiáng)大的、令人印象深刻的、干凈整潔的視覺支持。除了圖標(biāo)和標(biāo)簽?zāi)阋部梢栽跇?biāo)題前加上小圖片, 或者只用數(shù)字也行。

用于展示產(chǎn)品的滑門樣式

與上面的例子對應(yīng),滑門不僅能用于大容量信息的組織,也能為用戶瀏覽大量產(chǎn)品條目提供方便。 SourceBits (見下圖)使用了多層滑門(一個(gè)水平的,一個(gè)垂直的),用唱片封面作為導(dǎo)航條目。

水平滑門兩端都有大的圓形箭頭圖標(biāo),實(shí)時(shí)反映左右導(dǎo)航的可用性;瑒(dòng)的時(shí)候有平滑的動(dòng)畫,用起來非常舒服。同時(shí),你也能看到,各個(gè)元素間距都精心設(shè)計(jì)過,這有助于內(nèi)容組織,也提升了可用性。鼠標(biāo)滑過時(shí),每個(gè)條目還有漂亮的聚光燈效果。

垂直滑動(dòng)的內(nèi)容以及超大的水平“點(diǎn)擊條”

接下來看看 QuickSnapper 的滑門。這是一個(gè)完美融入頁面整體布局的十分好用的垂直滑門;T內(nèi)容中有大量截屏圖,內(nèi)容被有序地組織起來。這個(gè)滑門最贊的地方就是上下方的按鈕導(dǎo)航。按鈕寬及整個(gè)滑門,大的按鈕讓“推拉”滑門更加容易。

還有,這些按鈕的:active和:focus效果也很漂亮。

滑門腳本

你可以參考下面的腳本、技巧和教程制作你自己的滑門:

出處:笨活兒
責(zé)任編輯:moby

上一頁 下一頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [2]

相關(guān)文章 更多相關(guān)鏈接
深色調(diào)網(wǎng)頁設(shè)計(jì)注意事項(xiàng)
網(wǎng)頁表單中的行為也分主次
一個(gè)好的網(wǎng)頁需要什么
美之鑒——女人與Web設(shè)計(jì)
網(wǎng)頁設(shè)計(jì)從零開始
作者文章
正則表達(dá)式高級技巧背后的關(guān)鍵概念
正則表達(dá)式高級技巧及實(shí)例詳解
高品質(zhì)的網(wǎng)頁設(shè)計(jì):實(shí)例與技巧
五個(gè)為設(shè)計(jì)添加光影效果的簡單技巧
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計(jì)比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點(diǎn)最新 站點(diǎn)最新列表
周大!熬•自然”設(shè)計(jì)大賽開啟
國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計(jì)算如何讓安全問題可控
云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)
阿里行云
云手機(jī)年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽
欄目最新 欄目最新列表
國外創(chuàng)意名片設(shè)計(jì)欣賞
情感化界面
線下項(xiàng)目工作流程(歸納篇)
線下項(xiàng)目工作流程(分析篇)
簡約而不簡單-Practise平面設(shè)計(jì)
培養(yǎng)用戶的使用習(xí)慣
優(yōu)秀名片設(shè)計(jì)
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾
>> 分頁 首頁 前頁 后頁 尾頁 頁次:1/81個(gè)記錄/頁 轉(zhuǎn)到 頁 共8個(gè)記錄

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨(dú)家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

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

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

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

雜⑦雜⑧ Gold NORMANA V2