火星网校
四海方城用实战案例告诉你如何从零开始设计UI界面
发布时间：2023-12-28 09:09:42 浏览量：213次
怎样在确保根本的可用性和易用性的一起，让界面柔软、富有亲和力？如何在让用户愉悦的一起，还能用设计取悦自己？四海方城威客网的办法谈不上有多神奇，可是让人眼前一亮，值得借鉴。
真的重视趋势改变，你会清晰地感受到，视觉作用和设计技巧一直在变……它们一直是设计师们的论题中心。可是这篇文章并不计划评论这个事儿，无论突变是否盛行，新拟物化的可拜访性是否不足，都不在今天的评论规模内。
对于各种风格、办法，四海方城威客网的观念一直是：做出来的设计要可用，有用，有杰出的可拜访性，用户能够轻松了解，就行了。不过，我更乐于从趋势中取得乐趣，而不是将它视作为约束，假如每个界面看起来都是相同的，那该是一件多么无聊的工作啊。
关键在于，要让产品的视觉款式和你的用户群体匹配起来。
我个人十分喜爱美丽的突变和奇妙的暗影，这样的设计常常显得魅力特殊。这种天然的过渡和光影的改变，十分贴合我们对于实际国际的感知，这就是为什么这样的设计能够俘获很多没有技能布景的用户的心--因为它们看起来友爱，而且易于了解。
四海方城威客网将分享如何将 UI 作用设计得出彩又友爱，让视觉作用柔软又让人感觉舒适。本文围绕着一个「面向年轻人的金融 APP」虚拟设计项目来进行展示。
下面我们开始吧！
1、视觉层次的一致性
怎么让我们的设计看起来柔软圆润呢？下面开始准备工作：
1）挑选想要运用的配色（想想运用柔软的粉彩构成的布景主色调，搭配一个给人精美感的非必须色，以及一个抓人留意力的强调色。）
2）挑选合理的字体（我用的是 Brandon Grotesque，这是我最喜爱的字体，它满意友爱，能够营造有趣的氛围，且具有杰出的可读性）。接下来，给字体设计不同巨细和字重（最好不超越5种不同的款式）。其间，标题字体应该较大，正文字体较小，最小的字体用于细节出现。留意，尽量不要在长语句里边运用全大写。
3）确认你所需求的暗影的高程（Height）和含糊度。
4）假如运用的是图标，确认运用填充款式仍是描边款式。尽量不要混用。
至此，一个小型的设计体系就已经确认了。
2、给UI元素营造柔软梦幻的氛围
在设计界面的时分留意，锋利的边缘会让界面看起来严厉而专业，圆角则会显得充溢亲和力。
天然弥散的暗影也会让设计看起来满意精巧，所以当我们向元素增加暗影的时分，会强化视觉层次。不同的暗影作用，给人的「高程」上的感觉也不相同。
暗影较深的元素会显得距离布景更近一些，暗影较浅，弥散规模更大，则显得高程更高，距离底部布景更远。这就是为什么很少会有元素产生较深的暗影，因为太多就会显得不够天然。
挑选元素并赋予它们以一定的含糊作用是一个需求不断尝试的过程。不过不要惧怕，这就是一个调整参数的小游戏。下面是我设计界面的时分的一些参数设置。
假如要让暗影看起来愈加共同，尽可能让暗影和远景元素运用同色相的色彩，然后下降不透明度。抱负情况下，布景也应该有相似的色调。
3、让突变看起来愈加平滑细腻
为了让突变看起来愈加舒适，我们能够从同一个配色方案中挑选比较激烈的色彩，甚至也能够是同一色系的色彩，稍微调理一下它的亮度就能够了。
然后重新拉伸一下突变，让色彩过渡变得愈加平滑。虽然这样的突变简直看不清楚，可是元素看起来会有显着的凹凸感。
对于白色的元素，你能够选取和布景相近的色彩来制造暗影，只需确保比照度，不会相融就能够了。
4、挑选和布景匹配的正确字体
在字体配色上，黑色和灰色是最经典的挑选。可是假如要让字体和整个设计在视觉上坚持同一和谐，你还需求往其间注入一些别的色彩，让它和整体融合度更高。比方这里用的绿色的布景，那么能够在其间参加一点绿色的色调，这样就和谐了很多。
5、增加让项目更具吸引力的细节元素
有些细节可能是没有必要的。可是对我个人而言，我十分喜爱引人入胜的小细节，通过这些「额外」的设计细节，让人感受到不相同和愉悦感。
假设你的页头是一个烦闷单调的形状，那么不妨让它柔软一点，加一个小三角，然后它就变成了一个对话框气泡，界面和用户之间的对话感就产生了。
假如布景是单调的白色，能够参加一些愈加富有娱乐性的底纹，它能够精约的图标，也能够是其他。你能够简略地复制粘贴同一个元素，调整巨细和视点，只需不影响远景的可读性即可。
感觉单纯的数据展示很无聊？那么能够增加一些小图标，来进行区分、说明和展示。
尽可能地让你的界面看起来愈加有趣、富有构思。假如你不知道要怎么办，能够用实际生活中的物品或许设计作为灵感来历。
最终，调整用户头像的细节
这个步骤一般而言是彻底没有必要的……可是我每次都会在这件工作上花费不少时间进行调整，这可能是强迫症吧。
我会给自己的样机挑选一个满意美丽的用户头像，可是她的妆容和整个 UI 界面的配色可能是不匹配的，这对于我这样一个完美主义者而言是……难以接受的。
所以我总会额外花费一点时间来微调一下妆容来满意我的「强迫症」。比方这个案例傍边，我会从界面取色，将头像中原本棕色的瞳孔微调成为绿色的「美瞳」，在头像上新建一个图层，借用 PS 的混合模式给瞳孔增加色彩（不透明度50%）。
总而言之，UI界面设计的核心一直仍是遵从一致性、可用性和杰出的可拜访性。可是在遵从这些规则的前提之下，尽可能地发挥自己的想象力，创建让自己也让用户感到欢喜的用户体会，发挥构思，这样的 UI 界面会让人爱不释手！
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 物联网APP UI设计:创造智能硬件领域的沉浸式体验
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
最新文章
