DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 百度空間編輯器標題框設計分析
百度空間編輯器標題框設計分析
編輯:關於網頁技巧     

你的需求文檔中出現過標題框麼?應該出現過。你都考慮了哪些問題和解決方案?未必那麼全。這些細節需要這麼麻煩麼?不是麻不麻煩的問題,因為我的文章標題就叫:“麻雀雖小,五髒俱全”。

如果我說,我正在使用的百度空間編輯器的標題框,就有一些設計上的瑕疵,不知道大家會怎樣看?我沒有說正文編輯器,我說的是標題輸入框而已。:D



下面略舉一些瑕疵。

1,大小

這個文本框裡輸入的文字,默認大概是10.5磅。標題是如此的重要,以10.5磅作為默認字體,未免小了些。如果正文編輯器的默認字體是11磅字,那麼這個標題欄至少是12磅。自然,這個框的高度也要做相應調整。

這裡體現的問題:重要的,就強化;不重要的,就弱化。強化的手段很多,字體加大只是其中一種而已,並且在這裡可能是相對合適的一種。

2,寬度

博客標題欄應該做成多寬?這是一個很有意思的決策。我們來分析一下它受制於哪些因素。

a,從視覺角度,標題欄的寬度,不應超過正文寬度

b,正文寬度,比較適當的閱讀體驗,大約是11磅的漢字,40個左右。這樣計算,一個所見即所得的編輯器,默認字體是11磅的情況下,行寬大約也就是40個漢字左右。

c,由a和b,標題欄的寬度,最寬大概能容納40個漢字左右。但考慮到標題欄的字體為12磅,那麼字數大概是35左右。

以上是從UI和用戶閱讀習慣的角度做的分析。光有這些是不夠的,我們還需要分析,一個35漢字的標題欄寬度,能涵蓋多大比例的博客標題?因為如果用戶實際撰寫標題大比例超過35個漢字的話,用戶會由於看不全他所寫的標題,而體驗變差。

這個很好解決,隨機抓一批博客標題數據,做一個抽樣分析就行了。按我的估計,35個漢字,能涵蓋掉99%以上的博客標題吧。

目前的編輯器標題欄寬度,能輸入29個漢字。也許29個漢字也能涵蓋掉很高比例的博客標題吧。但我仍有局促感。

這裡體現的問題:用經驗和直覺確定baseline;用數據來驗證和修正baseline。

3,上限

空間的標題長度上限50個漢字。且不論這50個漢字是否合理。由於50>35,所以如果用戶輸入40個漢字的話,意味著用戶無法看全整個標題,這是一種不好的體驗。如何解決 第36-40個漢字的展現問題?

很簡單,文本框設計成自動換行。第36個漢字自動換到第二行,文本框自動擴展變成兩行。這樣會讓用戶心裡非常的踏實,因為所有的輸入內容都是可見的。

上限如何確定?仍是基於統計。或者先拍一個保守一點的,上線後再根據用戶行為數據統計做出更合適的調整。

這裡體現的問題:讓我“創新”出自動擴展輸入框來解決輸入展現不全問題,我覺得有難度;但是我看到了別人的做法,就一下子體會到其中的妙味了。

4,出錯

我如果輸入的內容,超過了50個漢字,編輯器不做任何提示。當我發表文章時,編輯器告訴我,標題僅限於50漢字,請修改後重發。

既然有了50個漢字的限制,為什麼不在我輸入超過50個漢字的時候給出提示,並且禁止更多無謂的輸入?

這裡體現的問題:適時的給出用戶引導,不要等他累得半死後,再告訴他,你走入死胡同了。

-------------------------

你的需求文檔中出現過標題框麼?應該出現過。你都考慮了哪些問題和解決方案?未必那麼全。這些細節需要這麼麻煩麼?不是麻不麻煩的問題,因為我的文章標題就叫:“麻雀雖小,五髒俱全”。

有些兄弟,對自己所從事的工作感到苦惱,因為覺得太簡單,以至於沒有成長空間了。但我覺得,對於“產品設計”這個工種而言,通常不怎麼缺少成長空間,只要勤於思考、發現、詢問、實踐和總結,總會日有所得的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved