iPeen愛評網 iPhone App UI Design

在一次機會下,我在想該如何把愛評網的介面做使用者優化設計。其實使用者要的很簡單,他要的就是簡單而已。

進入app後

我們最常碰到的問題就是,我不知道該點哪一個?尤其是LBS服務的app,因為當你點選了這個app不外乎就是使用三個功能:

  1. 定位
  2. 打卡
  3. 搜尋

你可以想像,當你決定要使用這個app不就是已經知道要使用什麼服務了嗎?我到了一間餐廳後想要告訴朋友這裡的餐點很不錯,我拿出了iPhone想打卡,我點選了app卻找不到可以立刻打卡的button?因為自從我拿出iPhone需要多麼多步驟,按下home鍵、解鎖、點app、打卡…實在太繁瑣了。我希望結合了iPeen本身的字體,把兩個e換成具有功能的按鈕元件,有趣又好玩。最下方登入後才能設定是簡化許多步驟的方式,因為大部分的設定選項其實跟帳號本身有很多關連。

定位畫面

 

這是在點擊定位後的畫面,以往的距離位置顯示方向為上下,能提供資訊的面積其實很小,使用傾斜的作法一方面是讓顯示面積更大(距離越遠越小),左右的資訊因為會超過螢幕外,可 以提示使用者藉由橫掃看到更多。使用者會許會拿斜斜的使用,但是並不阻礙手勢的操作。

打卡畫面

如我前面所提到,我在進入app前其實我已經知道我要做什麼,而程式雖然不知道使用者想要幹嘛,但是當確定要打卡了,一定是在依據目前所在的位置(誤差也不會太遠)來做打卡動作,沒有人在微風吃飯打在台北車站,所以我們可以設想說,最上方的提示為目前所在的點做打卡,節省尋找打卡地點的多餘步驟。

登入/設定

在登入與設定中,有兩種登入模式ipeen帳號與facebook帳號,原先設計為兩個欄位(帳號/密碼),兩個登入按鈕。其實這是很矛盾的設計,因為兩個按鈕其實沒什麼關連,會讓人產生疑惑/猶豫,在輸入好Facebook帳號密碼後點FB帳號登入結果是跳轉至fb app的API授權,挺怪的,我會將兩種分開,至少不會有白打的狀態。

結語

這個UI/UX設計其實是我自己想嘗試並且探討操作介面與人的使用習慣,我個人的想法是Form follow function,如同賈伯斯所說:Less is more。將任何重複的元件刪除,留下最重要的,必要的時候,甚至要犧牲某些功能,因為你如果覺得遙控器這麼好用的話,iPhone就不會這麼成功了。