::GAME2.TW::臺灣遊戲攻略

華語手機遊戲攻略,遊戲資訊專業網站

詳解Path 2.0的UI設計

如Path的創始人Dave Morin所說,Path的第二個階段是要讓人們在人生道路上“抓住所有體驗”(capture all the experiences)。 這款目前的私密社交應用王者,在半年前對於UI系統的重新設計可謂是驚煞旁人。其人性化的設計理念與簡潔到極點的設計風格可以說是一本教科書,以至於雖然吸引了大批模仿者但是——在這一派風格中——始終無出其右者。

以下是一篇關於Path 2.0的UI系統的分析,從“個人頁面”、“他人頁面”、“分享機制”三個角度點評了Path2.0在UI設計上的亮點,附議大量配圖,非常的詳盡,各位工作中對UI設計有一定涉獵的讀者一定不可以錯過。

*該文源自網絡上傳播的一份PDF文件,互動中國嘗試尋找原作者未果,如果您是該文章的版權擁有者,請隨時通過網頁最下方的通訊方式與我們聯繫。

Path2.0——移動社交網絡應用說明

移動社交網絡:移動社交網絡Path發布第二代了! Google曾打算一億美元收購Path遭拒,可見非常牛。安裝完成後,只需簡單填寫個人信息,你就可以開始你的Path之旅啦!如Path的創始人Dave Morin所說,Path的第二個階段是要讓人們在人生道路上“抓住所有體驗”(capture all the experiences)。

Path 2的UI設計相當出色。向右滑動會出現設置頁,向左滑動會出現添加好友頁(可通過通訊錄、Facebook添加,或通過郵件邀請),向上向下滑動後,會出現一個時間軸(timeline),方便地提示你當前查看的Path(即自己或好友的分享)是何時發出的。最核心的是左下角的紅白色加號按鈕,點擊後會出現6類功能,依次是:照片、和誰在一起、當前地點、在聽的音樂、在想的事情、以及睡眠,使用起來得心應手,十分方便。你不僅可以和Path好友分享,還能把你的分享發佈到Facebook或Foursquare等網站上。

和之前版本相比,Path 2從側重照片分享走向“分享一切”、好友上限從50人增加到150人、長途旅行以後,Path還會自動利用位置功能幫你發布“已達某地”信息(可在設置里關掉)。

總體分析此應用結構:

導航title有3種:

以“path” 為titlebar文字的首頁

以人名為titlebar的個人主頁

以地址、歌手名、發佈時間為titlebar文字的信息詳情頁

沒返回按鈕,而是在按鈕上以title文字作為導航,也比較清楚的指導用戶上一級是哪個頁面。另外,工具欄縮略成一個“+”圖標,以動態有趣的方式展示,也是其交互一大亮點。

初次進入沒有登錄前的引導頁面,拖到最底部效果:

亮點1:拖動過程中,遇到有信息的地方,都會浮動動態顯示該信息的發佈時間。

註冊頁面,登錄頁面:

註冊頁面輸入信息很多,故設計上規避了傳統的輸入框的樣式,而是採用了筆記本條紋欄的樣式,以簡化視覺元素;在性別和年齡的設置上,採用小一號的字體,弱化展示也節省了頁面是所有信息在鍵盤上方都能完全顯示,方便註冊輸入。

註冊後選擇頭像,設置名字:

登錄過程頁面,登陸成功-path首頁:

亮點2:點擊左下角的“+”圖標,從下至上弧形展開操作圖標,“+”圖標變為“x”圖標;點擊每個圖標,都會以放大漸隱該圖標的動態來進入當前信息發布操作頁面。長按頁面任意位置或“x”圖標,則旋轉收回所有的圖標還原為默認的收起樣式。

個人主頁:

注意和path首頁的區別,首頁有“+”發佈各類信息的浮動按鈕,而個人主頁沒有;另外個人主頁只有自己發布的信息,故線左側沒有發布人頭像。如下,左圖是個人首頁,右圖是path主頁。

亮點3:首頁和個人主頁的頁面左側都有一條豎線,每條信息都有一個節點,代表發布當前信息用戶的交互人/發布的信息類別。

  • 線的節點上是頭像,則表示與此人的交互信息,比如好友對某人的評論,加為某人好友,和他在一起等。若同時添加多個好友,則頭像圖標會動態輪換展示這幾個好友的頭像。
  • 為空白點則代表自己的普通行為,如加好友,個人信息的設置,說一句話等。
  • 月亮代表睡覺,太陽代表起床,音樂圖標代表聽到音樂,地點圖標代表當前地點發布。
  • 加深的點,表示設置當前城市。

圖標設計簡潔易識別,色彩亦能體現其功能區別,雖然圖標一堆,卻沒有繁雜感。

亮點4:點擊首頁title左側的menu圖標,和title右側的好友圖標,則分別朝右、朝左滑開當前頁面展示如下左圖,右圖,再次點擊圖標則按原路滑動收回至首頁。

設置-修改保存cover圖片的等待過程,收取提示信息的設置圖標,以灰色/亮色來表示是否收取。 (再次提醒圖標設計)註銷採用紅色按鈕,以起警示作用

初次使用定位,則將個人定位至當前城市,如下圖為西安市,展示最近訪問的當地人,及總數。搜索不到地址時,提示創建該位置的彈層

點擊他人頭像進入他人主頁,若不是好友,則顯示如下左圖,加好友過程如下:

加好友成功後,好友的主頁:

因為自定義了cover圖片(可以理解為網頁banner背景吧),每個人的主頁都可能效果不同。

查看他人的圖片信息詳情:

信息的詳情頁面都有最近訪客的頭像展示,若某訪客在此信息上發表了表情,則在頭像上展示該表情。

  • 點擊圖片則全屏展示:若為橫向圖片,則旋轉至橫向全屏展示,再次點擊圖片則旋轉收回至原頁面;豎向圖片則放大至全屏並朝上滑動至頁頂,再次點擊則朝下收回並縮小至列表樣式。
  • 長按圖片則彈出save選項彈層。

音樂信息查看:

點擊音樂信息,則彈出音樂操作選項:查看該歌手音樂(右下圖)、從itunes下載歌曲

查看當前地點簽到信息,發布表情交互:

長按自己所發布的信息的右側表情按鈕,則彈出操作層如下:彈層包含發布表情,刪除該信息,評論的快捷方式,以及被幾個好友查看的記錄。

發布信息:

所有的發布信息頁面除了發布心裡話之外,發布圖片/音樂/和誰一起的第一步是到相應功能的選擇圖片/音樂/好友,選擇完畢則到了“post”發布頁面:

thought發布頁面:

左下角的鎖圖標,表示僅對自己可見;右下角是分享至其他應用的按鈕。若未綁定則提示綁定。

選擇地點/好友/音樂頁面:

選擇當前地點/好友/音樂後的post發布頁面:

最多可以展示with的4個好友(可以選擇超過4個,但是此處頭像只展示4個),這個頁面排版直觀而易於操作。

來源:http://www.damndigital.com/archives/56371

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy