移動應用程序和網頁應用程序

by Luke Konior

盧克·科尼爾(Luke Konior)

如何不完全破壞您的移動應用程序的用戶界面 (How to not utterly ruin your mobile app’s user interface)

There’s no single universal formula for designing a great user interface (if you discover one, please let me know). But I do know some major mistakes to avoid if you want to deliver a great app.

設計出色的用戶界面并沒有統一的通用公式(如果您發現一個界面，請告訴我)。但是，我確實知道一些主要的錯誤，可避免在您要交付出色的應用程序的情況下使用。

I’ve seen every one of these mistakes made by designers of all levels of experience. There’s no shame in that — a good UI design is a multifaceted challenge, and it’s easy to overlook some aspects of it.

我已經看到了具有不同經驗的設計師所犯的每一個錯誤。這沒有什么可恥的-好的UI設計是多方面的挑戰，很容易忽略它的某些方面。

At All In Mobile, we often redesign apps for clients who aren’t satisfied with their product and want to improve the way their app looks and feels. So today I’m going to share some major no-nos I’ve observed.

在All In Mobile中，我們經常為對產品不滿意并希望改善其應用外觀的客戶重新設計應用程序。因此，今天我將分享一些我觀察到的主要問題。

Of course, I’m all about fixing issues, not just pointing them out. So I’ll demonstrating all 5 of these major UI mistakes — then show you redesigned app views, so you can see how your team can fix them.

當然，我全都在解決問題，而不僅僅是指出問題。因此，我將展示所有這5個主要的UI錯誤-然后向您展示重新設計的應用程序視圖，以便您了解團隊如何解決這些問題。

UI錯誤1：濫用字體 (UI mistake 1: Abusing fonts)

Let’s start with system font families.

讓我們從系統字體系列開始。

For example, San Francisco is a system font for iOS, and Android has Roboto. They’re both easy-to-read and fairly similar.

例如，舊金山是iOS的系統字體，而Android具有Roboto。它們既易于閱讀又相當相似。

Are system fonts okay to use? Yes, definitely. It’s a safe and proven option. But remember — Samsung phones allow you to change the default font. Your beautifully designed app can be killed in an instant if the phone user switches into Choco Cooky font.

系統字體可以使用嗎？當然是。這是一個安全可靠的選擇。但是請記住-三星手機允許您更改默認字體。如果電話用戶切換為Choco Cooky字體，則設計精美的應用程序可立即被殺死。

You can also opt for a more sophisticated solution and choose a custom font. If you go this route, though, keep in mind: Less is more.

您還可以選擇更復雜的解決方案并選擇自定義字體。但是，如果您走這條路，請記住：少即是多。

There might be plenty of awesome fonts, but be reasonable. Fonts should add to the user experience. Too many types, sizes, or colors can complicate things.

可能有很多很棒的字體，但是很合理。字體應該增加用戶體驗。太多的類型，大小或顏色會使事情復雜化。

If you do go for custom fonts, keep it simple and coherent. Add custom fonts only when needed, and where they can actually improve your app. And using custom fonts for the sake of having custom fonts is not a good enough reason.

如果您確實要使用自定義字體，請使其保持簡潔和連貫。僅在需要時才添加自定義字體，并在實際可以改進您的應用程序的地方添加。而且，為了擁有自定義字體而使用自定義字體還不夠好。

License. A few months ago we were asked to redesign a fashion app. While reviewing the fonts, we came across 2 commercial fonts, both being used without any bigger purpose and without license. This mistake could have cost the client $2,000! A font is software, and always licensed. If you embed a font into a mobile app, make sure you read the license and the terms of use. Don’t know the license? Then don’t use the font.

執照。幾個月前，我們被要求重新設計時尚應用程序。在審查字體時，我們遇到了2種商業字體，它們都沒有更大的用途并且沒有許可證就被使用。此錯誤可能會使客戶損失$ 2,000！字體是軟件，并且始終獲得許可。如果您將字體嵌入到移動應用程序中，請確保您已閱讀許可和使用條款。不知道許可證？然后不要使用字體。

UI錯誤2：屏幕上過多 (UI mistake 2: Too much on the screen)

When phones were much smaller, designers faced issues bundling necessary things onto the screen. For example, the iPhone 4 had 640×960 resolution and 2:3 ratio. With the advent of super-sized phones (or phablets), we can put more stuff on the screen — bigger fonts, more buttons, and fancier design.

當手機小得多時，設計師面臨將必需的東西捆綁到屏幕上的問題。例如，iPhone 4的分辨率為640×960，比例為2：3。隨著超大尺寸手機(平板手機)的出現，我們可以在屏幕上放置更多東西-更大的字體，更多的按鈕和更新穎的設計。

Be wary of falling into this freedom trap. More isn’t more, so be selective. Every additional item has to be processed by the user. Attract their attention wisely so they can easily navigate the app. If there’s too much on the screen, users can easily get lost and wonder what to do or where to click. Use design to focus the user’s eye on significant aspects. You want people to access the important content straight away and in an intuitive way.

警惕掉入這個自由陷阱。多不多，所以要有選擇性。用戶必須處理所有其他項目。明智地吸引他們的注意力，以便他們可以輕松導航該應用程序。如果屏幕上的內容過多，用戶很容易迷失方向，想知道該怎么做或單擊何處。使用設計將用戶的注意力集中在重要方面。您希望人們以直觀的方式直接訪問重要內容。

UI錯誤3：缺乏一致性 (UI mistake 3: Lack of consistency)

Be consistent when you design. Don’t send mixed signals to users. If you use one element for a specific action, stick with it. Users learn by doing certain actions, and if they encounter unexpected or ambiguous actions, it can really ruin their experience.

設計時要保持一致。不要向用戶發送混合信號。如果您將一個元素用于特定操作，請堅持下去。用戶通過執行某些操作來學習，如果他們遇到意外或模棱兩可的操作，則可能會破壞他們的體驗。

Also keep a consistent layout — for the most part. For instance, use the same colors and elements to create a repeating pattern. Use style guides to set standards so that you can stay on the right track when designing.

在大多數情況下，還要保持一致的布局。例如，使用相同的顏色和元素創建重復圖案。使用樣式指南來設置標準，以便在設計時可以保持正確的步伐。

Consistent layouts help users learn their way through your app, but you can have some exceptions, like the login page or other screens with dedicated uses. Whenever you break out of the pattern, keep in mind that every element still needs to make up a whole.

一致的布局可幫助用戶學習您的應用程序，但是您可能會有一些例外，例如登錄頁面或其他具有專用用途的屏幕。每當您突破模式時，請記住，每個元素仍然需要組成一個整體。

UI錯誤4：從iOS遷移到Android 1：1 (UI mistake 4: Transferring from iOS to Android 1:1)

It made sense to do 1:1 transfers from iOS to Android until Android 4.0, when Holo Design appeared. This was the first sensible theme for Android, with structures, guidelines, and navigation that was incompatible with iOS.

在Holo Design出現之前，從iOS到Android進行1：1傳輸是有意義的，直到Android 4.0。這是Android的第一個明智主題，其結構，準則和導航與iOS不兼容。

Why not transfer directly from iOS to Android, or vice versa? Doesn’t it save you time and money?

為什么不直接從iOS轉移到Android，反之亦然？這樣可以節省您的時間和金錢嗎？

Well, it might, but the ultimate goal is to create the best user experience, right? And users have habits and preferences. They use their phones all the time, and they grow accustomed to how their particular one functions. So if your applications behave differently than what people are used to, they’re way less likely to enjoy using it.

可以，但是最終目標是創造最佳的用戶體驗，對嗎？并且用戶有習慣和偏好。他們一直在使用手機，并且習慣于特定手機的功能。因此，如果您的應用程序的行為不同于人們習慣的行為，那么他們使用它的可能性就會降低。

Android and iOS have their own interaction patterns, and users might not be pleased if you serve them something else they’ll have to learn from scratch. If you transfer from iOS to Android (or the other way around), you could also make consistency mistakes from device to device.

Android和iOS具有自己的交互模式，如果您向他們提供其他一些他們需要從頭學習的內容，則用戶可能會不滿意。如果您從iOS轉移到Android(或相反)，也可能在設備之間犯一致性錯誤。

There’s good news, though — your app doesn’t have to look completely different for iOS and Android. Try to keep most of your visual style for both platforms. Take for example the case of car rental app Silvercar. They came up with their own navigation style, but at the same time they retained consistency between the mobile operating systems.

不過，有個好消息-您的應用在iOS和Android上看起來不必完全不同。嘗試在兩種平臺上都保留大部分視覺風格。以汽車租賃應用程序Silvercar為例。他們提出了自己的導航樣式，但同時又保留了移動操作系統之間的一致性。

UI錯誤5：信息層次結構不佳 (UI mistake 5: Poor information hierarchy)

When you design something, whatever it is — a business card, a website, an app — a person will interact with it in some way. You need to plan and design according to the degree of significance of the information you’re presenting, based on the way someone will interact with it.

設計任何東西時，無論是名片，網站還是應用程序，人們都會以某種方式與之交互。您需要根據所呈現信息的重要程度來規劃和設計，并基于人們與之交互的方式。

Sit down and think about the most important thing you want to show. Once you know your priorities, you can distinguish significant things with the help of fonts, colors, size, location, etc. You need to think about what people do with your product — in ideal and non-ideal settings — and design it accordingly.

坐下來，想想你想展示的最重要的東西。一旦知道了優先級，就可以借助字體，顏色，大小，位置等來區分重要的事物。您需要考慮人們在理想和非理想的情況下如何使用您的產品，并相應地進行設計。

實踐中的錯誤和解決方案 (Mistakes — and solutions — in practice)

Now we’re going to show you what all of these mistakes look like in practice, and how to fix them. As an example, we’ll redesign a view list for a food ordering app.

現在，我們將向您展示在實踐中所有這些錯誤的模樣以及如何解決這些錯誤。例如，我們將重新設計食品訂購應用程序的視圖列表。

A client with a food ordering app decided to add the option of rating restaurants, but the previous design didn’t provide for such a solution. We took this opportunity to improve a few things.

擁有食品訂購應用程序的客戶決定添加為餐廳評分的選項，但是以前的設計并未提供這種解決方案。我們借此機會改進了一些東西。

The previous screen was designed at a time when iPhone 5 still held a greater share of the market. It had smaller cells, a smaller restaurant logo, and more compressed text. When viewed on new devices, too many elements appeared on the screen, making it more difficult to read.

前一個屏幕是在iPhone 5仍占據更大市場份額的時候設計的。它具有較小的單元格，較小的餐廳徽標和更多壓縮文本。在新設備上查看時，屏幕上出現了太多元素，因此更難以閱讀。

That’s where we stepped in and made some changes:

那就是我們介入并進行一些更改的地方：

As you can see, the cells are more distant from each other. They don’t fuse together anymore, and their information looks much clearer. The user isn’t overwhelmed by the number of items on the screen.

如您所見，單元之間的距離更遠。他們不再融合在一起，他們的信息看起來更加清晰。用戶不會為屏幕上的項目數量所困擾。

Also, the hierarchy of information has been improved. Now, the most important element is the logo. A returning user is more likely to quickly recognize the logo than to read the brand name. Previously, the name was fighting with the logo.

同樣，信息的層次結構也得到了改善。現在，最重要的元素是徽標。老用戶比閱讀品牌名稱更容易快速識別徽標。以前，該名稱與徽標沖突。

Another element that needed work was the typography. We used the Oswald font for names and tags. We initially anticipated only one line for tags, but some restaurants have a really rich offer, and so we enabled ourselves to fit as many tags as possible.

需要工作的另一個要素是排版。我們使用Oswald字體作為名稱和標簽。最初，我們只希望標簽有一條生產線，但是有些餐館的報價確實很高，因此我們使自己能夠適應盡可能多的標簽。

We also include visualization of the Android version with the system font and Choco Cooky on Samsung phones. We solved this issue by adding Roboto as the custom font.

我們還包括三星手機上帶有系統字體和Choco Cooky的Android版本的可視化。我們通過添加Roboto作為自定義字體解決了此問題。

To add the rating portion the client wanted, we decided to use the stars. Hotels and Michelin Guides use it, so it made sense to us.

為了增加客戶想要的評分部分，我們決定使用星號。酒店和《米其林指南》都在使用它，因此對我們來說很有意義。

But there was a problem. We’d used stars in the previous design to mark favorite restaurants. We couldn’t place these 2 elements together because it’d be confusing. Liking a restaurant has nothing to do with its rating, and we would be left using the same symbol for those 2 actions. We didn’t want to be inconsistent, nor did we want to change the meaning of a symbol from one version to another. In the end, we solved the issue with a screen informing users a new feature had been added.

但有一個問題。在以前的設計中，我們曾使用星號標記最喜歡的餐廳。我們無法將這兩個元素放在一起，因為這會造成混淆。喜歡餐廳與它的評級無關，對于這兩個動作，我們將使用相同的符號表示。我們既不想前后矛盾，也不想將符號的含義從一個版本更改為另一個版本。最后，我們通過屏幕通知用戶已添加新功能來解決該問題。

“Design isn’t science — there’s no magic formula for success.”

“設計不是科學，沒有成功的神奇公式。”

Even if you avoid these 5 major mistakes, what you designed might fall apart when the user comes into contact with it.

即使您避免了這5個主要錯誤，當用戶接觸到它時，您設計的內容也可能會崩潰。

You simply can’t anticipate everything people might do. That’s why you have to observe the behavior and needs of the users, with the help of analytics and other tools. Then, react accordingly and improve your app. Design should be about changing to improve UX — continuously.

您根本無法預期人們會做的所有事情。因此，您必須借助分析和其他工具來觀察用戶的行為和需求。然后，做出相應React并改善您的應用程序。設計應圍繞不斷變化以提高用戶體驗。

Never rest on your laurels, because there’s always something you can design better.

永遠不要固步自封，因為總有一些東西可以設計得更好。