【UI 陷阱】消失的訊息

sound bites

你躺在床上,拿著手機上下滑動瀏覽著臉書上不斷更新的訊息,好不容易看到一則有意義的訊息或是有趣的照片,此時沒注意一個翻身,手機聰明地切換成橫向閱讀模式…「我 X!我想看的訊息怎麼不見了!?」於是乎你又慢慢的捲動尋找到那則訊息的位置,不料此時又不經意地稍微調整了一下姿勢,手機又聰明地轉回直立式的閱讀模式….「挖勒!?」最後你只好小心翼翼的保持你手的姿勢以閱讀完你想要看的訊息。

這樣的情境的確常常發生在某些 APP(舊版Facebook iOS 就是一個很好的錯誤範例)!但是為什麼有的 APP 卻能在手機轉向時,訊息仍然保持在原本的位置呢?

清單視圖(ListView or TableView)可以簡單分為兩類:每列資料高度(1)為固定(2)視內容而變動,而訊息位置在手機轉向時跑掉的問題通常只會發生在第二種類別裡,原因在於當手機轉向時,因為寬度的改變,清單視圖必須依據新的寬度重新計算每列資訊所需的高度,例如圖片的縮放、更改排版位置等,但此時捲軸的位置卻不會隨之改變,仍然維持在原來的深度(若假設每列資料都是圖片的話,在轉向時將會等比例縮放如下圖所示),所以看到的東西也將隨著每列資料高度的變化而改變。

orientation2

這的確在閱讀上會造成很大的困擾,尤其是當使用者想要換手機方向閱讀時,所以細心的開發者就應該必須要注意到這點,解決的辦法就是在手機轉向時,必須記錄使用者原本是正在閱讀第幾列資料,在手機轉向後手動將視圖捲動到原來資料的正確深度,這樣簡單的機制便不會讓使用者惱怒或是找不到資料!

 

延伸閱讀:

釋放瀏覽空間:滑動隱藏術

【ui-陷阱】套牢的進度對話框

【ui-陷阱】消失的訊息

 

Image via TheGiantVermin, CC License

在現今的網路時代,資訊在網路上傳遞的速度已經遠遠超過我們的想像了,這樣大量產生的資訊,讓在電腦前面的我們難以迅速的消化。我們很少有時間可以仔細的看過每一則訊息、...
在先選擇對的顏色,而不是喜歡的顏色一文中,我們介紹過,視覺上資訊顯示清楚的關鍵就在於色彩之間明度的差異,而色彩上明度差異最大的就是黑色跟白色。因此當你的畫面上有...
許多的網站都會採用標籤系統來讓使用者自己管理自己的分類。而通常,標籤系統為了讓使用者使用得更順利,會採用一種「標籤推薦系統」來幫助使用者快速的選擇自己所希望輸入...
在手機螢幕上能利用的空間非常有限,我們不想浪費掉任何一個可以展示資訊的空間,試圖將它們透過各種視覺化或是直接顯示的方式表達出來,即使有的時候需要呈現的重要資訊其...
操作制約,指的是生物受到刺激後引發行為改變的一個過程。心理學家 B.F. Skinner 在操作制約的研究中,將受測的老鼠放置在有可以拉動的把手的小籠子裡,然後...
所謂的無尺度(Scale-Free),指的就是遵守冪次法則(Power Law)分佈現象的行為。而冪次法則和一般人常聽到的 80 – 20 法則十分...
© 2013 Desiring Clicks. All Rights Reserved.
Top