技術(shù)資訊
網(wǎng)頁的滾動條設(shè)計
2012-03-13 18:07:59
網(wǎng)頁設(shè)計的水平很大程度上也是細(xì)節(jié)設(shè)計水平的體現(xiàn)，一個優(yōu)秀的青島網(wǎng)站制作公司往往是網(wǎng)頁細(xì)節(jié)設(shè)計做的出色的公司。我相信所有設(shè)計師都是注重細(xì)節(jié)的，即使有時迫于種種原因，無法達(dá)到像期望般完美，但心中一定有份糾結(jié)的堅持。
最近的項目中，給選擇器設(shè)計備選列表，發(fā)現(xiàn)了一個“由細(xì)節(jié)引發(fā)的細(xì)節(jié)問題”。下圖是示例。很簡單，在一個固定區(qū)域內(nèi)做多選，當(dāng)有很多備選時，滾動顯示更多內(nèi)容。（原本意圖）
圖A：原本的意圖，和期望達(dá)到的效果
但實現(xiàn)出來之后，發(fā)現(xiàn)一個問題：滾動條被隱藏掉了。只有當(dāng)在備選內(nèi)容區(qū)滾動鼠標(biāo)時，滾動條才會顯示出來。這會影響到用戶對這個功能區(qū)塊的認(rèn)知，根本察覺不到還有更多內(nèi)容。（出乎預(yù)料）
經(jīng)過調(diào)試發(fā)現(xiàn)仍無法控制滾動條的始終顯示，只好修改了設(shè)計。拉長區(qū)域高度，讓下面的內(nèi)容露出一部分來。用不完整來暗示還有更多內(nèi)容。當(dāng)區(qū)域有滑動時，滾動條自己就出來了。（解決方案）
圖C：用不完整的形態(tài)做暗示
回到問題上來?？赡軙苡绊懙氖窃贛ac OS X 10.7.3上使用Webkit內(nèi)核的瀏覽器（Safari或Chrome）的用戶們。究其最終原因，是因為一個系統(tǒng)默認(rèn)選項（如下圖），“根據(jù)輸入設(shè)備自動顯示”。這是蘋果的一個細(xì)節(jié)設(shè)計，可以根據(jù)鼠標(biāo)或觸摸板等不同的輸入設(shè)備，顯示或隱藏滾動條。
也正是因為它，如果你使用的是觸摸板或Magic Mouse等觸控式鼠標(biāo)，就會發(fā)現(xiàn)，在Webkit內(nèi)核的瀏覽器下，一些功能原本有滾動條，現(xiàn)在都消失不見了。簡單調(diào)整一下設(shè)計，就能比較好的解決這個問題了（如圖C）。
滾動條控制
再優(yōu)雅的設(shè)計，有時候也可能會引發(fā)問題。作為設(shè)計師，得以同樣優(yōu)雅的方式回應(yīng)并解決問題。
近期更新
- [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è)成本大概是多少？
延伸閱讀
- [2014-11-28 21:59:53] 如何做出一篇好的偽原創(chuàng)文章
- [2014-10-24 09:05:35] 如何編寫有技術(shù)性的文章心得
- [2014-11-04 19:07:12] 幾點更新網(wǎng)站比較好
- [2017-01-23 10:30:00] HTML5響應(yīng)式圖片的解決方法
- [2011-10-26 15:45:17] 蘋果用戶體驗的價值
- [2014-11-08 22:41:32] 寫網(wǎng)頁內(nèi)容需要注意些什么？
- [2015-02-02 09:14:00] 如何提高百度收錄的概率？
- [2012-05-27 01:28:35] 網(wǎng)頁設(shè)計好做嗎
- [2011-10-24 11:57:02] 為什么要將網(wǎng)站地圖鏈接放在robots.txt？
- [2017-01-16 08:45:00] 青島網(wǎng)站建設(shè)的財富秘籍之高手是怎樣做banner的？
- [2014-11-05 11:16:16] 網(wǎng)頁設(shè)計制作規(guī)范教程
解決方案
輪胎行業(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è)計解決方案 集團(tuán)公司網(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è) 搜索引擎 html和css 手機網(wǎng)站建設(shè) H5專題頁面 青島IT資訊 微網(wǎng)站 扁平化設(shè)計 網(wǎng)站改版 程序開發(fā) 青島網(wǎng)站營銷 力圖數(shù)字科技 網(wǎng)站制作 視覺靈感 青島高端網(wǎng)站建設(shè)公司哪家好 青島做網(wǎng)站多少錢 青島網(wǎng)站建設(shè)公司哪家好 企業(yè)網(wǎng)站建設(shè) 力圖 青島網(wǎng)站建設(shè) 青島黃島、紅島網(wǎng)站建設(shè)公司 青島網(wǎng)頁設(shè)計 青島好的網(wǎng)站優(yōu)化公司 手機端的網(wǎng)站 手機網(wǎng)站 空白和簡潔的設(shè)計 青島輪胎網(wǎng)站設(shè)計 新的元素 頁面設(shè)計 網(wǎng)站視覺
