技術(shù)資訊
設(shè)計兼容性好的Web頁面
2012-03-08 17:29:16
隨著技術(shù)的進步,Web設(shè)計的理念與技法也在不斷發(fā)展。設(shè)備種類越來越多,帶給我們的挑戰(zhàn)也越來越大。怎樣以最合理的方式使設(shè)計方案能夠最大程度地適應(yīng)各種設(shè)備的性能與規(guī)格屬性,這是我們在工作當中必須考慮的問題。
面對這樣的挑戰(zhàn),我們一方面會覺得自己曾經(jīng)熟悉的工作領(lǐng)域突然充滿了未知感,而另一方面,一直普遍存在的那些舊問題也依然擺在面前。我們是否需要花費全部精力用來解決各種新舊細節(jié)問題,還是可以從宏觀上尋求一些具有指導(dǎo)性質(zhì)的“真諦”?
Web設(shè)計的歷史過于短暫,要想弄明白一些大道理,我們不妨將視野放遠些,讓思路跨越設(shè)計的范疇。其實,我們真的可以從那些看上去與設(shè)計沒有多大關(guān)聯(lián)的領(lǐng)域中找到一些抽象化的、更具普遍意義的思路和模式,以幫助我們解決自己的問題。心理學和音樂等都是我們可以加以研究和探索的對象。接下來,就讓我們一起了解一下巴赫與當前Web設(shè)計所面臨的挑戰(zhàn)之間的關(guān)系。巴赫誒。
Web設(shè)計中的好脾氣
Web設(shè)計面向的目標設(shè)備正在由單一發(fā)展為多元,這也許是最近一兩年里最令人激動,同時又是最令人焦慮的事情了。這不再是關(guān)于樣式能否在不同瀏覽器中保持兼容的問題,我們在新局面下面對的是各種方面的因素:不同的設(shè)備、不同的屏幕尺寸、不同的使用環(huán)境、不同的系統(tǒng)平臺所具有的UI風格等。
雖然響應(yīng)式設(shè)計或是針對指定設(shè)備進行設(shè)計的思路都可以在一定程度上幫助我們面向不同的環(huán)境調(diào)整外觀形式及體驗方式,但不是所有的UI元素或模塊都可以被賦予彈性,我們?nèi)匀恍枰诤芏嗟胤绞褂?ldquo;固定”的全局化設(shè)計方案。這時,“好脾氣”的思路就可以幫上忙了。具體的實踐原則很簡單明了:為了讓設(shè)計方案在一系列不同類型的設(shè)備中都能產(chǎn)生最好的用戶體驗,我們需要對界面中一些關(guān)鍵性的UI元素做出不同程度的折中調(diào)整,使整個頁面對于環(huán)境的適應(yīng)能力更強。
巴赫與“好脾氣的克萊維爾”(十二平均律鋼琴曲集)
1722年,巴赫創(chuàng)作了一部包括48首前奏曲與賦格(24個大小調(diào))的鋼琴曲集,主要用作培養(yǎng)年輕音樂家的教育素材。這套曲集是西方音樂史中最重要的作品之一,影響極為深遠。巴赫本人將它命名為“好脾氣的克萊維爾(The Well-Tempered Clavier)”。
為什么這部曲集具有重大的歷史意義呢?要知道,在巴赫所處的那個時代,在鍵盤樂器上使用全部調(diào)式演奏曲目并不是一種很正統(tǒng)的做法。從物理學的角度講,具有固定音調(diào)的鍵盤樂器一次只能演奏幾個特定的調(diào)式。對于那個時代的調(diào)音系統(tǒng)來說,要在鋼琴上彈奏出全部12個調(diào)式,幾乎是一件不可能的事情。
物理定律是很難被突破的,但人的感知是可以被改變的,解決方案就是重新定義“合調(diào)”的概念。某些音程在被調(diào)整之后會與標準的音準產(chǎn)生微小的偏差,從而產(chǎn)生了一個新的調(diào)音體系,使人們可以彈奏全部曲調(diào)。這種為了構(gòu)筑更合理的系統(tǒng)而調(diào)整其組成要素屬性特征的能力,就是一個系統(tǒng)的“脾氣”。
巴赫的平均律對自然律進行了修正,將八度音程分為十二半音的調(diào)律法,以便于轉(zhuǎn)調(diào)。這種方式自然可以被稱為“好脾氣”,它就像是古典音樂中的實用主義。
觸控優(yōu)先
最近,越來越多的桌面版本網(wǎng)站當中開始出現(xiàn)具有觸屏設(shè)備UI風格的界面元素,這種做法很好地體現(xiàn)出了“好脾氣”的設(shè)計思路。在觸屏移動設(shè)備當中,我們需要通過手指對界面當中的交互對象進行直接操作。比起傳統(tǒng)的鼠標指針,手指觸控方式需要的目標作用區(qū)域更大??紤]到這一點,我們應(yīng)該適度地增大頁面當中一些重要交互元素的尺寸;同時,為了保持視覺上的平衡,我們還需要對相關(guān)元素之間的間距及它們各自的內(nèi)邊距進行調(diào)整。
舉個簡單的例子,Google在其新版UI當中明顯地增大了“寫郵件”按鈕這類重要交互元素的尺寸;同時,諸如導(dǎo)航菜單、工具欄、郵件列表等界面元素,在間距留白等方面也有做相應(yīng)的調(diào)整。相比于過去,新版設(shè)計方案顯著地提升了Google的這些主線產(chǎn)品對于觸屏操作的友好性。
從某種程度上講,iPad在觸屏移動設(shè)備與傳統(tǒng)桌面設(shè)備之間架起了一座橋梁,它的普及提升了觸屏設(shè)備UI風格在桌面設(shè)備當中的影響力。看看Gmail和Twitter這類主流產(chǎn)品在最近的改版,或是花時間到那些CSS網(wǎng)頁設(shè)計案例集當中瀏覽一下最新的優(yōu)秀作品,你會發(fā)現(xiàn)當前的Web設(shè)計風格看上去確實和以前不大一樣了,它們看上去似乎更加的。..豐滿。留白更多,按鈕更大,一切看上去都又大又平。不過我們也必須承認,這種現(xiàn)象與桌面顯示器不斷增大的尺寸也有一定的關(guān)聯(lián)。
在這類設(shè)計方案當中,界面元素所占據(jù)的空間對于鼠標指針來說顯得有些許浪費了,但對于手指觸控的方式卻恰到好處。這也正是“好脾氣”的設(shè)計思路的核心思想,即為了使界面能夠適用于更多的平臺環(huán)境,而對“標準化”的設(shè)計方案進行微調(diào),最終達到一種折中的狀態(tài)。
而且在很多時候,這種權(quán)衡的結(jié)果對于鍵鼠交互方式來說也并不壞。容易被手指觸摸的按鈕同樣易于鼠標的控制,整個UI在傳統(tǒng)設(shè)備上下文環(huán)境當中的用戶體驗也許反而有所提升。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2015-03-21 18:30:06] 如何做好企業(yè)網(wǎng)站優(yōu)化才是關(guān)鍵?
- [2009-03-03 22:33:00] 不要給我無用信息
- [2008-12-12 22:04:00] 進行Web界面原型設(shè)計的一種方法(續(xù))
- [2008-12-02 14:03:00] 淺談web分析
- [2009-03-03 22:35:00] 見仁見智的設(shè)計
- [2019-05-14 11:09:21] 青島網(wǎng)站設(shè)計公司哪家好
- [2008-10-29 17:59:00] 按鈕還是分類,以及好友的組合
- [2008-12-06 22:44:00] 設(shè)計一個好用的錯誤頁面
- [2011-11-20 21:14:50] 如何做好網(wǎng)站內(nèi)部url鏈接
- [2009-04-09 11:37:00] 十個簡單好用的設(shè)計技巧
- [2012-08-21 22:16:41] 如何突出頁面設(shè)計重點內(nèi)容
- [2008-12-18 21:56:00] 關(guān)于“>>”和“<<”、箭頭的交互
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島網(wǎng)站建設(shè)公司哪家好 青島好的網(wǎng)站優(yōu)化公司 青島網(wǎng)站建設(shè)基礎(chǔ)知識 網(wǎng)站動畫 青島網(wǎng)站優(yōu)化 青島開發(fā)區(qū)建站公司 微官網(wǎng)帶來的好處 海信網(wǎng)絡(luò)科技 青島輪胎網(wǎng)站設(shè)計公司 青島做網(wǎng)站多少錢 視覺靈感 插畫 網(wǎng)站建設(shè)的步驟有哪些 html和css SEO HTML5 扁平化設(shè)計 頁面設(shè)計 青島高端網(wǎng)站建設(shè) 英文網(wǎng)站建設(shè) 搜索引擎蜘蛛 青島IT資訊 版面布局 青島網(wǎng)站建設(shè) 網(wǎng)站交互設(shè)計 IT資訊 營銷型網(wǎng)站建設(shè) H5定制設(shè)計 良好的導(dǎo)航 H5專題頁面