ui設(shè)計(jì) 網(wǎng)絡(luò)錯(cuò)誤

重點(diǎn) (Top highlight)

1.不考慮范圍 (1. Disregarding scope)

It’s not uncommon for designers to introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business objectives, project scope, timeline, and the way products are developed are all valuable considerations when prioritizing features for design.

設(shè)計(jì)人員通常會(huì)引入一些功能，這些功能會(huì)使開(kāi)發(fā)過(guò)程變得復(fù)雜，同時(shí)又不會(huì)給應(yīng)用程序帶來(lái)任何附加價(jià)值。 在確定設(shè)計(jì)功能的優(yōu)先級(jí)時(shí)，關(guān)注業(yè)務(wù)目標(biāo)，項(xiàng)目范圍，時(shí)間表和產(chǎn)品開(kāi)發(fā)方式都是有價(jià)值的考慮因素。

If, for example, we’re designing an option for the users to upload a profile picture but we also add functionality to crop, scale, and rotate the photo, then this would unnecessarily complicate the design.

例如，如果我們正在設(shè)計(jì)一個(gè)供用戶(hù)上傳個(gè)人資料圖片的選項(xiàng)，但同時(shí)又添加了裁剪，縮放和旋轉(zhuǎn)照片的功能，那么這將不必要地使設(shè)計(jì)復(fù)雜化。

It’s effortless to add a “rotate” or “crop” button in design but would be trickier to implement in development. A safe bet is to avoid adding features unless they’re essential to the application. Always keep the business and user goals at the forefront of the design process.

在設(shè)計(jì)中添加“旋轉(zhuǎn)”或“裁剪”按鈕并不費(fèi)力，但在開(kāi)發(fā)中實(shí)施起來(lái)會(huì)比較棘手。 安全的選擇是避免添加功能，除非它們對(duì)于應(yīng)用程序是必不可少的。 始終將業(yè)務(wù)和用戶(hù)目標(biāo)放在設(shè)計(jì)過(guò)程的最前沿。

2.不準(zhǔn)備交接 (2. Not preparing for handoff)

When we’re designing a product or experience, we should take into account who else is going to be using our work. Whether our designs are handed off to developers or other designers, everything must be organized and appropriately documented.

在設(shè)計(jì)產(chǎn)品或體驗(yàn)時(shí)，應(yīng)考慮還有誰(shuí)會(huì)使用我們的工作。 無(wú)論我們的設(shè)計(jì)是交給開(kāi)發(fā)人員還是其他設(shè)計(jì)師，都必須組織一切并適當(dāng)記錄在案。

Our design files should have artboards named and laid out horizontally how they would be clicked through.

我們的設(shè)計(jì)文件應(yīng)包含命名為Artboard的名稱(chēng)，并水平布置如何單擊它們。

We should have an organized design file that contains all the icons in SVG format and a high-quality version of any images used in our designs.

我們應(yīng)該有一個(gè)組織良好的設(shè)計(jì)文件，其中包含SVG格式的所有圖標(biāo)以及設(shè)計(jì)中使用的任何圖像的高質(zhì)量版本。

When I hand off my work to developers, Zeplin is my preferred method. Zeplin makes it easy for developers to grab code snippets, dimensions, spacing, font sizes, SVG assets, and so on.

當(dāng)我將工作交給開(kāi)發(fā)人員時(shí)， Zeplin是我的首選方法。 Zeplin使開(kāi)發(fā)人員可以輕松地獲取代碼段，尺寸，間距，字體大小，SVG資產(chǎn)等。

There is a lot more that can be done for a seamless handoff, read Dorjan’s article on preparing for handoff if you’d like further insights.

無(wú)縫切換還可以做很多事情，如果您想進(jìn)一步了解，請(qǐng)閱讀Dorjan關(guān)于準(zhǔn)備切換的文章 。

3.忽略用戶(hù)的上下文 (3. Overlooking the user’s context)

There are various contextual factors that influence a user’s behavior when interacting with an interface. Consider where the user is when using our app, how much time they have, and what their emotional state is.

與界面交互時(shí)，有多種上下文因素會(huì)影響用戶(hù)的行為。 考慮用戶(hù)在使用我們的應(yīng)用程序時(shí)所處的位置，他們有多少時(shí)間以及他們的情緒狀態(tài)。

A perfect example of this is the sleep cycle app. The app has a calming dark display making it easy on the eyes and perfect for someone setting the alarm before going to bed.

睡眠周期應(yīng)用程序就是一個(gè)很好的例子。 該應(yīng)用程序具有令人放松的深色顯示屏，使您的眼睛輕松自如，非常適合在睡覺(jué)前設(shè)置鬧鐘的人。

You can see good and bad examples of this everywhere. Navigation apps have minimal reading or touching required, Kindle’s have no glare when reading outside, note-taking apps are available offline, and so on.

您到處都能看到好的和不好的例子。 導(dǎo)航應(yīng)用程序所需的閱讀或觸摸操作最少，Kindle在戶(hù)外閱讀時(shí)不會(huì)刺眼，筆記應(yīng)用程序可離線(xiàn)使用，等等。

If our app is meant to be used while jogging, then some constraints and considerations need to be taken into account in the design.

如果要在慢跑時(shí)使用我們的應(yīng)用程序，則在設(shè)計(jì)中需要考慮一些約束和注意事項(xiàng)。

The best way to ensure our interface and UX fit the user’s context is to test it in situations where it may be used and test it with users.

確保我們的界面和用戶(hù)體驗(yàn)適合用戶(hù)上下文的最佳方法是在可能使用它的情況下對(duì)其進(jìn)行測(cè)試，并與用戶(hù)進(jìn)行測(cè)試。

Shopify has a great article about designing with the user’s context in mind that I recommend for anyone interested in diving deeper into this topic.

Shopify上有一篇很棒的文章，它考慮了用戶(hù)的上下文 ，我向有興趣深入研究此主題的任何人推薦。

4.追求高保真 (4. Going straight to high fidelity)

Going straight to pushing pixels before validating our ideas or fully understanding the problem we’re solving for is an easy mistake to make.

在驗(yàn)證我們的想法或完全理解我們要解決的問(wèn)題之前直奔像素，這是一個(gè)容易犯的錯(cuò)誤。

This isn’t necessarily a wrong approach, but will often result in wasted time if the designs don’t work out.

這不一定是錯(cuò)誤的方法，但是如果設(shè)計(jì)不可行，通常會(huì)浪費(fèi)時(shí)間。

Wireframing with a tool like Whimsical is faster and more lightweight when throwing ideas together and getting a feel for the layout and hierarchy of our design. It’s also harder to fall in love with a design when it’s only a wireframe so we can take criticism and feedback much more easily.

當(dāng)將想法融合在一起并感受我們?cè)O(shè)計(jì)的布局和層次時(shí)，使用諸如Whimsical之類(lèi)的工具進(jìn)行線(xiàn)框繪制可以更快，更輕便。 當(dāng)它只是線(xiàn)框時(shí)，很難愛(ài)上設(shè)計(jì)，因此我們可以更輕松地接受批評(píng)和反饋。

5.忽視殘疾 (5. Neglecting disabilities)

Designing a product is similar to building a public building like a library or a school — it needs to be inclusive to all. That includes blind, color blind, and visually impaired users.

設(shè)計(jì)產(chǎn)品類(lèi)似于在圖書(shū)館或?qū)W校之類(lèi)的公共建筑中建造建筑 -它必須包含所有人。 其中包括盲人，色盲和視覺(jué)障礙的用戶(hù)。

Just ask Domino’s, they were sued by a blind man who could not access their website because it wasn’t accessible. Don’t be like Domino’s, design for accessibility.

只是問(wèn)問(wèn)Domino， 他們被一個(gè)盲人起訴，因?yàn)闊o(wú)法訪(fǎng)問(wèn)他們而無(wú)法訪(fǎng)問(wèn)他們的網(wǎng)站 。 不要像Domino那樣設(shè)計(jì)可訪(fǎng)問(wèn)性。

Often we’re trying to design what looks good and neglect to consider the different users that will be interacting with our product.

通常，我們會(huì)嘗試設(shè)計(jì)看起來(lái)不錯(cuò)的產(chǎn)品，而忽略了將與我們的產(chǎn)品進(jìn)行交互的不同用戶(hù)。

As I’ve matured as a designer, I’ve come to terms with all the various constraints that will undermine my idea of a perfect design. ADA compliance is one of such constraints.

隨著我成為一名設(shè)計(jì)師的成熟，我已經(jīng)接受了所有各種制約因素，這些制約因素都會(huì)破壞我對(duì)完美設(shè)計(jì)的想法。 ADA合規(guī)性就是這樣的限制之一。

Shrinking text down to 8px because it fits our horizontal space better or using a light shade of grey because it looks nice is neglecting our vision-impaired visitors.

將文字縮小到8px(因?yàn)樗m合我們的水平空間)或使用淺灰色陰影(因?yàn)樗雌饋?lái)不錯(cuò))而忽略了有視力障礙的訪(fǎng)客。

We can get away with this when we’re trying to score Dribbble likes, but it’s not a good practice when developing a product for real humans.

當(dāng)我們嘗試給Dribbble的喜歡度打分時(shí)，我們可以避免這種情況，但是在為真實(shí)人類(lèi)開(kāi)發(fā)產(chǎn)品時(shí)，這不是一個(gè)好習(xí)慣。

Web Content Accessibility Guidelines (WCAG) requires at least 4.5:1 contrast. There are also guidelines for motor, auditory, and cognitive disabilities.

Web內(nèi)容可訪(fǎng)問(wèn)性指南(WCAG)至少需要4.5：1的對(duì)比度。 也有針對(duì)運(yùn)動(dòng)，聽(tīng)覺(jué)和認(rèn)知障礙的指南。

To ensure you’re meeting these standards, download Stark which will check if your designs are accessible or not.

為了確保您符合這些標(biāo)準(zhǔn)，請(qǐng)下載Stark ，它將檢查您的設(shè)計(jì)是否可訪(fǎng)問(wèn)。

6.復(fù)制他人的作品或盲目遵循設(shè)計(jì)趨勢(shì) (6. Copying other’s work or blindly following design trends)

“Trends are like junk food for designers. Following them produces cheap solutions that offer some initial payback but little value over the long haul. Trend-following designers date themselves quickly. The reward for following someone else’s design path? A gnawing sense of professional emptiness.” — Micah Bowers, Designer

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，趨勢(shì)就像垃圾食品。 跟隨他們，他們便產(chǎn)生了廉價(jià)的解決方案，這些解決方案提供了一些最初的回報(bào)，但長(zhǎng)期來(lái)看卻毫無(wú)價(jià)值。 追隨潮流的設(shè)計(jì)師很快就跟自己約會(huì)。 遵循別人的設(shè)計(jì)路徑的回報(bào)？ 一種職業(yè)空虛的感覺(jué)。” —設(shè)計(jì)師Micah Bowers

It is easy to get caught up in the Dribbble world, and all the pretty animations and gradients, then quickly forget about the objectives of our design.

容易陷入Dribbble世界以及所有漂亮的動(dòng)畫(huà)和漸變，然后Swift忘記我們?cè)O(shè)計(jì)的目標(biāo)。

I’ve certainly gotten hooked on a particular interaction or design style that I found on Dribbble and tried to make them work in my design. Finding inspiration on Dribbble and elsewhere is great, but being inspired and blindly copying a UI component because it has a fresh look is not the same.

我當(dāng)然已經(jīng)迷上了在Dribbble上發(fā)現(xiàn)的一種特殊的交互或設(shè)計(jì)風(fēng)格，并試圖使其在我的設(shè)計(jì)中起作用。 在Dribbble和其他地方找到靈感很不錯(cuò)，但是由于外觀新穎而受到啟發(fā)并盲目復(fù)制UI組件并不相同。

7.重新創(chuàng)建設(shè)計(jì)約定和確定的語(yǔ)言 (7. Recreating design conventions and established language)

“Any time conventions are broken, it takes more time for a user’s brain to process the new content. Designers need to take the limitations of human cognition into account, as well as the reality of limited working memory.” — Joanna Ngai, Designer

任何時(shí)候打破常規(guī)，用戶(hù)的大腦都需要花費(fèi)更多時(shí)間來(lái)處理新內(nèi)容。 設(shè)計(jì)人員需要考慮到人類(lèi)認(rèn)知的局限性以及工作記憶有限的現(xiàn)實(shí)。” — 設(shè)計(jì)師Joanna Ngai

Users have come to expect similar experiences across the web. If our website, app, or software functions differently than what users have grown accustomed to, then it won’t be intuitive, and they will likely become frustrated with the experience.

用戶(hù)已經(jīng)期望在網(wǎng)絡(luò)上有類(lèi)似的體驗(yàn)。 如果我們的網(wǎng)站，應(yīng)用程序或軟件的功能不同于用戶(hù)逐漸習(xí)慣的功能，那么它就不會(huì)很直觀，他們可能會(huì)對(duì)這種體驗(yàn)感到沮喪。

An example of this is icons with an established meaning behind them. Icons like “search,” “home,” or “favorite” are represented similarly in the vast majority of interfaces. By using non-standard icons to represent these actions, we run the risk of damaging our user experience and causing a headache for users trying to use our software.

這樣的一個(gè)例子是圖標(biāo)，其后具有確定的含義。 絕大多數(shù)界面中類(lèi)似地表示“搜索”，“家庭”或“收藏夾”之類(lèi)的圖標(biāo)。 通過(guò)使用非標(biāo)準(zhǔn)圖標(biāo)表示這些操作，我們冒著損害我們的用戶(hù)體驗(yàn)并給嘗試使用我們的軟件的用戶(hù)帶來(lái)頭痛的風(fēng)險(xiǎn)。

8.專(zhuān)注于外觀，而不是工作原理 (8. Focusing heavily on how it looks, not how it works)

One thing every UI designer hates doing is breaking their designs.

每個(gè)UI設(shè)計(jì)師討厭做的一件事就是打破他們的設(shè)計(jì)。

Breaking a design essentially means to input data that would ruin the layout or aesthetic appeal of the interface. This can be uncomfortable to do as a designer, but it’s a crucial component to designing a flexible, scalable, and user-friendly product.

破壞設(shè)計(jì)本質(zhì)上是指輸入會(huì)破壞界面布局或美觀的數(shù)據(jù)。 作為一名設(shè)計(jì)師，這樣做可能會(huì)很不舒服，但這是設(shè)計(jì)靈活，可擴(kuò)展且用戶(hù)友好的產(chǎn)品的關(guān)鍵組成部分。

When the mockup I sent to production has a six-letter first name, it probably looks great, but what happens when Hubert Blaine Wolfe-schlegel-stein-hausen-berger-dorff Sr. tries to use the app?

當(dāng)我發(fā)送給生產(chǎn)的模型的名字由六個(gè)字母組成時(shí)，它看起來(lái)很不錯(cuò)，但是當(dāng)休伯特·布萊恩·沃爾夫施萊格斯坦·伯格森多夫嘗試使用該應(yīng)用程序時(shí)會(huì)發(fā)生什么呢？

Test designs and take a step back while designing to ensure that the interface can fit a wide variety of use cases, not just the ideal ones.

測(cè)試設(shè)計(jì)并在設(shè)計(jì)時(shí)退后一步，以確保該接口可以適應(yīng)各種用例，而不僅僅是理想的用例。

9.缺少設(shè)計(jì)狀態(tài) (9. Missing design states)

When designing for development, missing states will either create a gap in the experience or will need to be filled in by the developer. This can often create inconsistencies in the design and hiccups down the road.

在進(jìn)行開(kāi)發(fā)設(shè)計(jì)時(shí)，缺失的狀態(tài)會(huì)在體驗(yàn)上造成差距，或者需要由開(kāi)發(fā)人員填補(bǔ)。 這通常會(huì)在設(shè)計(jì)中產(chǎn)生不一致之處，并在以后造成麻煩。

We need to account for all of the different states that are possible such as error, success, active, disabled, hover, empty, filled, loading — to name a few.

我們需要考慮所有可能的不同狀態(tài)，例如錯(cuò)誤，成功，活動(dòng)，禁用，懸停，空，填充，加載等。

If I were designing a wishlist, for example, I would need to consider the state before a user had added anything to their wishlist: the empty state. Without this state, there will be a gap in the experience.

例如，如果我正在設(shè)計(jì)愿望清單，則需要在用戶(hù)向其愿望清單中添加任何內(nèi)容之前先考慮狀態(tài)：空狀態(tài)。 沒(méi)有這種狀態(tài)，體驗(yàn)將存在差距。

10.重新設(shè)計(jì)本機(jī)組件 (10. Redesigning native components)

By leveraging components already built into products, we can provide users with a familiar experience and avoid input errors.

通過(guò)利用產(chǎn)品中已內(nèi)置的組件，我們可以為用戶(hù)提供熟悉的體驗(yàn)并避免輸入錯(cuò)誤。

Regardless of how good of a designer we are, it can be hard to justify designing a calendar date picker from scratch. Even if ours is objectively better, the user still has to learn a new component when there’s a perfectly fine one built into their device. It also requires additional development and design effort to create a component from scratch.

無(wú)論我們多么出色的設(shè)計(jì)師，都很難從頭開(kāi)始設(shè)計(jì)日歷日期選擇器。 即使從客觀上講我們的組件更好，但當(dāng)設(shè)備中內(nèi)置了完美的組件時(shí)，用戶(hù)仍然必須學(xué)習(xí)新組件。 從頭開(kāi)始創(chuàng)建組件還需要額外的開(kāi)發(fā)和設(shè)計(jì)工作。

Native components are a no-brainer — use them to save time and effort for our team and reduce friction for users.

本機(jī)組件不費(fèi)吹灰之力—使用它們可以為我們的團(tuán)隊(duì)節(jié)省時(shí)間和精力，并減少用戶(hù)的摩擦。

👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.

be 讓我們成為朋友！ 在Twitter和Dribbble上關(guān)注我，并在LinkedIn上與我聯(lián)系。 別忘了在Medium上關(guān)注我，以獲取更多與設(shè)計(jì)相關(guān)的內(nèi)容。

More articles by me:

我的其他文章：

翻譯自: https://uxdesign.cc/10-common-mistakes-ui-designers-make-7c95bb5436b5

ui設(shè)計(jì) 網(wǎng)絡(luò)錯(cuò)誤

總結(jié)

以上是生活随笔為你收集整理的ui设计 网络错误_UI设计人员常犯的10个错误的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。