mobile 01 APP-基礎使用研究(ios版)

啟動畫面

IMG_5287-577x1024

LOGO加上識別色背景,很多APP都會這麼強化品牌印象。可能是我常看到類似手法,也清楚它的用意,所以對啟動畫面很無感,它的存在就像網站的flash進場動畫,能跳過就跳過。像我這麼沒耐性的人會希望開啟APP後,能直接看到操作介面,無論內容有沒有載完,都會讓我覺得比較有效率。

主畫面

IMG_5341

最上方navigation bar,中間是APP標題也是下拉選單,選單內包含網站的各大討論主題。因為項目多,選單拉的很長,改兩欄排列應該能節省不少高度。

IMG_5314

右上方有搜尋功能的圖示,存在感不同於網站上被弱化的搜尋介面。緊鄰navigation bar下方的文字型segmented control,只有熱門與最新兩大分類,很剛好都是我逛mobile01首頁時會感興趣的內容,所以該區塊佔據APP主畫面的大半篇幅,也許背後有數據在撐腰。文章列表僅強調標題,其餘一律弱化,這部分的處理很恰當,畢竟網站首頁也只放標題,有趣的是回覆數被稍微強調,而且還擺在發文者前面。最下方tab bar,選單數量符合ios最多5個的建議,超過的通通丟到“更多”,選單採圖示搭配文字,補足圖示不夠直覺的缺點,扁平化的圖示風格,僅線段不填色,同下方文字弱化處理。

mobile 01的重度使用者若初次使用APP,可能覺得內容量過度精簡,僅剩一塊輪播banner,連廣告都不見蹤影(笑)。網站首頁大量的圖文訊息其實被埋在"查看更多新聞"的連結裡,我用了一段時間才發現這個弱化的進入點,點擊後會進入APP資訊架構的第二層。

IMG_5351

再來是操作介面的改變,需要花點時間適應,像我這個輕度使用者都覺得差很多了。不過把網站的內容與功能全塞到APP,也可能犯了過於複雜的毛病,取捨平衡不是件容易的事。

以下tab bar其他功能的開啟畫面

IMG_5316

IMG_5317

從tab bar開啟的搜尋畫面比較完整,不如統一採用這個版本,以點擊取代一部分的手動輸入。
IMG_5318

對我來說,"收藏"和"已參與"可以合併,該頁面再用副標題或segmented control區分哪些是手動收錄的文章,哪些是參與討論的文章。按照這個邏輯,只要參與討論,該討論文章會自動收錄,而且收藏文章依討論主題分類,文章收錄數量一多之後比較方便檢索。

IMG_5315

合併"收藏"和"已參與"的用意,是為了騰出按鈕空間給"更多"當中的"閱讀紀錄",對我來說很重要的功能。

最後,關於主畫面的操作介面,有兩點值得一提,第一是沒有採用常見的左側收合選單(navigation drawer),這不是問題點,反而是正宗做法,因為該操作介面不在ios的介面規範裡,倒是android有提到這個UI pattern。第二是兩個搜尋按鈕,一個位於navigation bar右側,另一個在tab bar中間,功能重疊,沒有必要同一畫面上出現兩個進入點。若搜尋有高度使用的數據支持,可以考慮常駐在navigation bar。

文章列表

IMG_5349

進入討論主題後的文章列表,變成連續載入不分頁,尋找文章時缺少記憶點,不過"收藏"和"閱讀紀錄"可以彌補這項需求,前提是登入帳號。這頁開始出現網頁上常見的麵包屑路徑,受限於高度過小,正確點擊有困難。畫面右下方圓形按鈕是發表文章,位置固定,不隨畫面捲動,很material design。幾乎全灰階的內容區塊,除了標題,其他資訊皆弱化,強弱對比明顯,如果再拉大每個討論串的間距,瀏覽時較不會有資訊超載的壓迫感。

文章內容

進入文章內,一反文章列表連續載入的方式,最下方有換頁選單。navigation bar右側常駐四個圖示,沒有文字說明。前兩個功能使用的圖示符合ios的介面規範,在其他APP也常看到,可以說是共通的默契了;後兩個自訂圖示,因數量不算多,即使不曉得其功能,大概操作一下就會了,應該不致於造成困擾。左側返回按鈕也沒有文字說明,若空間足夠,在圖示右邊加上前一頁的navigation bar標題比較理想。

這裡必須要講,搜尋功能又出現了!原以為搜尋範圍自動限縮在該討論串內,很顯然不是,它就是全域搜索,搜尋結果可能會帶離目前主題,讓我不太理解這功能的設計。

IMG_5311

IMG_5312

IMG_5305

閱讀環境設定看似微不足道,對於偏愛夜深人靜滑手機的使用者,應該是很人性又實用的功能。在昏暗環境裡,反白畫面較不刺眼,且被弱化的訊息看得比較清楚,同時搭配螢幕亮度與字級設定,很夠用了。

每頁下方列出後續頁數的總回覆數,例如"還有75篇回覆",鼓勵使用者繼續看下去,滑到最後一頁則是"回文是美德,現在就積德"。尚未出現回覆文章的話,文案將變成"一起蓋大樓",好像APP在跟你對話一般,有趣的巧思。

文章頁有兩種換頁方式,第一種是左右捲動的手勢換頁,要往前或往後一頁很方便,這已經是常態做法了;也可以點擊最下方tab bar的頁數選單,開啟獨立頁面,點擊各頁數按鈕,或按"跳頁"開啟ios預設的對話框。輸入欄位有做防呆,會擋超過最大頁數的數字,這應該是針對頁數爆量的情況。不過我個人認為,為了跳頁而開啟獨立頁面的做法,有點多此一舉,改用跳出選單的方式比較便利。

IMG_5309

發表文章與回覆文章

輸入內容罕見的使用html標籤與文字符號表意,優點是精簡空間,缺點是網路生手容易困惑,例如貼圖再怎麼選,輸入欄位就是看不到圖。不能修改的欄位外觀應該要區隔其他可輸入欄位,至少弱化其視覺比重。"取消"雖然必要,卻不該是重點,與其長得跟"發文"一模一樣,不如弱化處理。

IMG_5338

IMG_5332

文字格式只開放色彩設定,沒有包山包海加入一堆編輯功能,把操作介面搞得過於複雜,值得鼓勵。最右側的兩個小色塊讓我誤以為是可捲動的線索,其實是個bug。

其他

最後是系統穩定性,ios版的APP閃退頻率過高,有時還順便幫我登出了。知道在手機上輸入帳密有多麻煩嗎?想到就累,如果只是看文章的話我根本不想再登入了。對照我的輕度使用狀況,又有高閃退,這對使用經驗是重傷害,尤其文章寫到一半沒暫存那種,輕則惹火使用者,重則賺到最低分負評。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *