Instagram Design Detail(上)

因本文內容由大量GIF演示內容,加載速度稍慢請耐心等候

本文翻自Brian Lovin在2015年2月24日發(fā)布的“Design Detail:Instagram for iOS”,轉載請注明出處

原文地址:http://blog.brianlovin.com/design-details-instagram-for-ios/#1

Podcast地址:http://designdetails.fm/

以下為本人的翻譯內容:

大膽猜測99%正在看這篇文章的親們都用過Instagram。它改變了我們與朋友們分享照片的方式,并在數(shù)年間變身為300,000,000多位用戶手中不可或缺的app之一。

我之前從未考慮把Instagram加入到“設計細節(jié)”這個帖子的原因是:Instagram的大部分設計細節(jié)都顯而易見。這不是給Instagram天賦異稟的設計團隊挑刺,因為一目了然的設計往往是最難的設計。

最后我還是決定好好研究一番。沉浸在Instagram優(yōu)美的圖片流中,我找到了許多著實讓到整個產(chǎn)品更顯優(yōu)雅的精彩細節(jié),請盡情享受!

1、菜單欄

“精簡而優(yōu)雅的開始”,這可能是Instagram里我最喜歡的設計之一。當你滾動界面時,頂部的菜單欄漂亮地縮放并消失。

或許很多人會認為,底部的標簽欄也應該使用這種過渡效果,但我認為“功能欄始終存在并可見”才能帶來更好的體驗。

2、快速搜索

如果你點按底部工具欄的搜索icon,app將會直接跳轉至搜索欄的輸入狀態(tài)。這種做法幫助用戶省去了一次多余的操作,更重要的是人們不再需要為了點擊頂部的搜索欄而再次調整手機的握持姿勢,這些小事情都是細節(jié)的一部分。

3、彈性按鈕

不要低估微妙的點觸反饋,帶來的UI體驗上的提升。以此為例,“follow”按鈕在點擊的時候非常輕微的反彈和縮放,給用戶帶來的是非常優(yōu)秀的體驗。

4、按鈕的一致性

當然如果你打算為按鈕添加某種交互效果時,最好確保這種模式是涵蓋整個app的!

需要提到的一點是,從用戶增長的角度來說,Instagram的“推薦的關注者”功能非常強大。通過“關注-發(fā)現(xiàn)-關注”這個超強的循環(huán)機制,我已關注了將近100多人。我希望他們能夠分享更多關于這類“參與感設計“模式的影響力!

5、快速評論

小貼士:如果在評論欄中點擊用戶的ID,app將跳轉至評論界面,且輸入框內已預先填了該用戶的ID。這是我發(fā)現(xiàn)過的最微妙的互動模式。一旦你用過了這種回復方式,你就再也回不去了。

6、拍照-攝像切換

拍照模式下,你可以點擊攝像的icon或者向左滑動來切換攝像模式。我很享受這個切換過程中快門關/開的效果;這類的UI反饋絕對是有益的,同時我也想知道他們這么做是否也涉及到一些技術的原因?

7、致敬復古的情懷

這個細節(jié)非常的微妙,當你沒有進行拍攝的時候,在進程欄上將會出現(xiàn)一個處于閃爍狀態(tài)的白色小條。這個可能是對老款攝像機在屏幕上閃爍的“待機”圓環(huán)的致敬。

8、提示

當你點擊“攝像”按鈕時,彈出提示引導你通過長按的方式進行攝像。這真是一個機智的設計,因為這個按鈕的操作交互多少有點有違常理(即點按而非點擊)。

在iOS的系統(tǒng)相機中,攝像的操作是通過點擊攝像的按鈕進行的。但Instagram試圖向用戶展示,在合適的時間通過長按的方式,把多段視頻剪輯到一起。我不太清楚Instagram是否在第一次使用app的時候會預演這個功能,但不管怎么說這個提示很好的幫助到了用戶。

9、刪除視頻

當你錄制了一段視頻后,相機的icon立即變成了刪除的icon。需要點擊來二次確是否刪除這段視頻,同時icon和進程欄也變成紅色來提示用戶。

有時候我會比較不同的app是如何處理攝像這個功能(第一反應就是Vine,Twitter和Instagram)。比較攝像過程中微妙的用戶體驗設計是種很贊的體驗。看來似乎不同app對攝像功能的展現(xiàn)風格有不同的看法(Twitter尤其讓人印象深刻)。

下半部分的內容數(shù)天后也將發(fā)布,盡請期待。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,034評論 25 709
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,309評論 4 61
  • 此書中,我最感興趣的一個章節(jié),恐怕就是第一章《逆向設計》了。正如文中所說的,教師是設計師,他與其他領域的專業(yè)人員一...
    翠言蜜語閱讀 15,281評論 1 5
  • 本想自學畫畫,卻發(fā)現(xiàn)自己還真的是沒有繪畫的天份,只是在上班之余消磨下時光。雖然畫的不好,還被對象說太抽象,...
    聽心上花開閱讀 176評論 0 0
  • 提煉:問題解決方案 一、時間壓力和談話中斷 進一步發(fā)出一個強有力的我信息 確保不會受到打擾 重新約定時間 意圖應該...
    egomuff閱讀 245評論 0 0

友情鏈接更多精彩內容