關於UI的一次討論——來自專案管理群的討論

不勝人生一場醉 說:
 有沒有人聽我瞎掰的
Ted-專案經理-北京 說:
 
huyg-.net-bj 說:
 
不勝人生一場醉 說:
  給點掌聲啊
huyg-.net-bj 說:
 
不勝人生一場醉 說:
 今天我發現了一個電腦使用現狀，分享一下給大家，同時聊一聊UI的問題
成成-PM-上海 說:
 
京新-質量管理-bj 說:
 
不勝人生一場醉 說:
 我身邊40%的人是電腦初級者，即會使用QQ和看電影的人
 50%的人是電腦盲，從來不用電腦的人
 會用QQ的人，不會用影片聊天，不知道接收檔案在哪裡？不知道怎麼開啟檔案？不知道怎麼複製東西
 如果QQ弄出來一個傻瓜版本多好啊
QQ自帶媒體播放器，QQ自帶資源管理器，QQ設定的時候自動增加一個分類，設定爸媽姐妹，然後就放個影片聊天，把影片轉成文字之類
 讓不懂電腦的人一看就會
 我想說的是現在的介面對於大多數人而言還是過於複雜了
玉-cm-bj 說:
 嗯 。
不勝人生一場醉 說:
 比如手機，不會發簡訊的人大有人在
 不會接聽電話的人也很多，我爸媽就怎麼都學不會
 有沒有辦法讓UI更傻瓜化一些呢？
 如果手機傻瓜化一些，就相當於開啟了其餘50%人的錢袋
這個小草可以思考一下，呵呵
Richard李明-專案主管-北京 說:
 早期的電話都很簡單啊
不勝人生一場醉 說:
 比如iphone定位於中高階人群，壓根也沒想過低端人群
玉-cm-bj 說:
 可是現在的手機越來越複雜，操作。
不勝人生一場醉 說:
 假如我們的山寨機考慮一下低端人群，就不會弄那些炫而不實的滑動功能之類的
 考慮到低端人群的絕對數量，儘管消費能力有限，其實還是有必要的考慮他們的需求的
玉-cm-bj 說:
 因為現在的人都只想在最短的時間裡賺到更多的錢，很多都是快速開發，快速銷售。
不勝人生一場醉 說:
 對，快速佔領某些市場
 而不是普及市場
 再返回我們的應用程式和網際網路站
都是密密麻麻的資訊欄，密密麻麻的文字，大量的廣告，可能我們還能去看
玉-cm-bj 說:
 我週六去一趟電子市場，基本上每個手機專賣店都在做蘋果的廣告。
不勝人生一場醉 說:
 可對於我們父輩的人，尤其是農村的人，一看就眼暈了
 不知道該看啥，他們也許想看新聞，可一看那麼多東西，反而不知道該看啥了
玉-cm-bj 說:
 嗯。我花了一個星期的時間才教會我媽打電話。
不勝人生一場醉 說:
 我爸媽現在還是不會用手機
 我們的應用程式也是如此，一方面迫於客戶的需求壓力，一方面何嘗不是帶有炫耀的成分呢
 很久以前我提到過一次曾經公司想開發一款B/S和C/S結合的證券資訊產品
 初步嘗試了一下，開啟整個頁面需要40秒時間
 每個部分都採用AJAX，每個區域都在不停的轉動
 是不是過猶不及
 凡事希望再簡單一些，能夠照顧到多數人的感覺，這才是成功的關鍵，除非你只想某部分人群
 我在程式設計師上看到過一篇關於網站UI的文章
以及我2009年底也曾花了幾個月規劃過公司的網站
觀點不謀而合
 主網站框架
欄目
重點資訊 主資訊 推薦資訊/點評
---分割欄目
重點資訊 主資訊 推薦資訊/點評

 一級欄目框架
二級欄目
重點資訊 主資訊 推薦資訊/點評
沒有分割欄目了
 二級欄目框架
主資訊 推薦資訊/點評

 基本是三層結構
 關於UI，需要強調的是靈活性和標準型
 靈活性，我建議用CSS來做到圖形和資料的分離
有一次做登陸介面的設計
當時程式碼寫好了，需要美工協助提供登入介面的UI
 結果這傢伙發給我一個html檔案，我一看傻眼了，全文由70、80個圖片構成，美麗是美麗，可變成拼圖了
 打回去重新設計，這次很簡約發給我4張圖片，卻沒辦法和登入框整合了
 圖形和資料的分離說起來容易做起來還是很難的
Richard李明-專案主管-北京 說:
  贊
不勝人生一場醉 說:
 一個是我們不具備先見之明和預見能力
再一個是我們潛意識都希望能夠把介面做的好看一些
Richard李明-專案主管-北京 說:
 圖形小傳送能快吧
不勝人生一場醉 說:
 理論上用css的圖形分割更快
 我記得在有一本UI的書中有提到過
 能夠快取起來供不同的頁面去使用
Ted-專案經理-北京 說:
 CSS Sprites？
不勝人生一場醉 說:
 規範化
說到規範化，我曾在阿三公司接收過銀行系統的培訓
 對
stone-高階技術經理-想回上海發展 說:
 雅虎的前端最佳化理論裡，提倡拼圖，這樣可以減少請求次數，
不勝人生一場醉 說:
 我大致可以描述一下
 對於一些從不改變的二選一三選一常量用radio button
 對於3個以上10個以內的基本選擇使用下拉選單
stone-高階技術經理-想回上海發展 說:
 不過UI確實需要儘量的簡化，我喜歡簡約的風格，我現在公司的老大，就太偏愛那種所謂炫的效果
不勝人生一場醉 說:
 對於10個以上的選擇使用資料視窗，即資料從資料庫或快取中獲取
 對於超過30個以上的選擇，則使用彈出式視窗，並提供分頁功能
lastwinner-pm-bj 說:
 超過30個的，還要提供搜尋
不勝人生一場醉 說:
 對於需要檢索條件的查詢，使用彈出式視窗+條件輸入+查詢分頁
 什麼樣的需求使用不同的控制元件是有標準
而且所有的介面的樣式風格完全是一致的，
 看上去很協調，但不一定很完美
lastwinner-pm-bj 說:
 網站可以不用圖片也做得很漂亮，當然這樣子的CSS成本會太高
中和一下，少部分圖片 ＋ 較為強勁的CSS，可以達到最小的網路流量展現最美的頁面

不勝人生一場醉 說:
 對頭，我不是java和架構專家
但在帶南京專案做壓力測試的時候也發現了這方面的問題
 比如1000併發測試，遇到有問題的頁面，需要了解頁面上每個元件的生存週期，確實會發現個別圖片上存在很大的遲緩
 再接上面，所以後來我在帶一個報表portal team的時候，就充分學習了阿三介面的做法
 所有的控制元件和資料可透過XML實現配置，包括資料視窗
 我個人小時候學過中國畫和素描，也在大學時搞過宣傳和版面設計，對藝術還算有一定的眼光，但對UI沒有專門的經歷
 
Richard李明-專案主管-北京 說:
 厲害厲害
lastwinner-pm-bj 說:
 UI與美工的工作是緊密結合的
不勝人生一場醉 說:
 關於UI介面的統一問題，我可以舉個例子
有一次在深圳聯通做Call Center專案
 工作流、知識庫、公告便籤大概200~300個頁面
 需要調整成統一的風格
 開發的時候，全都是以需求為主的，也沒想過UI統一問題
 需要統一的時候，咋辦
只好建了一個CSS的檔案
然後逐頁修改其中的class或ID標籤
 大家都知道web頁面中的table和div標籤很難調整
 一不小心就亂了套
 有時候一個頁面要調整半天時間
 每個頁面還需要增加一個列印功能，咋辦
只好每個頁面複製一份，改成檔名_print.jsp的格式
 然後繼續修改其中的css
 一共幾個人花了一個月才把這幾百個頁面調整完畢
 如果換成內建好的CSS，沒準，改個標頭檔案的指向就over了
 綜述一下
 對於UI呢
我的看法是中庸就好，不要過於炫麗，在簡單和主流之間平衡吧
Richard李明-專案主管-北京 說:
 嗯，沒法使用模板？
不勝人生一場醉 說:
 合理的設計程式，預留一些標籤，充分發揮CSS的功能
其次呢做好規劃和標準化工作
 over了
 
 真累
Ted-專案經理-北京 說:
 預留一些標籤是指什麼
不勝人生一場醉 說:
 class和id標籤留給將來的css
 最好是在做一些標準化的模板，隨時可以檢視效果
Richard李明-專案主管-北京 說:
 嗯
Ted-專案經理-北京 說:
 我想問個關於頁面入口數量的問題
不勝人生一場醉 說:
 呵呵，說來聽聽，我只是瞎掰而已，絕非專家
Ted-專案經理-北京 說:
 為了提高使用者操作的方便性，一個功能頁面可能會有許多的入口，也就是被多個介面調入，但是這樣做在實現返回功能的時候會比較複雜，而且會對將來的維護造成不便，怎麼設計能解決這

個矛盾呢
不勝人生一場醉 說:
 提供複用性，儘量一開始規劃好一些相應的入口出口引數和設計工作
建議建立一個網狀關係示意圖
 提高
 做適當的冗餘
Ted-專案經理-北京 說:
 我現在的做法就是儘量簡化入口，一個功能介面儘量減少呼叫頁面
lastwinner-pm-bj 說:
 Ted的問題，只存在如何平衡的做法，不存在如何解決的說法
不勝人生一場醉 說:
 從程式的角度是對的
 沒有絕對的做法
Ted-專案經理-北京 說:
 從使用者的角度來說，如果一個功能入口太多也不見得就是一個便利
不勝人生一場醉 說:
 還有一個辦法，把頁面元件化分割
lastwinner-pm-bj 說:
 例如dvbbs/discuz等，他們在後續高版本的論壇設計的時候，就會考慮換膚的問題，這樣就如小醉說的，換一套CSS模板，網站頁面風格就變了，很方便
Ted-專案經理-北京 說:
 換顏色還是比較簡單的，如果換佈局風格就難了，對CSS設計人員要求太搞
lastwinner-pm-bj 說:
 另外更高一級的模板，就如blog那樣的，可以定製各個區域的位置，不同的模板有不同的展現，這就絕不是變動下css就可以做到的
 變格局需要做到CSS與格局設計分離，各司其職
不勝人生一場醉 說:
 頁面元件化分割，呵呵
 差不多就這個意思
Ted-專案經理-北京 說:
 元件太多對於併發訪問的反應時間是不是會有影響
Jimmy-求職中（專案經理/開發經理）-北京 說:
 一開始就需要規劃好好，什麼樣的div中放什麼樣的內容，後期透過CSS換風格就容易了。
不勝人生一場醉 說:
 傳統的方式看來，一個頁面內進行整體顯示會對使用者的體驗造成不良影響
 基於Ajax的方式可以提高使用者的體驗，而且區域性靜態化、快取化、伴隨著區域性重新整理應該可以更加有利於併發訪問吧
Jimmy-求職中（專案經理/開發經理）-北京 說:
 得具體分析吧，我看過有的頁面是第一次載入的時候就先載入一個頁面，然後再對裡面的元件資料用Ajax的方式載入。這樣伺服器端收到的請求次數多了很多，如果該頁面的資料量不是很大

的話。這樣子做併發性會更差
不勝人生一場醉 說:
 應該這麼看
4次傳輸250k的資料會比一次傳輸1M的資料要快一些，呵呵
Ted-專案經理-北京 說:
 為何？
Jimmy-求職中（專案經理/開發經理）-北京 說:
 但是伺服器需要開4個服務執行緒
不勝人生一場醉 說:
 不過ajax也有自己的問題
一個是XML的開銷，一個是瀏覽器併發數的限制
Richard李明-專案主管-北京 說:
 資料傳輸是分段進行的，資料越長，資料包就越多
不勝人生一場醉 說:
 關鍵的因素是
使用Ajax可以實現頁面的區域性重新整理，但是如果頁面的每個部分都改變了，為什麼不重新做一次伺服器請求呢
 一部分的改變更適合ajax
Jimmy-求職中（專案經理/開發經理）-北京 說:
 XML的開銷可以用JSon代替，這個能大幅度減少傳輸資料量
不勝人生一場醉 說:
 呵呵，我最多是個3流的java程式設計師，JSon我只聽說過，沒用過
 我寫過不到一年java程式，可在華為的一個月的專案內
我spring，webservice，structs，tomcat還有其他的web程式設計全用上了，僅此而已
gary-pm-sz 說:
 3流程式就當PM？中國特色？
不勝人生一場醉 說:
 ...
Jimmy-求職中（專案經理/開發經理）-北京 說:
 ……
lastwinner-pm-bj 說:
 json能有效減小格式化資料包的大小
不勝人生一場醉 說:
 我要是隻懂這麼點java，肯定做不了pm
鄧超-開發-上海 說:
 呵呵 問這句話 才是中國特色 呵呵
Jimmy-求職中（專案經理/開發經理）-北京 說:
 頂
lastwinner-pm-bj 說:
 BQ勝在資料庫而不是java
不勝人生一場醉 說:
 設計模式我不如你，整體架構你肯定不如我
Ted-專案經理-北京 說:
 下次講下整體架構吧
不勝人生一場醉 說:
 開玩笑了
 這次中午沒有交流，我也是參與瞎掰而已