Android平台QQ空間概念視覺稿

一、前期的準備

製作這次風格稿的時候，問了身邊的一些使用QQ空間的朋友，問他們是如何理解QQ空間的？希望的QQ空間是什麼樣子？得到了N多的答案，其中的一些關鍵字我摘錄了出來：“好玩些、讀寫方便、速度快操作流暢、酷一點、可以看到更多和PC使用者的內容、讓我們來選擇自己喜歡操作方式、精緻漂亮、要有QQ空間自身的特點…”

在看完這些朋友們給的這些資訊之後就到了揣摩消化分析理解體現階段，同時希望可以在風格上嘗試一個和以往的版本不同的地方，既可以體現出QQ空間自身的特點又可以讓使用者耳目一新，接下來就是草圖和素材收集階段，下面就是我對QQ空間的一些認識通過圖片表現一下吧：

你能在下面的視覺稿中發現這些圖片的影子。

二、設計展現階段：

使用者進入登入介面後，在未輸入帳號的情況下介面中logo置灰顯示，使用者點擊帳號輸入框後logo變亮（在視覺上是從不可操作變化為可操作即可點擊狀態），當使用者輸入密碼後，點擊logo進行登入。

進入個人中心大家可以看到這裡介面的tab欄是做成隱藏狀態的，只露出一個可以點擊的向上按鈕，而且介面中的title和tab都設計成了半透明效果，這樣設計第一為了讓使用者在視覺上擁有更大的閱讀空間，第二也是為了讓使用者有一個愉快的操作體驗，其實使用者在進入個人中心後，他的觀注點會是個人中心裡的各種操作，包括寫心情、拍照片、查看留言評論、回複等等，只有當觀注點改變的時候（目的性改變變強）比如需要進入我的首頁查看自己相關的內容、去玩一些應用這個時候使用者才會去切換相應介面，這也是把tab欄設計成隱藏狀態的一個原因。

在介面中為了讓使用者很輕易的識別出每條FEED的屬性設計了一些對應心情、日誌、評論、相片、贊等一些表徵圖。

使用者進行頻道切換時點擊或向上拖動下面的向上按鈕，在觸覺上會有震動反饋，向上的按鈕變大，從視覺上看像是被手指壓住拖動。

這時轉盤形的tab欄從下方被喚出，當前為個人中心介面，所以對應在tab欄上的個人中心的表徵圖是被啟用的，在對tab欄表徵圖設計處理的時候，均採用了擬物化的設計。

對tab欄操作的時候，使用者可以用2種方式進行頻道間的切換，點擊相應的表徵圖或拖動環形轉盤便可切換到對應的頻道中，這樣在保證快速切換的同時也增加操作的趣味性，每個頻道對應的icon移動中間位置被啟用（效果為淡入淡出效果），同時頻道進行切換，下面2張圖分別代表手指觸控圓盤進行左右滑動時tab欄的變化：

 

下面是個人首頁、好友、應用介面

個人首頁介面

好友介面

應用介面

三、一些細節和擴充性

1、考慮到使用者的使用習慣和操作方式的不同，在這裡把主動權交還給使用者，提供3種操作方式讓使用者自己定義，預設情況下的頻道切換為從下方喚出，使用者可以在設定介面中調整tab欄的操作方式。

2、目前的tab欄上有5個頻道表徵圖，考慮Qzone的強大整合性不能排除以後繼續增加頻道的可能，所以採用轉盤式的設計方式，也就是這個風格稿的主題之一——玩轉Qzone。

3、在輸入帳號密碼驗證的時候，系統會自動判定男女使用者，如果是女性使用者登入後系統會自動選擇適合女性的皮膚樣式，對應的表徵圖也會發生改變，比如個人中心的表徵圖就會變成一個女孩的ICON。

在產品設計中使用者需求和具體的情景使用感受，也是一個設計師要去全面考慮的。