【翻譯】path for iOS設計細節賞析

      作者:
      分類: 觀點/經驗
      2015-12-10
      1176

      1.登錄模態

      Path使用他們的彈出(Popup)設計語言,在第一時間取悅新用戶。輕微的彈入和漸隱效果使得登錄頁面看起來如此鮮活。太棒了——我們將會在接下來的部分看到這種式樣應用在Path的其他地方,保持了良好的一致性。

      Image title


      2.新手引導

      新手引導流程是如此的順暢!沒有多余的廢話,也沒有不必要的信息,只顯示幾行簡單的入門提示,模態窗口隨之消失并顯示主頁,主要分享按鈕(下方的+號處)會彈出工具提示歡迎用戶到來。可以看得出設計師花了多少心血設計這些小細節——尤其是工具提示上的用語非常講究。

      Image title


      3.Path最著名的地方

      我記得在Path剛問世的時候,這個彈出式分享按鈕吸引了大量用戶和設計師的目光。我記得我盯著屏幕看了老半天,一直在想他們到底是怎么做出來這個的?!Path最近的更新對這一設計細節進行了細微處的更改,但用戶體驗基本不變。

      單擊“+”號打開一個彈出式菜單,里面是所有用戶可以分享的內容。菜單圖標很有趣地向外彈出,同時旋轉。當然,這種動畫設計會讓選擇時間變長,但是給新用戶增加的愉悅感是無法估量的。

      Image title

      4.引導頁

      Path在引導頁設計上有許多非常棒的小細節。這些頁面會在新用戶打開一個新標簽時出現,幫助用戶更加了解Path。
      不要忽略引導頁模態窗口從屏幕上滑走的細節動畫,它雖然只在短短一秒內發生,但卻為整體用戶體驗增色不少。

      Image title

      5.個人頁漸隱效果

      我看到越來越多的app采用這種滾動+漸隱的效果了,這種交互很漂亮,在Path上的使用也非常得體。當你滾動個人頁時,屏幕上的一些元素會漸漸消失,逐漸被一個簡單的“我”的導航欄標題所代替。

      需要注意的是背景照片是直接顯示在iOS狀態欄的下方的,將自己的照片填充滿屏幕的感覺真好!

      (傳不上圖)


      6.發布頁交互

      Path采用友好而又有趣的方式,讓用戶和朋友進行分享——像素完美的貼紙表情可以傳達情感。注意看當我單擊發布文章的愛心按鈕時,表情框是像氣泡一樣彈出的,太可愛了。

      Image title

      7.更改個人頁圖片

      這一細節交互同樣很有意義,但是經常被忽略掉了。單擊個人頁標題處的任何地方,會彈出更改背景圖的上拉菜單(Action Sheet)。你不需要到處去找設置按鈕,或者選項面板,只要單擊你希望改變的地方,這樣的好處是沒有多余的學習成本,我喜歡!

      Image title

      8.購買表情貼紙

      我把這個細節加進來,是為了強調貫穿整個app的模態窗口動畫非常具有一致性。

      Image title

      9.地圖視圖

      這個視圖上有兩點非常棒的地方:

      ①后退按鈕使用的是Path標志性的“P”logo,這點對我來說很酷——對于設計師來說,這里的處理會是加上一個簡單的“返回”或者“關閉”字樣,但是加上程序的logo會給這款app增添更多的風味和人情味。

      ②注意當我旋轉地圖時所有移動的部件:設計精美的指南針會隨之旋轉,文字也會旋轉并移動。

      Image title

      10.搜索框

      當我在毛玻璃風格的搜索框內單擊時,一些篩選選項會像氣泡一樣出現在屏幕上,吸引我進一步點擊探索。

      Image title

      11.加載提示

      當我開啟臨近搜索時,我們可以看到這個美妙的加載提示映入眼簾。我想強調的是Path的設計師放棄了好幾種顯而易見的解決方案——下拉菜單(Spinner),進度條(Progress bar)或加載文字(Loading text),選擇創建自己的加載解決方案,與app整體的設計語言匹配。

      Image title

      12.朋友

      在這個頁面中,我想搜索一位朋友的名字,將他加到我的圈子里去。過程的細節或許看起來微不足道,但不應該被忽略——注意當你添加或移除好友時,那顆星星彈入彈出的方式。

      Image title

      13.分享流

      首先需要注意的是,當用戶單擊時分享按鈕是如何交互的。在下面的視頻中,我選擇了一段引用來分享,引用圖標會變大,同時漸漸消失。這的確是一個非常流暢順滑的過場動畫,我發現越來越多的app都在采用它了(例Twitter)。
      一旦進入了編寫內容視圖,我試著切換“好友圈”和“私密”選項,發現滑入視圖中的上下文提示符運動地也非常流暢。

      Image title

      14.時鐘

      當你滾動信息流視圖時,屏幕的右側會出現一個時鐘工具。如果繼續滾動,會基于它下層的視圖來自動校正日期和時間。時鐘的指針動畫非常棒,如果你想要研究如何用簡單的辦法取悅用戶,不妨下一個Path試試。

      Image title

      15.下拉刷新

      沒有多少界面的流動性,彈性和整體觀感可以和Path的交互媲美。值得注意的是Path的很多交互要比Facebook的paper來得早。

      Image title

      16.官網

      設計師同樣想辦法把網站也做得同樣有趣,即使對一個著陸頁也是如此。

      0
      5
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 成人区人妻精品一区二区不卡| 国产一区二区精品| 日韩精品无码中文字幕一区二区| 国产福利一区视频| 久久99国产一区二区三区| 精品国产一区二区三区久久蜜臀| 中文字幕不卡一区| 亚洲午夜一区二区三区| 成人一区专区在线观看| 成人国内精品久久久久一区| 高清国产AV一区二区三区| 一本大道在线无码一区| 日韩AV在线不卡一区二区三区| 91精品一区国产高清在线| 无码精品尤物一区二区三区| 国产精品一区不卡| 久久无码人妻一区二区三区| 成人久久精品一区二区三区| 中文字幕一区二区三区在线播放| 精品熟人妻一区二区三区四区不卡 | 亚洲无线码一区二区三区| 国产日本一区二区三区| 一区二区三区中文字幕| 狠狠色综合一区二区| 免费在线观看一区| 亚洲熟妇AV一区二区三区浪潮 | 欧洲精品码一区二区三区免费看 | 亚洲AV福利天堂一区二区三| 97久久精品午夜一区二区| 成人区人妻精品一区二区不卡视频| 鲁大师成人一区二区三区| 一区二区三区伦理高清| 日韩一区二区久久久久久| 香蕉久久一区二区不卡无毒影院 | 久夜色精品国产一区二区三区| 精品aⅴ一区二区三区| 秋霞午夜一区二区| 国产一区二区好的精华液| 国产一区二区三区福利| 久久国产精品最新一区| 国产99精品一区二区三区免费|