iPhone應用設計趨勢

2020-12-17 網際網路的那點事

在過去的兩年裡,你能想像的一些很爛的應用設計也入駐了優雅的iPhone。通過它周邊的宣傳,使得世界各地的設計者們都利用這個新的移動工具來一展身手。結果雖搞出了成千上萬的iPhone應用,但通常不好用也不直觀。然而有些設計師則是花費大量時間為創造更好用的界面而努力著(是的,這些都是好用且有創意的界面)。

本文探究了如何讓設計師利用圖形元素和屏幕交互,製作出易識別又易操控的iPhone應用目的在於揭示iPhone應用設計的普遍趨勢和設計方法——請注意,這些未必是設計和可用性中的最佳觀點。

 

1. 鏡像iPhone原生界面元素

「告訴他們你要告訴他們的,去告訴他們,然後告訴他們你告訴過他們。」(譯者:作者在表達她當時的感受吧) 在你的應用中創建一套新的OS可能很有趣,但在行動裝置上處理時,人們只想簡明扼要。簡明扼要的意思是,設計師得遵循OS的流程,創建一個無說明的應用,給最終用戶去操作。鏡像出用戶熟悉的布局和界面元素可以節省時間和精力。所以這看起來是設計iPhone應用時的一個便利途徑啊。

Facebook (iTunes Link)
在新版Facebook 3.0中,你會發現這樣一個柵格布局,用戶可以通過左右滑動屏幕進入更多分類。因為它鏡像了蘋果的原生界面,所以用戶根本不用再學如何使用。網頁設計中存在類似方法:用戶會預料到logo在左上角,導航也在上面,等等。Facebook把這它延續到了移動應用上,用大按鈕可以輕鬆的被識別和點擊。

Where (iTunes link)
Where使用了相同的概念,它允許用戶通過左右滑動屏幕來獲取更多信息。

Tweetdeck (iTunes link)
Tweetdeck是用戶界面設計中一個很好的例子。高亮顯示的最近更新多吸引注意力啊。此應用能以歸類或標籤列表形式,在新窗口中顯示更新。但不會替換掉一個已顯示的對話菜單,它可以作為跳轉到具體類目或清掉消息提醒的跳板。

2. 簡化界面

也許簡化用戶界面聽起來像是個機械任務,但在用戶界面設計背後又隱藏著什麼呢?答案很簡單:就是用戶。用戶需要什麼?什麼令他們感到友好和模糊?你如何提供他們所需的東西,以便不用時刻去關注那些重要的信息?

提到在小空間內展示大量核心功能,Facebook的第一版就做的非常到位。當然,這裡指的是展示所有信息和擁有直觀的界面。3.0與之相比,你會發現它使用「跳板」的方式來簡化界面,既保持了直觀又維護了功能。

Flickr (iTunes link)
Flickr 對功能、視覺設計和小屏幕行動裝置顯示這三者間平衡上的處理同樣出色。試想之:Flickr的核心是什麼?照片。它的用戶或許不希望看到又大又笨的導航;他們想要的是照片。Flickr已經設法調整核心功能,去掉那些標題和該死的導航。事實上,很多導航元素已經在照片本身的交互上實現了。真是個既簡單又聰明的辦法。

3. 模擬硬體界面

不少應用程式打破了傳統iPhone界面的操作,利用它獨特的手指手勢進行控制。它們中一些是用戶熟悉的硬體界面,光鮮亮麗的外表不禁讓人回味起那種第一次點擊的新鮮感。但應用程式不會因為你玩的多而變髒。

Convertbot (iTunes link)
Convertbot的輪盤讓我們想起小學時候,不同的是它更具特色、更新穎、更有創意。

Little Snapper (iTunes Link)
Little Snapper模擬的就是一臺普通數碼單反的旋鈕。

iHandy Level (iTunes Link)
iHandy Level的樣子和功能都仿至一個真實好用的水平儀。

Where To? (iTunes Link)
這個應用看起來像是屬於奔馳車的。豪華的皮革、磨砂的按鈕:上乘的技術。我們可以想像,每個按鈕按下去都那麼結實,都那麼有力道。

4. 豐富、漂亮的列表視圖

當你對列表設計的最新趨勢感到興奮時,你已經被確診為一位「geek designer」了。人們遇到一個列表時會做些什麼?當然,只是略讀。那怎樣把人們決定什麼有趣變得更輕鬆?沒錯,更多的視覺暗示!

基本上,用戶通過尋找下一步的快照,來決定是否需要了解更多。而又大又漂亮的按鈕就是途徑之一。通過色彩、圖標和排版讓人感覺這個大按鈕背後隱藏著好多信息。

Delivery Status Touch (iTunes Link)
看看Delivery Status是怎樣通過不同顏色的大按鈕來區分不同品牌的。並用良好的排版建立起信息層次。

Be Happy Now (iTunes Link)
Be Happy Now的大按鈕通過柔和的色彩體系與明亮清晰的字體傳達「be happy」的主旨。

Next Read (iTunes link)
Next Read這個應用允許在朋友間分享圖書。在這裡所有書都是關於時下某一特定話題的,包括書名、封面、評分以及評論數。注意看每個導航選項的間隙和留白,它讓這個區域更容易被點擊。

Nike (iTunes link)
Nike為女性開發了這個應用,精緻的視覺元素和插畫都很符合它的品牌。在設計上打破了傳統界面的束縛,充分表達了品牌,不讓用戶為如何使用它而感到困惑。

Borange (iTunes link)
Borange是一款「社交情況」的應用,它可以幫你統籌與朋友們的約會。列表展示了很多信息:要一起出行的朋友,本地會議,並可以形象的表示哪個朋友有空。

5. 分層的界面

一些應用把界面設計成層,利用iPhone本身獨有的特性讓其固定,或垂直、水平滾動。這種方法有幾個好處:

  1. 減少了必要的傳統導航元素數量(即更少的按鈕有助於避免界面混亂)
  2. 為用戶獲取信息提供了快速通道
  3. 有更多屏幕空間承載有用信息

Tweetie (iTunes Link)
Tweetie利用層把具體信息傳遞給你每位Twitter好友。你看,所有信息都裝在這一個屏幕裡!

Barnes & Noble (iTunes link)
Barnes & Noble讓你可以快速的通過上面的層進入新商品,通過下面的層切換到更多分類。

USA Today (iTunes link)
USA Today在它的圖片一欄中對層做了細微改變:利用滑動面板顯示信息區塊。儘管第一眼看上去很亂,但能很容易跳過它。最有趣的部分在於,在每個面板裡,都可以通過左右滑動來查看更多圖片。

myPantone (iTunes link)
我們何嘗不希望色卡少一點?上面的拾色器就是一個層,你可以通過色彩範圍、類別來取色,也可以通過滾動打開/關閉細節窗口。

6. 在列表中使用圖標

在小屏幕上,圖標可給應用的可用性和導航性帶來巨大提升。讓我們通過幾個應用的例子看看它的優勢。

iStudiez (iTunes Link)
這個應用利用各種不同的教學用具圖標,清晰地表達了應用的目的。通過這些具象的暗示,學生瞄一眼就知道今天發生了什麼。

Top Floor (iTunes Link)
Top Floor利用簡單易識別的圖標,快速引導用戶進入他們選擇的類別。

New York Times
應用可以讓你想做什麼就做什麼,是不是很不可思議哦?對於一個像紐約時報樣的應用,用戶必然有他喜歡的章節。你猜怎麼著?紐約時報這樣做:它讓你自定義標籤欄,把你喜歡的章節都加進來。拖動一個圖標到標籤欄即可。不過這樣做也不是十全十美,在視覺呈現上打了折扣。

Filemaker(iTunes link)
另一個漂亮圖片的案例,說它好是因為圖標的使用上不混亂、不混淆。設計師永遠不要為了使用圖標而使用圖標。作為設計師,我們希望圖標能夠儘可能的反應出用戶所選的內容。Filemaker,幹的漂亮。

7. 插圖的使用

依賴圖形的應用程式越來越受歡迎,因為開發者試圖讓她們的應用與眾不同。偶爾奏效,但不經常。越是傳統的設計就越可能存在可用性問題。在推出一個「有創意」界面的產品前一定要進行可用性測試。

Magnetic Personalities (iTunes link)
這是個非常好的例子,看看如何讓按鈕變得不像標準按鈕那麼普通。

SugarSync (iTunes link)
這個界面可以輕鬆地走遵循傳統列表視圖的路線。但設計師沒有這麼做,而是通過一個漩渦將視覺連接在一起來傳達這個應用。這很不尋常,同時需要花點時間來適應它。

Mom Maps (iTunes link)
另一個使用插圖取得成功的例子,它將很多概念都融入了這個應用。

8. 使用手勢

經典的線性導航看上去很枯燥:一個按鈕連一個按鈕,來表現一堆東西的列表,或表現這樣那樣的交互。事實並非如此壯觀,只是比喻一下。在公共事業的應用上使用有創意的交互可能性很大。

Mover (iTunes link)
Mover列舉了如何使用手勢來分享聯繫方式、照片和書籤。打開兩個設備,把文件從這個共享到那個裡。

ABC Animals (iTunes link)
這個應用寓教於樂。用手指在屏幕上書寫字母是另一個通過觸摸iPhone控制的例子。

All Recipes (iTunes link)
此應用可以讓你通過手勢來混合眾多元素,作為你的美餐。

iPhone App Design Trends
Smashing Magazine版權所有
作者:Smashing Magazine
譯者:UCD翻譯小組,波希米亞
原文地址: http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/



相關焦點

  • 本年度十大移動應用UI/UX的設計趨勢
    UI/UX是User Interface / User Experience的簡稱,也就是我們常說的用戶界面與用戶體驗設計。如今,從人工智慧到Android 10與iOS 13的夜間深色主題模式,應用界面的相關技術正在不斷地進行迭代與更新。因此,作為開發人員,特別是移動開發人員,我們需要善於緊跟當前的設計趨勢,持續提升用戶使用軟體產品的滿意度。
  • [新] 2020年最佳移動應用UI設計趨勢
    換句話說,好的設計是不需要用戶思考很多的,而是更加重視情感,動機和需求的滿足。如果你想設計出技術先進的,直戳用戶痛點,理解用戶心聲的產品, 看這篇文章就對了!在這篇文章中,你將看到2020年最好的行動應用程式設計實例及趨勢,了解他們是如何擴大銷售,留著用戶的。現如今,每個人都被裹挾在源源不斷的信息潮流中,想要創作一款足夠吸引人注意力的產品越來越難。
  • 人性化的設計 Dexim車載iPhone支架評測
    【PConline 評測】有人曾經說過iPhone是萬能的,只有你想不到的應用程式,沒有你找不到的應用擴展。有的人喜歡把它當作遊戲機,有的人則用它來聽歌,但不可否認的是,它逐漸被用戶當作車載導航來使用。
  • 【復材資訊】高速動車組車體輕量化設計趨勢及複合材料的應用
    近期,《高速動車組技術發展特點及趨勢》中指出,實現高鐵動車組的高速安全運行,需克服輪軌關係、弓網關係、減阻降噪等一系列技術難題,不斷探索新技術解決方案和先進技術應用,提高車體輕量化、更多運用複合材料、提升動車組綜合技術性能。文章系統梳理了世界高速列車的發展歷程,分析了高鐵動車組提升綜合技術性能的方式方法,總結了改善舒適性與降低壽命周期成本的具體措施。
  • 2019-2020 的設計趨勢:圖形篇
    首先,我們總結了平面設計的總體趨勢,同時也研究了從 Zepeto app 和 Memoji 開始的,最近擴展出來的 IP 形象設計和角色設計趨勢。在本文中,我們想分享 ISUX 設計趨勢報告的第一部分「圖形設計趨勢」。在這一部分裡,我們展示了當下各種品牌和動態圖形的案例,總結了 12 個值得注意的平面設計趨勢。
  • 如何在iPhone上隱藏任何應用程式的簡單方法
    當有不希望別人看到的應用是,你可以在iphone 上這樣隱藏。第1步:將應用程式放到文件夾中將你想要隱藏的應用程式拉到新建的文件夾中第2步:將文件夾中的應用拉到另一個空白的頁。該文件夾中,通過按住一個單獨的應用程式,直到它開始晃動進入編輯模式。
  • 移動應用網頁設計的趨勢和範例
    數據顯示為應用設計一個專屬網站可以提高下載量。本文的重點,就是告訴開發者怎樣才能設計好一個有特點的、能第一時間傳遞應用特性的網站。不要覺得這些是老生長談,也不要把這些直接套用到你的網站上去,你需要加入自己個性化的元素以和別的產品做出差異化的表現。開始了。
  • iphone 12蘋果手機屏幕貼膜設備中輸送機構的設計
    iphone 12蘋果手機屏幕貼膜設備中輸送機構的設計 2020-11-05 17
  • iPhone13概念圖:致敬賈伯斯的經典設計,這才是初代iPhone升級版
    外媒最近發布一款全新的iPhone13概念圖,將機身後蓋的款式改成初代iPhone的設計,這是在致敬賈伯斯的經典設計,充滿了濃濃的情懷。劉海寬度還是沒有變化,但這款升級版初代iPhone還是有許多看點。#iphone13#初代iPhone的屏幕為3.5英寸,支持多點觸控,將娛樂,網絡,通話等功能融為一體,只保留Home鍵盤。
  • 2021年UI / UX設計趨勢
    當大多數參與者開始遵循這種趨勢時,它不可避免地會因為過度飽和而變得無效。因此,設計師的出路是時不時的看看他們,不時為客戶提供一些新的東西,而對於企業主來說,這是他們品牌發展的一個思想來源。我們擁有10多年的Web和行動應用程式設計經驗,知道如何使用UI / UX趨勢來設計適用於任何行業的視覺愉悅且有效的數字產品。
  • iPhone ios14新功能玩法,無需越獄!自定義應用修改程序圖標教程
    iphone系列!IOS14系統快捷指令提示音大合集,建議收藏!越獄的同學都知道,用插件可以實現美化圖標,自定義主題等等功能;沒越獄的同學也不要著急,教你怎麼實現在不越獄的情況下自定義應用圖標。效果預覽(上面四張圖標顏色)替換應用程式圖標教程打開快捷指令,找到右下方的「創建快捷指令」,點擊「+」號,點擊「添加操作」搜索框輸入「打開app」,搜索完點擊
  • Behance發布2021設計趨勢報告!
    就會發布設計趨勢 引領大家在設計行業中不斷進行探索 今年也不例外 Behance 2021設計趨勢
  • 設計感強的iphone手機殼推薦Richmond Finch
    我現在iphone上套著的就是這個手機殼!推薦iphone手機殼的話必須得提這個了,首先真的不會後悔,因為真的太!好!看!了!一定要買買買,買到就是賺到,最近國內價格調整,我看比我買的時候要低幾十塊錢,種了一後院的藍瘦香菇。
  • 問答:iPhone 6s升級iOS 12應用開啟速度變化
    6月5日凌晨,蘋果在WWDC全球開發者大會上正式發布了iOS 12系統,我們也用三年前的iphone 6s升級了iOS 12系統,並且與之前停留在iOS 11版本的時候進行了應用開啟速度的對比。通過視頻可以看得出來,iOS 12在應用開啟速度上雖然相比iOS 11略慢了一些,但是在過渡動畫上卻是更加的流暢順滑,這樣的變化也讓用戶可以在視覺方面對iOS 12形成「開啟變快」的判斷。
  • 遇到iphone手機丟了該怎麼辦?iphone手機找回教程!
    遇到iphone手機丟了該怎麼辦?還能不能找回來,其實iphone手機上面自帶有定位功能,就算手機丟失了,其實也可以依靠這個手機定位服務進行找回手機,個人以前也有丟失過iphone手機,後來就是依靠這個功能找回來的,那麼iphone手機如何找回呢?
  • Behance 2021年度設計趨勢來了!
    在今年這樣一個變化萬千的環境下,設計趨勢又將迎來怎樣的變化呢?–時間跟蹤應用 2.Jan Reeh SDMK - 3D網頁設計 3.Tran Mau Tri Tam Collab. — 登錄頁設計 4. Mike 網頁設計 -3D & 2D版本 5,6,7.CLV Madrid 銀行平臺人物插畫設計 8.Cabeza Patata Studio Shape & Rhythm 9.
  • 為什麼極簡主義成為logo的設計趨勢?
    當今時代logo設計其實強調化繁為簡,奉行極簡主義,這是為啥呢?logo設計師揭秘:1:大企業logo選擇化繁為簡使用簡單的幾何形狀字母,以及線條來進行設計,進行字體的變形,字母的變形,或者說企業形象圖形的變形,這種簡單化的logo看起來簡單,其實卻是非常非常具有意義的。
  • 2020年互動設計的9個趨勢
    這一年我持續關注國內外大廠商發布的一些新產品與未來技術的升級體驗,不難發現數字設計不論是從產品、交互、體驗等等都正在不斷深入未來的設計趨勢!任何趨勢的來臨都離不開整個社會經濟背景與龐大的行業鏈等技術基礎的成熟穩健,它影響著我們今後前沿的設計決策。今天這篇交互趨勢文章,你一定會有意外收穫!Enjoy it!01 聚焦當前任務三星ONE UI 2.0今年系統更新,著手打造輕應用體驗。
  • 使用Google Analytics 對 iPhone/iPad 應用進行統計和分析
    Google Analytics 移動應用 SDKGoogle Analytics 除了進行傳統的網頁統計之外,現在也支持對移動應用的統計和分析了, Google Analytics 發布的針對移動應用的 SDK,並同時支持 iOS 和 安卓系統,通過它我們可以用來跟蹤和統計行動應用程式,比如可以用來訪問數(visits),停留時間,跳出率,和獨立用用戶(unique
  • 一用就是好幾年,這款iPhone手機,真心找不到換機的理由
    我認為iphone沒有創新,壽命不好,信號弱。買的人仍然認為iphone是最放心的手機,完全不理會別人的評價。事實上,從理性上看,iphone的熱量和銷售量可以證明蘋果到目前為止仍然具有其他手機無法看到的優勢,很多消費者買iphone可以買很多年,因此比Android更經濟。