<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Java海闊天空

    編程是我的生活,但生活不僅僅是編程。

    我們,來談談界面設計之一:重心


    一個物體要保持平衡,最重要的是校準重心的位置,一個平衡的物體看上去讓人心生愉悅,凌亂的姿勢會擾亂人的內心。這個世界是由無數個平衡體構成的,就像地球之于宇宙、單車之于速度,平衡產生美感和視覺沖擊。

    界面設計亦然。現在的應用越來越強調用戶體驗,在web頁面設計中,重心是基礎。校準重心就是讓頁面有平衡感,所見之處爽心悅目。平衡有兩種,一種是整體平衡,一種是局部平衡。淘寶、百度百科、QQ空間等網站在這兩種平衡上都做得很好,即考慮到了信息的充分傳播,又考慮到了視覺的協調性。信息和視覺其實是網站最具價值的兩個因素。

    現在顯示器的分辨率非常多,有標準屏但更多的是寬屏,而寬屏又有不同的比例,在這種大背景下,頁面兼容顯得尤為重要,這里帶來了兩個問題:一是如何讓屏幕空間不浪費,二是如何兼容各種奇葩的分辨率。百度百科采用的方案值得我們參考。

     


     

    上圖中,百度百科的導航欄寬度是100%設置的,但正文內容的寬度被固定為1024個像素,顯然這是為了兼容過去的標準屏。但是,整個頁面看上去平衡感非常好,顯示屏效果充實而飽滿,內容也很好的展現出來了。我們注意到導航欄中的文字并不是靠左邊的,而是與正文內容對齊,這其實就是為了保持重心位置,讓重心落實到平衡感最強的那個點上。

    有時候,為了保持頁面的重心,不得不做一些有價值的平衡工作。我們在閱讀新聞時,如果新聞內容占滿整個頁面寬度,頓時變得毫無水準,為了體現出頁面的設計感,往往采用兩欄或三欄的形式來展現內容,這是目前所有網站的做法。下面以株洲網為例。

     


     

    這樣看起來似乎很糟糕,的確,左邊是內容,右邊空空如也,重心偏移,平衡感打破了,需要對其進行調整。右欄可放的東西很多,不過,放與本條新聞有關聯的內容保證信息的聚合顯然更符合用戶的期待。我們可以從時間、空間、主觀、客觀等方面進行考慮。下面是解決方案。


     

    現在我們來看一個反面案例。對汽車感興趣的人會上“汽車之家”這個網站,該網站有一個論壇,在論壇的首頁,有一個最新精華帖列表。


     

    我們從重心的角度來討論該頁面的設計問題。選項卡左邊是標題“最新精華帖”,右邊是“更多”鏈接,重心在中間,保持了平衡感。問題在于表格的標題行與內容行有重心偏移現象。第一列是帖子內容,標題“論壇精華帖”居中,但內容靠左,這二者之間的重心是不同的,造成了失衡。對于表格來說,要盡可能讓標題與內容位于同一重心。有一點要注意,如果單元格內容很多,占用了比較大的寬度,居左讓重心偏左看起來更舒服,如果單元格內容很少,只有三五個字符,不管是居左、居中還是居右只要讓標題和內容保持一致都不會有太大的問題。

    界面設計是一個銹花工作,大到整體布局,小到一個像素的寬度,一個地方做得不到位都會讓設計失去價值。關注開發中的方方面面,這是一種習慣,一種信仰,一種生活態度。這不僅僅是工作。

     


    二〇一四年三月四日

     

     

     

    posted on 2014-03-04 10:43 李贊紅 閱讀(1540) 評論(3)  編輯  收藏

    評論

    # re: 我們,來談談界面設計之一:重心 2014-03-04 11:14 海邊沫沫

    有道理。  回復  更多評論   

    # re: 我們,來談談界面設計之一:重心 2014-03-04 16:07 博客互推聯盟

    看到博主分享這么多內容,特別想把這些內容讓更多博友看到,如果博主能夠經常跟其他博友互動,希望博主能夠加入到“博客互推聯盟”,這里有很多很勤奮的博友,和您一樣,每天在堅持為大家分享好的內容。
    在這個互聯網快速變革的時代,我們還在堅持,但我們不想孤軍奮戰,讓更多博友看到你,讓我們彼此多一點交流,一起發展。  回復  更多評論   

    # re: 我們,來談談界面設計之一:重心 2014-06-05 10:42 Mr陳

    李老師感覺你寫的相關技術方面的文章很棒,很精細,但是唯一的缺點就是更新的太少,希望李老師以后可以多多分享  回復  更多評論   


    只有注冊用戶登錄后才能發表評論。


    網站導航:
     

    導航

    <2025年7月>
    293012345
    6789101112
    13141516171819
    20212223242526
    272829303112
    3456789

    統計

    常用鏈接

    留言簿(12)

    隨筆檔案(28)

    相冊

    技術友情博客

    搜索

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 岛国av无码免费无禁网站| 亚洲香蕉成人AV网站在线观看| 国产情侣久久久久aⅴ免费| 亚洲人成色77777在线观看| 亚洲av无码精品网站| 免费一级一片一毛片| 天天看免费高清影视| 免费观看无遮挡www的小视频| 中国一级特黄的片子免费| 香蕉视频在线观看免费| 亚洲人成77777在线播放网站不卡| 亚洲成a人片在线观看无码| 亚洲午夜爱爱香蕉片| 国产成人高清精品免费鸭子| 日韩一区二区a片免费观看| 久久久久久精品免费看SSS| 久久久久免费看黄a级试看| 在线视频网址免费播放| 午夜免费国产体验区免费的 | 久久国产乱子精品免费女| 乱人伦中文视频在线观看免费| 亚洲av日韩av永久无码电影| 亚洲一区二区观看播放| 2020年亚洲天天爽天天噜| 亚洲欧洲日本国产| 亚洲综合综合在线| 亚洲国产成人久久综合碰碰动漫3d| 亚洲乱码中文字幕综合| 在线观看亚洲天天一三视| 国产亚洲精品a在线观看| AV在线播放日韩亚洲欧| 国产亚洲人成A在线V网站| 国产亚洲精品成人a v小说| 亚洲人精品午夜射精日韩| 亚洲男人的天堂www| 亚洲情XO亚洲色XO无码| 久久精品国产亚洲av成人| 亚洲成人精品久久| 亚洲福利视频网址| 国产精品亚洲午夜一区二区三区| 亚洲www在线观看|