12 個沒有人告訴過你的移動和 Web 應用程序 UI 設計技巧——直到現在
已發表: 2016-02-28[ Proto .io 是一種移動應用程序原型製作工具，企業家和初創公司使用它來創建外觀和感覺都像真實應用程序的完全交互的逼真原型。]
我們詢問了七位 UI 設計師、開發人員和企業家，他們在艱難的過程中學到了哪些移動和 Web 應用程序 UI 設計技巧，或者在他們的職業生涯中碰巧學到了哪些技巧。 要么沒有人告訴他們這些技巧，要么在他們提出這些問題時似乎沒有人知道這些問題。 無論如何，這裡有 12 件事你現在不必通過反複試驗來學習——當然，除非你已經學會了！
Duffy 的 3 大設計技巧
John Geletka 是 Duffy (@duffydesignx) 的數字戰略執行副總裁，該機構擁有 30 多年的設計經驗。 以下是他多年來掌握的一些技巧。
二可以是一個神奇的數字。
“使用響應式設計，請始終同時設計兩個屏幕：移動肖像（320 像素）和桌面（1200 像素）。 它使這個過程變得更快，”Geletka 說。
從簡單的設計開始。
“首先減少所有功能，花里胡哨。 擺脫垃圾，專注於應用程序的目標，”Geletka 說。 “這意味著首先不要在您的設計中添加共享、保存和每次集成。 確保你把主要想法記下來。”
不要害怕拿起筆。
“數字工具很棒，但有時你可以在 10 分鐘內完成更多工作，”Geletka 說。 “如果您遇到困難或時間緊迫，請使用紙張。”
使用此 Web 應用程序 UI 設計技巧實現平衡
Brandon Termini 是 Handsome (@HandsomeMade) 的創始人兼創意總監，該公司致力於創建“有目的的美麗和令人愉悅的”網絡應用程序 UI 設計和數字產品。
使用正確的光學重量。
“在製作成功的界面時，平衡非常重要。 良好的平衡可以讓您的用戶輕鬆地按照您的預期方式掃描您的應用程序，”Termini 說。 “在界面中使用各種圖標時，我發現這條規則最常被打破。 一些圖標在水平方向上更重，而另一些則在垂直方向上更重，我們的工作是確保它們放在一起時感覺同樣平衡。”
光學重量和播放按鈕
“如果你正在設計一個播放按鈕，答案不是在一個圓圈內水平和垂直居中放置一個等邊三角形。 當然，在幾何上它們是居中的，但由於高度較大，三角形在光學上感覺更重，”Termini 說。 “別擔心——你可以做兩件事來解決這個問題：要么將三角形稍微向左移動以誘騙眼睛看到它居中，要么稍微減小三角形的寬度以使所有邊看起來均勻。”
從 Web 應用 UI 設計到移動
我們接下來的三個移動和 Web 應用程序 UI 設計技巧來自副總裁兼用戶體驗戰略總監 Christian Dodd 和 Cramer-Krasselt (@cramerkrasselt) 創意技術總監 Nathan Koch。 Cramer-Kasselt 是美國第二大獨立廣告公司，擁有保時捷、Corona Extra 和 Heinz 等客戶，因此 Dodd 和 Koch 憑藉豐富的經驗為我們提供以下建議：
移植到移動設備時不要忘記任何 Web 懸停交互，並在設計的早期制定明確的計劃來處理它們。
“隱藏在桌面懸停狀態後面的內容可以在移動設備上通過多種方式處理：直接在頁面上，以及隱藏在觸摸後面。 沒有一種處理桌面懸停事件的解決方案適用於所有情況，”Dodd 和 Koch 說。 “解釋性/實用性內容通常受益於浮動顯示在頁面上，而探索性內容通常在觸摸之後更有意義。 一般來說，隨著用戶在所有設備上滾動變得更加舒適，將內容隱藏在懸停狀態和隱藏/顯示小部件之後變得越來越沒有必要。
為你推薦：
反暴利條款對印度初創企業意味著什麼？
教育科技初創公司如何幫助印度的勞動力提高技能並為未來做好準備……
本週新時代科技股：Zomato 的麻煩仍在繼續，EaseMyTrip 發布強...
印度初創公司走捷徑尋求資金
數字營銷平台 Logicserve 獲得 80 盧比的資金，更名為 LS Dig...
報告警告對 Lendingtech Space 重新進行監管審查
試圖讓自動播放視頻在移動網絡上運行通常是不值得的。
“移動操作系統開發人員不允許自動播放視頻是有原因的。 一般來說，音頻和視頻對移動用戶的破壞性更大，”Dodd 和 Koch 說。 “移動用戶習慣於慎重選擇消費媒體。”
響應式設計不僅僅是縮小瀏覽器。
“特徵檢測也是移動 Web 開發的重要組成部分，”Dodd 和 Koch 說。 “不要以為你不能對桌面網站上的觸摸事件進行事後猜測，移動交互的細節比看起來要復雜得多。”
三法則遠比你想像的要多
Karolyn Hart 是 InspireHUB (@Inspire_HUB) 的首席運營官，也是市場上最早的企業級移動網絡應用程序之一 IHUBApp 的創建者。
嘗試將所有 Web 應用程序 UI 設計元素分成三個一組。
“我們在研究如何讓客戶對我們的界面充滿信心時，偶然發現了‘三原則’。 我們平台的 V1.0 沒有達到目標，”Hart 說。 “研究表明，三是增加信心的最佳數字。 少於三個，人們會感到不確定，超過三個，他們會感到不知所措。”
“所以我們提出了一個 UX 挑戰，即所有內容都必須以三個部分呈現，”Hart 說，“從我們的客戶填充他們的應用程序時的決策到步驟。 該規則改變了我們的工具。 我們的後端非常複雜，以適應簡單的設計，但回報是值得的！”
保持手勢簡單直觀
Jason Suriano 是 Rocketfuel Productions Inc. (@TrajectoryIQ) 的創始人兼首席執行官。 Suriano 在移動和 Web 應用程序 UI 設計方面擁有超過 13 年的經驗，並為 Discovery Communications 等公司創建了基於在線和移動設備的項目，Suriano 已經掌握了很多專業技巧。 這是他最喜歡的：
在移動設備上，假設所有手指都很笨拙。
“我們在設計手機遊戲時實施的一個技巧是讓整個開始屏幕成為可點擊的區域。 這意味著，如果用戶點擊開始按鈕但未點擊，應用程序仍將加載後續的遊戲畫面，確保用戶繼續使用應用程序，”Suriano 說。
“由於移動 UI/UX 是由點擊、雙擊、滑動和手勢定義的，因此設計簡單的東西（如開始屏幕）的失誤可能會讓您的用戶陷入困境或沮喪，迫使他們點擊主頁按鈕並退出應用程序，”他補充道.
對新的 Web 應用程序 UI 設計技巧保持開放的心態
Nolan Kier 是總部位於紐約市的應用程序開發公司 Messapps (@Messapps) 的項目經理和業務開發助理。 “儘管成立時間還不到三年，Messapps 已經迅速成長為應用程序開發領域最負盛名和最具創新性的應用程序開發公司之一，”Kier 說，“而且我們學到了很多 Web 應用程序 UI短短三年的設計技巧。”
繼續研究新的、更好的方法來完成工作。
“我們通過研究問題或深入挖掘特定開發問題以確定可以梳理出哪些答案來完成任務的許多技巧或新方法，”基爾說。 “這方面的例子包括通過向 LaTeX 編寫新的代碼片段來學習編寫很酷的文檔，這類似於具有編程風格/格式的文本編輯器。 此外，Mathematica 與 MacOS 的 Mathcad 類似，具有這種巧妙的隱藏功能，允許用戶使用該軟件創建困難的 3D 方案。”
“對於設計而言，偶然發現如何使用修改 Alpha 通道和使用自定義算法壓縮單個圖像的能力來壓縮幀是有助於該過程的小技巧，”Kierk 說。 “從事網絡應用程序 UI 設計和開發業務需要與技術發展相匹配的創新。 因此，我們的設計師和開發人員不斷地重新設計我們的內部和外部流程，以“重新發明輪子”並發現新的設計和開發方式。”
尋找合適的人一起工作
Robert Pieta 是 Porter Key (@PorterKeyboard) 的 iOS 工程師兼首席執行官，這是一款提供上下文建議的智能 iOS 鍵盤。 作為工程師和企業家，這是他最大的建議：
找一個開發設計師，或者設計師開發者。
“了解雙方並擁有資深經驗的人將幫助解決溝通問題並幫助保持項目按計劃進行，”Pieta 說。 “這樣做有兩個主要好處。 首先，具有設計和開發經驗的人可以幫助彌合溝通鴻溝。 設計和開發都有自己的關鍵術語、俚語、隱含假設和核心租戶。 通過了解這兩個世界，可以先發製人地發現溝通問題。”
“其次，具有設計經驗的開發人員可以比單個開發人員、單個設計師甚至產品經理更好地估計複雜性和資源需求，”Pieta 補充道。 “通常，小的設計更改會導致開發時間顯著減少。 在移動設備上尤其如此，其中某些設計範例實際上是預製的。 了解哪些自定義易於實施以及哪些動畫易於使用將有助於確保開發人員和設計人員都能享受這個過程。”
“一些現有的團隊可以聲稱與開發人員和設計師的站立會議可以解決這些問題，”Pieta 說，“但通常情況並非如此。 會議時間太短，無法準確深入探討隱含的設計假設、先前的用戶研究、現有的代碼架構決策、語言選擇以及定義項目的更多選擇。 只有擁有兩個世界經驗的人才能快速有效地彌合差距。”
我們還有一個技巧：使用正確的原型製作工具
一些移動和 Web 應用程序 UI 設計技巧可以通過經驗傳授，而有些則只能通過艱苦的方式學習。 幸運的是，正如他們所說，今天的設計師和開發人員可以在巨人的肩膀上建立他們的專業知識。
[ Proto .io 是一種移動應用程序原型製作工具，企業家和初創公司使用它來創建外觀和感覺都像真實應用程序的完全交互的逼真原型。]