網(wǎng)站建設(shè)中線條如何設(shè)計(jì) ？

2012-10-26 網(wǎng)站建設(shè)觀點(diǎn)

看看下圖中的條紋。它們看起來(lái)一樣長(zhǎng)嗎？

如果您查看像素，那么它們當(dāng)然是相等的。但從表面上看，下部條帶似乎更短。這里還有兩條。嗯，有什么變化嗎？這次我做了光學(xué)補(bǔ)償。簡(jiǎn)而言之，我稍微移動(dòng)了底部條帶，使牙齒從對(duì)齊線突出 20 像素。因此，從視覺(jué)上看，條帶看起來(lái)更平滑。

以下是一些更復(fù)雜形狀的條紋示例。

因此，如果您將此類文本條用于海報(bào)設(shè)計(jì)，或者說(shuō)，在在線商店的產(chǎn)品卡上添加明亮的“折扣”色帶，請(qǐng)注意視覺(jué)平衡。鋒利的牙齒應(yīng)該稍微超出人物，特別是如果人物本身是矩形的。同樣的原理也適用于按鈕和輸入字段。當(dāng)然，這不是教條，而是基于我們感知特性的建議。

在左側(cè)的圖片中，輸入字段具有淺色背景。它可以稍微“爬出”超出字段名稱和用戶輸入的文本對(duì)齊的線。至于按鈕，它是圓形的，也就是說(shuō)，理論上應(yīng)該將它移動(dòng)到背景邊緣之外一點(diǎn)，以便在視覺(jué)上平衡它。但是，正如您所看到的，按鈕是黑色的，這給了它額外的重量 - 這意味著在這種情況下，您可以簡(jiǎn)單地將它與矩形背景對(duì)齊。在右側(cè)，輸入字段具有清晰的邊框。我將字段名稱與這些邊框?qū)R，已經(jīng)輸入的文本會(huì)稍微縮進(jìn)?！鞍l(fā)送”按鈕有一個(gè)三角形面，這意味著該按鈕需要稍微向右移動(dòng)以與輸入字段的矩形框保持平衡。

現(xiàn)在我們來(lái)到對(duì)齊的另一個(gè)方面——按鈕內(nèi)文本的對(duì)齊。查看下圖中的按鈕。文本似乎居中，不是嗎？

訣竅是在右側(cè)按鈕上，我將文本稍微向左移動(dòng)，因?yàn)榘粹o的右邊緣是三角形的。有趣的是，雖然箭頭按鈕寬了 40 像素，但它的光學(xué)重量與矩形按鈕相同。按鈕內(nèi)的文本不僅水平對(duì)齊，而且垂直對(duì)齊。我想向您介紹的第一種方法用于操作系統(tǒng)、網(wǎng)站和應(yīng)用程序的界面。這是相對(duì)于字體大寫字母高度的對(duì)齊方式：通常是字母“H”或“I”。本質(zhì)上，大寫字母的上下邊緣與按鈕的相應(yīng)邊緣之間的間距是相同的。這是合乎邏輯的，因?yàn)樵谟⒄Z(yǔ)中，按鈕的名稱通常用大寫字母書寫，而在英語(yǔ)字母中，上升到線上方的元素（如 l、t、d、b、k、h）比“懸掛”更多線下方（如 y、j、g、p）。

上一篇：如何通過(guò) 5 個(gè)步驟制作移動(dòng)應(yīng)用程序原型返回觀點(diǎn)列表下一篇：杭州網(wǎng)站設(shè)計(jì)中開(kāi)發(fā)人員網(wǎng)頁(yè)設(shè)計(jì)指南

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/3359.html

相關(guān)專題

品牌官網(wǎng)設(shè)計(jì)
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計(jì)，品牌官網(wǎng)建設(shè)開(kāi)發(fā)服務(wù)，以國(guó)際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
大策略營(yíng)銷門戶網(wǎng)站
杭州派迪科技有自己的營(yíng)銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對(duì)大策略的營(yíng)銷型門戶網(wǎng)站制作有一定的經(jīng)驗(yàn)，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營(yíng)銷型門戶、先臨三維門戶營(yíng)銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁(yè)設(shè)計(jì)、制作、開(kāi)發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營(yíng)銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計(jì)，外貿(mào)官網(wǎng)建設(shè)開(kāi)發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問(wèn)——企業(yè)網(wǎng)站必須反映一切，因?yàn)榕傻峡萍荚谶@里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗(yàn)、與客戶的持續(xù)溝通以及對(duì)每一個(gè)細(xì)節(jié)的關(guān)注，我們確保在快速的周期時(shí)間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過(guò)本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情