单色显示屏 界面菜单

    科技2023-11-27  97

    单色显示屏 界面菜单

    In color theory, there are a number of different harmonies that you can work with to create various color palettes. However, when it comes to UI, it doesn’t take a slew of colors to create beautiful designs. In fact, sticking to a monochromatic scheme can help your designs look cohesive, clean, and sophisticated.

    在颜色理论中,可以使用多种不同的和谐来创建各种调色板。 但是,当涉及到UI时,并不需要花很多颜色就可以创建漂亮的设计。 实际上,坚持单色方案可以帮助您的设计看起来凝聚力,简洁和精致。

    And the best part? Once you learn these few tips, it takes no time at all to create your palette.

    最好的部分是? 学习了这些技巧后,就完全不需要创建调色板了。

    At the end of this process you will have an easy to use a palette that consists of:

    在此过程结束时,您将可以轻松使用包含以下内容的调色板:

    Base color

    基本颜色 Lighter base variation

    较轻的基础款Darker base variation

    基础变暗Low contrast neutral

    低对比度中性“Black” (high contrast neutral for light mode)

    “黑色”(高对比度中性,适用于灯光模式)“White” (high contrast neutral for dark mode)

    “白色”(在黑暗模式下为高对比度中性)

    I also offer tips on the uses for each color.

    我还提供了每种颜色的用法提示。

    Let’s get started!

    让我们开始吧!

    创建单色UI调色板的步骤 (Steps to creating a monochromatic UI palette)

    步骤0:明暗模式(Step 0: Light and Dark Mode)

    Before you do anything, if you plan on creating a light and dark mode, make sure you establish what those look like.

    在执行任何操作之前,如果计划创建明暗模式,请确保确定它们的外观。

    Even if you are not creating two modes, this is essentially establishing your “black” and “white.”

    即使您没有创建两种模式,这实际上也是在建立“黑色”和“白色”。

    Note that these do not have to be a pure black and white. Your black could be a deep navy blue or you white could be a very subtle beige. Just make sure they are consistent throughout.

    请注意,这些不一定是纯黑白的。 黑色可​​能是深海军蓝色,或者白色可能是非常微妙的米色。 只要确保它们在整个过程中保持一致即可。

    步骤1:选择底色 (Step 1: Pick a base color)

    This will be your dominant color. You can’t really go wrong in this step, but do keep in mind that the color should be usable on both light and dark interfaces.

    这将是您的主要颜色。 您在此步骤中不会真正出错,但请记住,该颜色应该在浅色和深色界面上均可用。

    If you are working for a brand, then just go with a primary brand color. If you are lucky enough to have total creative freedom, then the world is your oyster.

    如果您正在为品牌工作,那么只需使用主要品牌颜色即可。 如果您有幸拥有完全的创作自由,那么世界就是您的牡蛎。

    Feeling stuck? Blue is the most common favorite color of both males and females. It’s all over UI design (think Twitter, Facebook, and LinkedIn) and it develops a sense of calmness for the user. If you don’t know where to start, blue is a pretty safe bet.

    感觉卡住了吗? 蓝色是男性和女性最喜欢的颜色。 整个UI设计(例如Twitter,Facebook和LinkedIn)都可以使用户感到平静。 如果您不知道从哪里开始,那么蓝色是一个非常安全的选择。

    第2步:创建基准色的色板 (Step 2: Create swatches of your base color)

    These colors are going to be all your interactive elements, like hovers or call-to-actions. Remember, don’t change the hue, just change the saturation and brightness. Make at least one lighter and one darker swatch.

    这些颜色将成为您所有的互动元素,例如悬停或号召性用语。 请记住,不要更改色调,只需更改饱和度和亮度即可。 制作至少一个较亮的样本和一个较暗的样本。

    If you need a darker color variation = increase saturation and decrease brightness

    如果需要较深的颜色变化=增加饱和度并降低​​亮度

    If you need a lighter color variation = lower saturation and increase brightness

    如果您需要较浅的颜色变化=降低饱和度并增加亮度

    步骤3:创建高对比度和低对比度的中性色。(Step 3: Create high and low contrast neutrals.)

    These will primarily be used for your layout elements and help differentiate different sections or groups on information.

    这些将主要用于您的布局元素,并有助于区分信息的不同部分或组。

    Your low contrast neutrals can be used for sidebars, form fields, or anything that you might want to separate but don’t need to stand out. These will be lighter/darker colors of your established “black” and “white.”

    低对比度的中性点可用于侧边栏,表单域或任何您想分离但不需要突出的东西。 这些将是您设定的“黑色”和“白色”的较浅/较暗的颜色。

    Your high contrast neutrals can be used for high contrast backgrounds. To find these all you have to do is switch your light and dark modes. That is, your high contrast neutral for your light mode is the “black” that you established in step 0, and vice versa.

    您的高对比度中性线可用于高对比度背景。 要找到这些,您所需要做的就是切换亮和暗模式。 也就是说,您在灯光模式下的高对比度中性色是在步骤0中建立的“黑色”,反之亦然。

    That’s it! You now have a sure-proof 6 color palette to create a stunning UI. Remember that these rules are not written in stone. While this can be a good base tool to get started, you may run into states that require more colors. If you need to, add as you go. Just ensure you are consistent and thoughtful with your decisions!

    而已! 现在,您可以使用可靠的6种调色板来创建精美的UI。 请记住,这些规则并不是一成不变的。 尽管这可能是入门的不错的基础工具,但您可能会遇到需要更多颜色的状态。 如果需要,可以随时添加。 只要确保您对自己的决定始终如一!

    资料来源 (Sources)

    How I Organize Colors for a UI Design Project — Here

    我如何为UI设计项目组织颜色—在这里

    UI Design | How to choose colors and color palettes — Here

    UI设计| 如何选择颜色和调色板—在这里

    Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in. 海湾地区黑人设计师:一个专业的黑人开发社区,他们是旧金山湾区的数字设计师和研究人员。 通过在社区中团结起来,成员可以共享灵感,联系,同伴指导,专业发展,资源,反馈,支持和韧性。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

    翻译自: https://uxdesign.cc/how-to-effectively-design-a-monochromatic-user-interface-ui-897c07c5a09e

    单色显示屏 界面菜单

    相关资源:四史答题软件安装包exe
    Processed: 0.009, SQL: 8