一、前期的準備
制作這次風格稿的時候,問了身邊的一些使用QQ空間的朋友,問他們是如何理解QQ空間的?希望的QQ空間是什么樣子?得到了N多的答案,其中的一些關鍵字我摘錄了出來:“好玩些、讀寫方便、速度快操作流暢、酷一點、可以看到更多和PC用戶的內容、讓我們來選擇自己喜歡操作方式、精致漂亮、要有QQ空間自身的特點…”
在看完這些朋友們給的這些信息之后就到了揣摩消化分析理解體現階段,同時希望可以在風格上嘗試一個和以往的版本不同的地方,既可以體現出QQ空間自身的特點又可以讓用戶耳目一新,接下來就是草圖和素材收集階段,下面就是我對QQ空間的一些認識通過圖片表現一下吧:
你能在下面的視覺稿中發(fā)現這些圖片的影子。
二、設計展現階段:
用戶進入登錄界面后,在未輸入賬號的情況下界面中l(wèi)ogo置灰顯示,用戶點擊賬號輸入框后logo變亮(在視覺上是從不可操作變化為可操作即可點擊狀態(tài)),當用戶輸入密碼后,點擊logo進行登錄。
進入個人中心大家可以看到這里界面的tab欄是做成隱藏狀態(tài)的,只露出一個可以點擊的向上按鈕,而且界面中的title和tab都設計成了半透明效果,這樣設計第一為了讓用戶在視覺上擁有更大的閱讀空間,第二也是為了讓用戶有一個愉快的操作體驗,其實用戶在進入個人中心后,他的觀注點會是個人中心里的各種操作,包括寫心情、拍照片、查看留言評論、回復等等,只有當觀注點改變的時候(目的性改變變強)比如需要進入我的主頁查看自己相關的內容、去玩一些應用這個時候用戶才會去切換相應界面,這也是把tab欄設計成隱藏狀態(tài)的一個原因。
在界面中為了讓用戶很輕易的識別出每條FEED的屬性設計了一些對應心情、日志、評論、相片、贊等一些圖標。
用戶進行頻道切換時點擊或向上拖動下面的向上按鈕,在觸覺上會有震動反饋,向上的按鈕變大,從視覺上看像是被手指壓住拖動。
這時轉盤形的tab欄從下方被喚出,當前為個人中心界面,所以對應在tab欄上的個人中心的圖標是被激活的,在對tab欄圖標設計處理的時候,均采用了擬物化的設計。
對tab欄操作的時候,用戶可以用2種方式進行頻道間的切換,點擊相應的圖標或拖動環(huán)形轉盤便可切換到對應的頻道中,這樣在保證快速切換的同時也增加操作的趣味性,每個頻道對應的icon移動中間位置被激活(效果為淡入淡出效果),同時頻道進行切換,下面2張圖分別代表手指觸控圓盤進行左右滑動時tab欄的變化:
下面是個人主頁、好友、應用界面
個人主頁界面
好友界面
應用界面
三、一些細節(jié)和擴展性
1、考慮到用戶的使用習慣和操作方式的不同,在這里把主動權交還給用戶,提供3種操作方式讓用戶自己定義,默認情況下的頻道切換為從下方喚出,用戶可以在設置界面中調整tab欄的操作方式。
2、目前的tab欄上有5個頻道圖標,考慮Qzone的強大整合性不能排除以后繼續(xù)增加頻道的可能,所以采用轉盤式的設計方式,也就是這個風格稿的主題之一——玩轉Qzone。
3、在輸入賬號密碼驗證的時候,系統(tǒng)會自動判定男女用戶,如果是女性用戶登錄后系統(tǒng)會自動選擇適合女性的皮膚樣式,對應的圖標也會發(fā)生改變,比如個人中心的圖標就會變成一個女孩的ICON。
在產品設計中用戶需求和具體的情景使用感受,也是一個設計師要去全面考慮的。