技術(shù)資訊
遠(yuǎn)觀頁面評估視覺設(shè)計
2008-12-23 08:52:00
Article copyright by Dmitry
Dmitry 版權(quán)所有
作者：Dmitry；譯者：UCD翻譯小組， 笑炊
原文地址：Take a Step Back to See the Big Picture
我發(fā)現(xiàn)，當(dāng)你做Web設(shè)計──或者其他任何涉及到排版和界面設(shè)計──的項目時，瞇著眼睛，或者從一定距離的遠(yuǎn)處檢查你的設(shè)計效果會很有幫助。你需要做的，就是瞇著眼睛，或者走得遠(yuǎn)一點，直到你觀察到的內(nèi)容開始變得模糊。
當(dāng)內(nèi)容頁面變得模糊一片時，你就能看到頁面上的空白部分是如何把它們隔離成各個小方塊和小組的。現(xiàn)在，你無法看清頁面正文，你看到的是各個文本組，以及一些你排版時劃分的小方塊。
好了...，這就是你想看到的。如果你只看到混沌一片，就表明頁面各元素之間的空白沒有起到應(yīng)有的效果。
下面我們通過舉例來闡述這一點。這是一個頁面空白運(yùn)用得不好的網(wǎng)站（Listmixer )：
如果你努力地瞇起眼睛直到內(nèi)容開始模糊，我們將看到這樣的效果：
兩大塊文本區(qū)域。說明過多的文本內(nèi)容被堆到了一塊兒。理想情況是，你希望把頁面分割成不同的小方塊，以方便沒耐心的用戶快速瀏覽。當(dāng)需要閱讀太多東西時，
這類用戶往往是第一個放棄并選擇離開的用戶。
下面是一個在Opera瀏覽器下，較好地利用頁面空白的例子：
如果我們瞇著眼看：
文本區(qū)域被清晰地切分成為若干互相獨立的小方塊。這里的空白有效地分割了內(nèi)容塊，并分給每一個小方塊足夠的伸展空間。
有時候，這種方法也可以用于審視一個頁面視覺上的美觀度──觀察設(shè)計所傳達(dá)出的整體感覺。當(dāng)你的設(shè)計在CSS樣式庫或其它博客文章中以縮略圖的形式展示出來的時候，它可能被縮小到很小的尺寸，內(nèi)容也變得模糊。那個時候它看起來怎么樣？當(dāng)視覺設(shè)計變得很模糊時，是否依然會保持其獨特的樣式、形狀、色彩主題？
遠(yuǎn)觀你的設(shè)計同樣可以讓你站在新用戶的角度考慮問題。他們尚未閱讀文本，并不清楚網(wǎng)站的各個各小方塊是什么，文本寫的是什么，——他們只看到由各種元素組成的一個大頁面。
然后呢，他們將首先關(guā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è)成本大概是多少？
延伸閱讀
- [2008-08-15 11:59:00] 網(wǎng)站的視覺設(shè)計十八條
- [2008-09-01 11:43:00] 交互設(shè)計與視覺設(shè)計哪個更重要？
- [2013-01-08 08:45:07] 視覺設(shè)計在網(wǎng)站制作上的應(yīng)用
- [2009-02-16 22:27:00] 視覺設(shè)計時不應(yīng)產(chǎn)生新信息
- [2008-12-24 08:55:00] 一名視覺設(shè)計師對于網(wǎng)站設(shè)計的思考
- [2008-09-02 12:02:00] 現(xiàn)實與浪漫
- [2008-11-13 14:11:00] 視覺設(shè)計常見誤解
- [2008-12-03 08:50:00] 視覺設(shè)計師扛起UE大旗？
- [2009-03-27 09:03:00] 淺談購物類網(wǎng)站如何保持視覺設(shè)計的一致性
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2008-04-14 15:47:00] 網(wǎng)站中文字的視覺設(shè)計
- [2012-02-27 14:25:24] 網(wǎng)頁的視覺設(shè)計要點
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島IT資訊 網(wǎng)站策劃 青島網(wǎng)站制作 青島好的網(wǎng)站優(yōu)化公司 插畫 php程序 青島網(wǎng)站建設(shè)基礎(chǔ)知識 圖形網(wǎng)格 青島網(wǎng)頁設(shè)計 青島網(wǎng)站營銷 頁面設(shè)計 空白和簡潔的設(shè)計 青島不錯的英文網(wǎng)站建設(shè)公司 青島網(wǎng)站SEO 官網(wǎng)建設(shè) 微信營銷的優(yōu)勢 H5專題頁面 良好的導(dǎo)航 網(wǎng)站推廣 青島網(wǎng)頁制作 建站常識 GOOGLE 網(wǎng)站設(shè)計資訊 青島輪胎網(wǎng)站設(shè)計公司 視覺靈感 海信網(wǎng)絡(luò)科技 膠南網(wǎng)站建設(shè)公司 HTML5 網(wǎng)站SEO 網(wǎng)站的速度
