技術(shù)資訊
對網(wǎng)頁寬度設(shè)計的問題應如何討論？
2009-04-08 08:53:00
在網(wǎng)頁多寬才合適這個話題上，白鴉一開始就拋出了650這樣一個數(shù)字。后來我在 GR 里面分享的時候?qū)懀骸酒鋵?650 是不準確的...或者說不夠嚴謹。與顯示器尺寸、DPI 有關(guān)。用字數(shù)也不行，與字的大小也有關(guān)?！?/p>
關(guān)于這個嚴謹不嚴謹?shù)膯栴}，后來在 Gtalk 上與鴉又更詳細的討論了一番。分享知識，整理如下。
1、Web 排版設(shè)計上，沒有一個單位（指CSS長度單位）是可靠的。哪怕在CSS中理想化的分成了相對長度單位和絕對長度單位。所有單位（非像素單位通過 DPI，或者更準確的說是 PPI）均被轉(zhuǎn)化為像素。像素為什么不可靠？14.1寸4:3顯示器，1024分辨率下每 100 像素物理寬度約為 27.98mm，1400分辨率下每 100 像素物理寬度約為 20.47mm。這里的實際寬度指的是用尺子量出來的寬度。
2、討論這個話題的時候，應該從視角、視距（眼睛與顯示屏的距離）出發(fā)，得出最佳物理寬度。然后再從用戶群的顯示器尺寸和分辨率設(shè)定上，去換算為像素。但是，在這個顯示器尺寸、分辨率百花齊放的年代，用物理寬度是最佳的。
3、人因工程上說人眼專注閱讀的視角是 25 度（約為正常視角的 1/5），距離顯示器 45-50cm。通過計算可以得到物理寬度為 19.95cm-22.17cm。約等于一把尺子的長度。于是再換算到顯示器上（仍按 17 寸 1024×768 分辨率，橫向物理寬度是 34.544cm），就可以得到 591-657px 這個數(shù)字。取整之后，可以認為是590-660px 這個區(qū)間。但前提仍然是 17 寸 1024×768 分辨率。
最后，還有字號大小的問題，這個比較難，因為需要考慮到在 45-50cm 這個視距下，最佳的筆畫物理粗細。
另外提醒下這里討論的是專注閱讀的內(nèi)容寬度。掃視又是另外一種情況，但應當也可以用人因工程（Human Factors）來解釋。
PS. 以前常用每100像素物理寬度為多少來面試設(shè)計師。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能，海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預期到走向卓越
- [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)站服務支持
- [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è)成本大概是多少？
延伸閱讀
- [2009-04-08 08:51:00] 寬屏顯示下的網(wǎng)站網(wǎng)頁寬度
解決方案
輪胎行業(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è)計趨勢 海信網(wǎng)絡科技 扁平化設(shè)計 程序開發(fā) html和css 網(wǎng)站動畫 css 企業(yè)網(wǎng)站為什么要備案 插畫 用戶界面 如何做網(wǎng)站優(yōu)化 手機網(wǎng)站 網(wǎng)站制作 SEO 力圖數(shù)字科技 網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè) 青島高端網(wǎng)站建設(shè) 青島不錯的英文網(wǎng)站建設(shè)公司 微信小程序 青島黃島、紅島網(wǎng)站建設(shè)公司 集團性網(wǎng)站 互聯(lián)網(wǎng) 視覺靈感 青島開發(fā)區(qū)建站公司 H5定制設(shè)計 官網(wǎng)建設(shè) 色彩心理學
