产品时间:2022-01-15 02:40


(内含注释,底部附参考译文)How to not suck at design, a 5 minute guide for the non-designer.Good design principles can be learned and exercised by anyone. This guide will give you a basic knowledge of practical design tips you can apply today (and impr...

本文摘要:(内含注释,底部附参考译文)How to not suck at design, a 5 minute guide for the non-designer.Good design principles can be learned and exercised by anyone. This guide will give you a basic knowledge of practical design tips you can apply today (and impr


(内含注释,底部附参考译文)How to not suck at design, a 5 minute guide for the non-designer.Good design principles can be learned and exercised by anyone. This guide will give you a basic knowledge of practical design tips you can apply today (and impress your design friends).If you don’t believe you can learn design, just remember what our legendary friend David Eric Grohl said about learning new things:I never took lessons to play the drums. I never took lessons to play the guitar. I just sort of figured it out. I think that if you’re passionate about something and you’re driven and you’re focused, you can do anything you want to do in life.— Dave Grohl, Foo FightersWith Mr. Grohls words in mind, are you ready for your crash course? Buckle up buttercup, here we go in no particular order:①figure it out 指出,想通, 弄明确,搞定它②crash course 速成课③in no particular order 无特定顺序1. Use plenty of contrastThe background and font color should be different enough to not cause eyestrain. Typically black text on white backgrounds tends to be the most legible. Stay away from the light gray, yellows and greens. If you have to squint to read then you know you have a problem.④be adj(形容词) enough to do sth / not do sth ...是足够...来做某事/才不会做某事Eg:This guy is intelligent enough to be ascientist. 这个家伙足够智慧来当一个科学家了.From: https://developer.apple.com/design/tips/2. Almost Black is easier to read than BlackIf you have the choice, try using the color #333333 RGB (51,51,51) instead of pure black for your text. Pure black on white jiggles for the eye and makes the letters hard to focus on.⑤instead of 取代... 常译为:而不是 Tips: 做阅读时,but/instead of ...等后面的内容是否认内容,其前面的内容是肯定的。3. Important Content FirstLayout the most important information first to clearly support the primary use case of your app or website. Important content should be visible without zooming or scrolling or tapping.⑥Prep+V-ingFrom: https://developer.apple.com/design/tips/Lets view some examples of good visual hierarchy in the wild.Instagram (below, on the left) puts a clear focus on the photo/video posted by the user.⑦In puts a focus on the photo (which) posted by the user 定语从句限定photo划线部门为完整的句子,不缺任何身分。(which)为省略掉的关系代词 ⑧Posted by 被用户公布的Pinterest (below, on the right), creates visual hierarchy by pinning their search bar to the top followed by their nice grid below. Pinterest is very intentional about having their search box as the first item on the page.⑨about+V-ingSearch is the core function of the app, folks use Pinterest to discover and browse.Lets look at two more examplesSpotify (below, on the left) clearly is celebrating the album artwork and song title first and player controls second. Even though the player controls are secondary, Spotify gives more weight to the play and pause button over fast forward and reverse.Facebook (below, on the right), looking very similar to Instagram, chooses to put the content of your friend front and center.4. Align all the thingsThe fastest way to fix something that feels off or janky is to make sure the alignment is not off. When designers talk about the need to use a “grid” they are trying to alert the team to the issue of mis-alignment.Fixing alignment is one of the easiest improvements we can make to any app or website and instantly makes an app or website look 10x better.⑩动名词做主语⑪one of +[n]sFrom: https://developer.apple.com/design/tips/Lets look at another alignment example, this time from medium.comHere is a web layout I tweaked from Medium.com — how does this look to you?Does anything feel off about this layout?Hint: notice the alignment on the left edge. How does it look?On the left I highlighted the visual river caused by mis-alignment, on the right I simply left aligned all the major content blocks.Wonky alignment on the left creating a visual river, consistent alignment on the rightBad alignment on the left, Fixed alignment on the right5. Text size with spacingWe are not designing for ants.Increasing font size will make your content much easier to read and digest coupled with some liberal line spacing.Good text size vs bad text size from: https://developer.apple.com/design/tips/Good spacing vs. bad spacing size from: https://developer.apple.com/design/tips/6. Use a list view for results, if order is importantMost mobile and web apps have some type of search and there can be some healthy design debates on how to display the results.If order is important then a list view is most effective.If order doesn’t matter and you would like to encourage discovery (like Pinterest or AirBnB) then a grid view will encourage a gaze pattern to support discovery.How do Users View Search Results Presented in a Grid Layout? By C. Siu & B. Chaparro7. Design in black and white first, add color laterDesigning in black and white will keep the focus on solving and designing the core experience of your app.Color evokes strong emotional responses and often interrupts our ability to focus on the core design problem.8. Create comfortable designHand strain is a real issue, consider the graphic below from Luke Wroblewski’s amazing article: Responsive Navigation: Optimizing for Touch Across Devices.Luke lays out the areas of a phone that are easiest to reach and use (at least for right handers) — I’d love to see apps have a setting where you can switch the interface from right hand dominant to left hand dominant.⑫I’d love to see apps have a setting/[ where] you can switch the interface from right hand dominant to left hand dominant.定语从句Many effective mobile apps keep navigation and core actions in the bottom third of the phone.Image Credit: Luke Wroblewski Responsive Navigation: Optimizing for Touch Across Devices9. Borrow Color PalettesColor is a bit of an elusive dark art. I highly recommend heading over to Dribbble and searching for “Color Palettes” or use a color palette generator like Coolors or Color Claim.⑬highly recommend 强烈建议Save yourself the hours of endless debate and second guessing.10. Use Apple and Google OS ConventionsApple and Google have created incredible resources for anyone building software for Android or iOS.For example, the Google Material spec has guidelines, resources, colors, icons and components to help jump start the design of your app.Apple has the HIG — their Human Interface Guidelines, which outline everything you need to know on how to design an iOS app.Various screenshots from Google Material Design and The Apple Human Interface GuidelinesRemember, design takes practiceTraining your eye to look for the design issues takes a bit of time and practice, but you will find the above tips will go a long way to making anything you create better designed.If you found this article helpful please tap or click “♥︎” and recommend this and share this with a friend who needs design help :)转载自:https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037作者:Marc Hemeon参考译文:给设计初学者的5分钟设计指南,告诉你如何不做烂设计好的设计原则可以让任何人学习和使用,本指南今天将为你提供一些在实用的设计技巧中的基本知识,这些内容或许也将会感动你的设计师朋侪。

如果你不相信你可以学习设计,只要记着我们著名的朋侪大卫·格鲁(David Eric Grohl,美国涅槃乐队鼓手)所说的关于学习新事物的内容:我从来没有上过打鼓课,也从来没有学过吉他。我只是似乎弄明确了。我认为,如果你对某些事情充满激情,你是主动而且专注的,那么你可以做任何你想做的事情。- Dave Grohl,Foo Fighters看了大卫·格鲁这句话,你准备好开始你的速成课了吗?扣好宁静带,我们出发了。


远离浅灰色,黄色和绿色。如果你不得不眯着眼看,那你便知道是有问题的。2.靠近玄色比玄色更容易阅读如果可以选择字体的颜色,请实验使用靠近玄色的颜色,如#333333 RGB(51,51,51),而不是纯玄色的文字。







保持对齐是我们可以对任何APP或网站举行最简朴的革新之一,并能让APP或者网站悦目10倍。让我们看看另一个来自medium.com的对齐案例这是一个我调整过的Media.com的网页结构 - 看起来怎么样?对这个结构有什么感受吗?提示:注意左边缘的对齐。看起来怎么样?第一张图,我标出了由没对齐引起的视觉变化,第二张图,我对齐所有主要的内容。乱七八糟的内容在第一张图缔造出一个视觉曲线,第二张图是一致的图三是没对齐的排版,图四是对齐后的排版5.文字巨细与间距我们不是为蚂蚁设计的。




8.缔造舒适的设计手部操作是个值得关注的问题,通过思考在用户体验专家Luke Wroblewski的文章:响应导航:优化跨设备的触摸操作底部的图表。Luke 排布了操作手机时最容易到达和使用的区域(至少对于右手来说是这样)——我很想看的应用法式有一个可以切换左右手使用习惯的设置。许多有有效的移动设备应用法式将导航和焦点操作的区域保留在手机下方三分之一处。9.借用调色板颜色是一门难以捉摸的艺术。

我强烈建议去Dribbble网站搜索Color Palettes或者使用像Coolors 或 Color Claim的颜色生成器。节约你无休止的辩说和二次推测的时间。10.使用苹果和谷歌的操作守则苹果和谷歌给任作甚安卓或ios构建软件的人缔造了不行思议的资源。







  • 产品:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 详细地址:

  • 留言内容:

在线客服 联系方式 二维码