3. 模態(tài)窗口
模態(tài)窗口(Modal windows),或者稱(chēng)為浮窗,一般用于在空間緊張的頁(yè)面中展示額外信息。在模態(tài)窗口中,你可以放置放大版的圖像、額外內(nèi)容、警告/提示信息、視頻等等。用模態(tài)窗口展示信息時(shí),記得要同時(shí)明確地提示用戶(hù)如何關(guān)閉它。
同時(shí),用于打開(kāi)模態(tài)窗口的鏈接、縮略圖、圖標(biāo)或者其他圖形元素,一定要保證與模態(tài)窗口要展示的內(nèi)容有足夠的關(guān)聯(lián)。相似的圖標(biāo)、摘要、圖形元素都能幫助用戶(hù)建立原始鏈接與打開(kāi)的窗口的聯(lián)系。
模態(tài)窗口的例子
運(yùn)用到登錄和注冊(cè)流程中的浮窗
模態(tài)窗口最典型的運(yùn)用就是登錄/注冊(cè)窗口了(與諸如圖像、音頻、視頻、Flash等“傳統(tǒng)”媒體文件相比)。登錄和注冊(cè)表單不是用戶(hù)每次瀏覽頁(yè)面都要用到的必要部分,所占頁(yè)面空間理所應(yīng)當(dāng)被節(jié)約下來(lái)。而使用浮窗,則又為用戶(hù)省去了重開(kāi)一個(gè)頁(yè)面的時(shí)間,畢竟這只是一個(gè)很簡(jiǎn)單的非常用動(dòng)作。他們能在網(wǎng)站的任何頁(yè)面中登錄/注冊(cè),而不用中斷現(xiàn)有流程——只要網(wǎng)站的設(shè)計(jì)者能提供基于A(yíng)jax的“靜悄悄的” 登錄/注冊(cè)。
Grooveshark 整個(gè)站點(diǎn)的每一個(gè)頁(yè)面中,這個(gè)漂亮的登錄窗口都觸手可及。注意,點(diǎn)擊登錄( Lodin> )按鈕后并不會(huì)載入一個(gè)新頁(yè)面,而是直接把注冊(cè)表單替換成了登陸表單(使用了手風(fēng)琴效果)。非常方便,非常友好的用戶(hù)界面。
消隱頁(yè)面/使用投影
如果要使用模態(tài)窗口,讓窗口下面的頁(yè)面淡出焦點(diǎn)十分重要。你可以用半透明背景覆蓋或者為窗口添加投影,或者兩者結(jié)合。這么做有兩個(gè)作用:一是能讓用戶(hù)將注 意力集中到浮窗上,然后暫時(shí)忽視掉背后的頁(yè)面。另外,也能增加窗口和頁(yè)面之間的深度感和區(qū)分度,讓人在視覺(jué)上覺(jué)得這窗口確實(shí)是漂浮著的。注意看下面的例子(KissMetrics),半透明的黑色背景讓頁(yè)面消隱,有助于登錄浮窗暫時(shí)成為視覺(jué)重點(diǎn)。另外,取消和關(guān)閉窗口的按鈕也設(shè)計(jì)得很好,夠明顯,夠漂亮。
RealMacSoftware 的浮窗只做了投影,而沒(méi)有讓整個(gè)頁(yè)面消隱。只要深度感和區(qū)分度做得足夠,這樣也很有效。
模態(tài)窗口的腳本
出處:笨活兒
責(zé)任編輯:moby
上一頁(yè) 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [2] 下一頁(yè) 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [4]
|