不拖後腿!從3個方面聊聊2016年的UI設計新趨勢
編者按:今天@程志達 (AcFun設計總監)從移動應用、網頁設計、設計工具3個方面聊聊2016年可能流行的新趨勢,有理有據,亮點不少,建議同學們在研究技法時也多看看這類文章,有助於及時調整學習重點,畢竟設計師可不能落伍。
移動應用
1. 各平臺 (Android/iOS/HTML5/Web) 的標準設計語言接近一致
部分原生控制元件上只存在風格上的差異,對使用者無顯著影響。
Material Design 不會大興其道,更不可能逆襲(用 Material Design 設計的 App 在 iOS 上使用),iOS 的實用主義設計會顯著影響 Material Design。
桌面常見的互動形式也將更多影響移動端,要支援 iPad Pro 這樣的生產級裝置,iOS/Android 會為了相容桌面場景作出優化。
![](https://i.iter01.com/images/0e8fe4e8c79cab70b24d1768ce67a725cbc9c6e61bf884a7f4075e5a86932cba.png)
來源:Google+ 在 Android 版也出現了底部導航的互動
2. 設計規範、平臺特性將越來越受重視
大廠商更加務實,更遵守平臺的設計規範,只在需求無法滿足的情況下重新發明輪子,因為實現、適配、使用者學習成本等方面的考慮,自創的互動效果未必理想。
(iOS 上的 App,在理想情況下應該適配 iPhone 5/6/6+ 的解析度,iPad/iPad Pro的 25%, 50%, 75%, 100% 寬的解析度)
![](https://i.iter01.com/images/ee42bdb26ea0b1f89494ad57e551b34316ae6e0501bd50d8886b28866433c853.png)
支援平臺特性(3D Touch, Live Photos, Chromecast, 分屏)能夠在 Early Adopter 中樹立口碑,得到免費的傳播點,同時也會把中間立場的使用者從競品手中拉攏過來。
但 3D Touch 仍然是噱頭。
3. 動效使用更加普遍,但更多在微互動中
過於華麗的動畫,經常出現容易引起厭惡,而且會導致使用者等待的時間延長。
合乎邏輯的動畫、微互動形式將在2016年沉澱下來並作為新的平臺規範。(如之前的下拉重新整理、Float Label 等很難察覺的動效會更流行)
![floating-input-labels](https://i.iter01.com/images/15d0feafb641dc6ef186d7639ff0163ef16a5b528e082af1fbec5b1454337e60.gif)
4.「可用性高」的設計會戰勝「簡潔」的設計
智慧手機的使用者已經擴充套件到非常邊緣的人群,而且數量級很大,他們對於一般的介面互動、隱喻沒有任何概念,把資訊儘量直白、無損地傳遞出去,會在可用性和設計的「簡潔性」上產生一定的衝突。
![](https://i.iter01.com/images/acca7ad201941428d58766910cf047fcbf79da6f9f2570c7f3f3c731dca34ffb.png)
這也是「漢堡選單」和 Material Design 中 FAB 按鈕最大的問題。
5. 平面設計、遊戲設計的靈感會影響 App 互動/內容的設計
Flat 2.0 感覺的設計:雖然整體感覺還是「平」的,但陰影、漸變等細節會更豐富。
![](https://i.iter01.com/images/f730c39bf9ced15dbb4b8582631d8b36d41ad8e64e363abb7fd15111f4ce4c17.png)
精美的插畫、攝影更普遍,直接影響App本身的品質感。
字型的選擇更多,排版更像雜誌。
![](https://i.iter01.com/images/90f1b0df081fe4e29c1639030b922cc5d84c27f868d9d807c255e27d06f6536c.png)
來源:MONO 貓弄
6. 「智慧通知」將會成為新的「App主介面」
![](https://i.iter01.com/images/b5548ef78524a1a2b8928a335a5f720d26febd310a7c0ec0c69ad04b8c675507.png)
Apple Watch 等智慧手錶最核心的價值被證明是「通知」,尤其是在每個人有很多App,注意力資源稀缺,不主動啟動應用(或不方便啟動,如 Apple Watch)的情況下,通知成為了使用者與 App 互動的最直接渠道。
通知會以更「智慧」的形式出現,不會是現在的小廣告推送形式,也不會是類似 Widget 常駐的形式,而更接近「手錶螢幕」大小,按需出現,可互動的、功能相對完整的介面(即使是在手機上而不是手錶上),使用者甚至可以永遠不開啟一個 App,而能夠享受 App 提供的全部功能。
網頁設計
1. 新的手機 App ,不一定會有對應的全功能網頁
對新的應用而言,功能最齊全、最強大的一定是手機版。因為手機所能獲取的資訊最豐富,可以通過發通知等各種辦法與使用者更貼近。
![](https://i.iter01.com/images/918e8680b8eaef9734df31bd4385d659f6d6d164811f892ccd0f03f7558f5103.jpg)
△ 來源:Periscope 的主頁,只提供下載應用的入口,無視訊直播功能。
![](https://i.iter01.com/images/151668da7456b897f7b2a7e4779d39af5a531651407039a025fe2cdee28209e1.png)
△ 來源:Instagram 的 Web 頁,只有圖片的瀏覽功能,無法上傳拍照,也沒有發現新使用者、搜尋等功能。
HTML5 頁面作為分享頁面展示、導流的重要入口,會優先保留內容的展示和消費、二次分享的功能,也會滿足最基礎的應用功能,如滴滴叫車的微信版。
網頁版僅作為 HTML5 頁面的放大和內容的擴充,很少會有 Web 的特色功能。
2. 網頁將接替原生應用,成為主要的桌面應用開發平臺
隨瀏覽器能力的增強、開發工具成熟,Web 開發者的數量增長很快,會有大量 Gmail / Google Docs 級別的應用沒有對應的原生版。
![](https://i.iter01.com/images/8d2bc7109811f99529c1600b619188c80502dce1dbcbf32834f3fc20f22316b3.png)
來源:Webflow
大量效果優秀、設計鮮明、互動神奇的桌面體驗將來自瀏覽器端,網頁端使用者行為側重於重度、創作力強的核心使用者。
![](https://i.iter01.com/images/1ec1cfbeb6b5774a98a74323088c3f070670de419c2116e9c84c4ae15a264870.png)
3. 已有大量使用者的桌面端網站,將不再輕易改版
成本高,而收益有限,如果改版的話,會主要作為品牌擴充套件、設計同步的因素考慮,最小化修改功能層面,換皮為主。
如果要做功能層面的改版,將會從響應式出發,以手機版、平板觸控版的設計出發,延伸到桌面端來設計。這個過程中損失掉的高階功能,可能會以原有介面原封不動,增加隱藏入口這種不優雅的方式解決。
設計工具
1. 原型工具之戰可能會出現勝利者
原型工具能夠勝出的條件
- 與靜態介面設計緊密結合 (靜態介面改動不應破壞原型邏輯)
- 方便製作響應式的設計(手機 – iPad 的介面儘量一次預覽)
- 上手簡單(Framer 目前太不直觀)
- 擴充套件性高,能實現略複雜的互動效果
原型工具經過2015年的混戰,到了2016年可能會有一個平臺成為新的 Sketch 作為事實標準。
2. 設計中將使用實時、真實的資料
Project Comet 在 Adobe Max 上給大家演示的從 Google Spreadsheet,從網頁等來源直接把資料接入到設計稿中,給人印象深刻。這是一個明確的趨勢,今年大多數應用都應該支援這樣。
真實的資料,無論是對設計決策還是產品決策,都會產生非常直接的作用。(已經有太多產品看效果圖自我感覺超級好,真實一上線爹都不認識)
![](https://i.iter01.com/images/0f5957fde32653db7d5d5b7e3032e842cf7fbc0eb75414cfc1f713e7ac535381.png)
![](https://i.iter01.com/images/df17e5e7d7980a030b18148545bf86cdd702449d330b7cdb4607d4a10fe23dc6.png)
來源:Project Comet 主頁 / Blog 介紹
3. VR 的設計工具將開始出現
2016 年隨著 Oculus Rift 的正式釋出,VR 進入了商用化的元年。雖然之前 VR 更多是用於遊戲中,但 Facebook 收購 Oculus VR 肯定不止是為了討好遊戲玩家。
![](https://i.iter01.com/images/e03cb9ce7180afd1c227d38c13e26e27c14f6cdeaacfccdc16e8cb8e7de1bad9.jpg)
來源: Oculus Rift
VR 帶來的身臨其境感顯然會帶來新的資訊展現和互動方式,這些都不是目前的平面設計軟體所能滿足的,但目前進行 VR 也沒有除了直接搞程式碼之外的設計方式,這些可能都會在今年有所改觀。
4. 平板類裝置(如iPad Pro)仍然無法在 App 設計/程式碼過程中起到太大作用
蘋果自己還沒有在 iPad 上有可用的 Xcode(哪怕只是跑跑 Swift 的命令列),Sketch 也沒有在 iPad 推出軟體的打算,至於在 Mac 平臺上已經大興其道的各種原型軟體,也根本沒有在 iPad 上有任何動靜。即使今年有,也最多是玩具。在2016年,iPad Pro 的處境仍然不夠樂觀。
相關文章
- UI設計發展最新趨勢UI
- 從上官婉兒看王者設計新趨勢
- 今天,聊聊“業務安全的新趨勢”
- UI設計師未來的發展趨勢UI
- 2018年上半年UI領域主要的13個設計趨勢UI
- 聊聊 2018 年後端技術趨勢後端
- 聊聊前端 UI 元件:元件設計前端UI元件
- 3月全國程式設計師工資新鮮出爐,看看你拖後腿了嗎?程式設計師
- 聊聊UI自動化的PageObject設計模式UIObject設計模式
- 程式設計師週刊(第3期):識別未來新技術的趨勢程式設計師
- 新冠疫情:疫情之後的技術趨勢
- 從打造3A遊戲設計理念,談長週期的超休閒品類趨勢遊戲設計
- @程式設計師:2019 年軟體開發新趨勢程式設計師
- 混合雲真香的背後,新趨勢暗流湧動
- 聊聊Canvas渲染相關 (非API層,偏框架設計方面)CanvasAPI框架
- 21個UI設計必會的設計技巧UI
- 2021年平面設計流行趨勢
- 學UI設計可以從事哪些工作?UI設計師前景如何?UI
- 晶片計設系統是從哪些方面去建設的?晶片
- 這3個使用者獲取方面的趨勢,或許將影響今年手遊的運營方式
- 在網路通訊方面,有哪些新技術或趨勢值得關注?
- 從概設流程、審美、設計思路幾個方面,漫談遊戲美術設計的思維方式遊戲
- 資料中心業界的新興趨勢:從DevOps到DataOpsdev
- 新冠疫情:疫情之後的技術趨勢(附下載)
- GitHub 2024年【整個3月】流行趨勢Github
- 2022年邊緣計算的5個趨勢
- 2023軟體架構和設計的趨勢架構
- 從多個方面瞭解工作流自定義表單的優勢
- 從哪些方面分析一個網站的建設技巧?網站
- 從時間角度聊聊如何設計出一個好玩的競技遊戲遊戲
- 從空間角度聊聊如何設計出一個好玩的競技遊戲遊戲
- [譯] 2018年設計趨勢指南(合集)
- 2020年程式設計趨勢預測程式設計
- Gensler:2022設計趨勢展望報告
- 聊聊Canvas事件機制相關 (非API層,偏框架設計方面)Canvas事件API框架
- 從聚合支付業務的設計來聊聊策略模式模式
- 非科班出身的Web前端程式設計師,從這三個方面來提升自己Web前端程式設計師
- 聊聊 gRPC 的特性和背後設計的原則(一)RPC
- 普洛斯:物流園規劃設計的發展趨勢