[翻譯] 如何修正壞 UI

zonble
zonble
Nov 28, 2015 · 23 min read

UI 堆疊

在即時傳訊 App 中活生生的 UI 堆疊的例子。每個狀態的改變都有轉場效果。

理想狀態

啊!多麼圖像化!好多資料!好多照片!
在市場上,Tinder 可說是擁有最好的理想狀態者的其中一員。

空白狀態

George Takei 可能會說:「喔,我的天…」

首次使用(Onboarding)

Hipchat 會在對的時間,告訴你可以使用哪些有趣、而且平常被隱藏起來的功能。
Facebook Paper 在告訴你關鍵手勢操作的時候,逐步教導你這套 App 的功能。
Basecamp 現在沒有可以顯示的內容,不過,與其讓畫面留空,Basecamp 放了一些假圖,用視覺化的方式讓你知道產品的潛力。在我內部的那個想把事情做出來的自我,就讓我想建立新專案,讓整個畫面都充滿我所幻想的生產力。
在第一次打開 AirBnb 的願望清單的時候,會顯示一個空白狀態畫面。我很喜歡這個設計,因為 AirBnb 並沒有強迫你非要做什麼事情不可(這很符合這家公司的設計語言),但同時也很清楚地導引你下一步該怎麼做。

用戶手動清除資料

這張 iOS 6 的螢幕截圖現在看來有點古老,但是當我們看到這個解除「收件夾全空」成就畫面時,心中仍然不免激動。你獲得一張拍攝自某家咖啡店、或是某地日落的手挑精美 Instagram 照片,你還可以把這張照片分享到其他地方,你不但慶祝了自己的成就,也為 Mailbox App 做了宣傳。這是你、Instagram 與 Mailbox 的三贏局面!

找不到資料

這個搜尋結果充分顯示了我有多麼熱愛搖滾樂。好吧,有時候非得要把這些很個人的事情拿出來講。
Pintrest 則與 Amazon 不一樣,畢竟 Pintrest 有他們獨特的風格。當用戶在 Pintrest 中輸入了沒有結果的關鍵字的話,Pintrest 則提供了一種相對來說也相當簡單的方式,讓顧客手動調整關鍵字。

錯誤狀態

是!否!或許?

局部資料狀態

這是 LinkedIn 有名的「個人檔案完成度」柱狀圖。這個設計會鼓勵你達到百分之百完成。
Dropbox 則會告訴你,你距離獲得想要的額外儲存空間還有多遠,而我很確定,Dropbox 用戶最想要的就是額外的儲存空間。Dorpbox 不僅告訴你已經完成了多少步驟,這些步驟還有一些額外的副作用,便是教育並啟發顧客他們做過的事情非常有價值。

載入中狀態

畫面骨架(Skeleton Screens)

Luke Wroblewski 的 App — Polar,當中的骨架載入畫面。
Facebook 在 Paper 這套手機 App 中創造了類似的效果,後來也套用在網站上。Facebook 在他們的畫面中,顯示符合內容呈顯的骨架,搭配他們所謂的「微光效果」(shimmer effect)後,在載入資料的時候,這些畫面框架還會發出一陣一陣的微光。

樂觀預期可以執行成功

實際範例

這裡,可是個真實世界

重點回顧

    zonble

    Written by

    zonble

    XDDDD - eXtreme Due Date Driven Development

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade