由【酷狗音樂】所聯想到的C/S界面設計


這次發文搞錯了,竟然先發在QQ空間了,導致所有的圖片都掛了。。這里是QQ空間的地址:http://user.qzone.qq.com/87723501/blog/1337499163

進銷存系統,是我有史以來做的最認真的一套系統。不管是界面還是操作,都有一定的亮點。算是一個可以拿出手的作品。不過日子久了,看着同一個界面也覺得單調。玩了幾天的安卓手機,發現安卓之所以流行,還是有其一定的道理的。使用酷狗聽音樂也有一段時間了,感覺酷狗的界面做的也是很不錯的,用戶體驗也很棒。簡單分析一下,便有了此文。

 
首先看看酷狗的默認界面:

圖片

頁面的總體顏色是藍色。是那種天藍色。這個很好解釋,算是比較經典的顏色。包括Windows,360,QQ等,都是以藍色為默認顏色。經典耐看。

頁面的主基色:藍色,白色,黑色。主體布局是左右,然后左后又各分成了上下。其中,上部分的高度是固定。

頁面入眼,感覺是WindowsPhone7的風格。窗體上的底部的狀態欄,是不是和WindowsPhone7上的菜單欄很像呢?

總的來說,酷狗音樂的風格和以iPhone為代表的炫彩派格格不入。他是微軟派。界面中能找到一些windows8的影子。比如,他的設置界面:

 

圖片

這個是Windows8的設置界面

 

圖片

可以看到,色滬指選項導航都被設計到了左側,而且所使用的顏色不是很多,但是具有很強的突出性。

有很長一段時間,我總是以為,圓角比直角好看。就像,iPhone的圖標是圓角的,他一定比WindowsPhone7的“Metro”風格好看一樣。不過,后來我覺得自己錯了,其實,使用直角,如果你能處理好陰影的話,還是會比圓角好看的。

圖片

直角的酷狗,是不是和圓角的QQ不相上下呢?如果這點對比不出來,咱們看看iPhone和WindowsPhone7的對比:

圖片

圖片的清晰度不是很高,先將就着看吧。很明顯,WindowsPhone的“瓷磚”界面的表現力比圓角加tag的表現力要好的多了。

 

作為一個開發人員,經常遇到的問題,就是數據分頁,畢竟,如果有上萬條數據的化,不管是B/S架構的軟件還是C/S的軟件,都會遇到這個問題。經常性的做法就是,做一個分頁控件,就像是這樣:

 

圖片

這樣做,並沒有錯,可是你回憶一下,在你使用QQ空間的個人中心時,有沒有見到這個東西呢?

在QQ空間中,使用的是“瀑布加載”(暫且這么說吧,也不知道對不對)。意思就是說,這個分頁控件不再存在了,當你把數據瀏覽到將近完成的時候,自動加載下一頁的數據。所使用的技術就似乎ajax了,其實這個技術也可以用在C\S架構的軟件上,比如,酷狗是這樣做的:

 

圖片

在瀏覽到最后一條時,將出現加載中,請稍候字樣。如果數據加載完成,那么這一欄就會消失。如果到了最后一行,就會這樣:

圖片

吐槽下:《我相信》這首歌太流行了。。。

這是一個很棒的用戶體驗,不用翻頁,上一頁的信息也不會丟失。 感覺很流暢。

不過,這樣也會有一個問題,就是說,如果有新數據了,可定是排在第一頁的,但是現在列表已經加載了,這時候可能已經加載到了第三頁,第四頁,怎么辦呢?

騰訊的處理方式,是在列表的頂端做手腳。如果有更新時,就在列表的頂端顯示一個:“有xx等幾位好友更新日志,點擊查看。"如果你點擊的化,數據就會從第一頁重新加載。就像這樣。。。

 

圖片

 

在酷狗上,我沒有找到對這種情況的處理方式,可能是軟件設計者認為,數據更新的不會很頻繁吧,所以就沒有設計。

其實,在安卓上,早就有了解決方法:“下滑刷新”。

在手機操作中,如果采用”瀑布式數據加載“,我們使用手指上划來查看更多數據。程序自動加載下一頁的數據。當有更新時,無論你如何上划,只能看到越來越老的數據。想看最新的怎辦呢?很簡單,下滑就行了。通過手指下滑,我們來到了第一頁數據。再繼續下滑,那么列表就會刷新。。效果圖?沒有。。。你裝一個淘金殿堂看看就知道啦。。

 

在很多時候,我們會有對記錄的刪除操作,經常性的做法就是給某一個數據行添加一個刪除按鈕。。

 

圖片

這樣的做法,其實不是太好,如果使用的系統不一樣的化,所呈現的效果是不同的,比如,在win2003下可能是這樣:

圖片

除了丑陋,就是丑陋。雖然,可以使用第三方控件來彌補這一點。但是有些軟件有明文規定:不允許使用第三方組件。(二炮,航天測控。。)

那要怎么辦?很簡單,用圖片代替之!效果就是這樣:

 

圖片

當然,如何實現,還在研究中。。。。

有了刪除,那么批量刪除神馬的就必不可少了。一種方式是將刪除按鈕放在表頭:

 

圖片

酷狗的做法是放在了與之對應的狀態欄上:

 

 

圖片

這個,哪個好那個壞就是一個仁者見仁,智者見智的問題了。不討論。 

關於底部統計行,說實話,DotNet做的並不好。可以說非常差。原生的不支持就算了,連擴展的控件都相當的挫。。。(這是我遇到的最頭疼的問題)。

 

如果使用了“瀑布加載”的話,可能會有改變,可以把統計信息在最后顯示。就是在沒有更多數據的時候。

 另外一個,就是要實現hover效果,按鈕,數據行,甚至圖片。。那樣的話,效果就會非常nice!

列表hover:

 

圖片

按鈕hover:

 

圖片

 最后一個是關於搜索框的

 

圖片

這個,我實在是不敢做點評,確實太強大了。也使用了windows8的風格。

再說一點,就是細節和配色問題。當然,我們搞開發的跟搞UI設計的不一樣,可能不會關注這些,但是還是有必要注意一下的。就是色彩變化和光線效果。。體現到界面上就是表格的表頭:

 

圖片

 可以看出,表頭的各個單元格之間的分割線不是一條線拉到頭的。。。

 

圖片

 吐槽:真的是差別啊,看的我都惡心了。。。

今天就這樣啦。。。轉載請注明哦,韋氏原創哈。。。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM