设计UI的基本思路； 五十个UI设计资源网站

基本思路； 五十个UI设计资源网站"/>

设计UI的基本思路； 五十个UI设计资源网站

我在设计UI时，通常是有一些步骤与原则，让大家对UI设计有一个思路，这里一定要有一个意识，在拿到一个UI设计图的时候，不要马上就想到要怎么怎么实现，而是需要细心分析与设计。

1，明确划分与UI相关和与UI无关的部分

根据UI的设计图，我们首先要把界面展现的数据先抽出去，只看UI的表现。也就是说，把UI相关的部分抽出来。比如一个界面可能需要分几部分组成，每一部分大概怎么设计等。

2，划分屏幕大小，明确出跳转关系

要考虑到你的APP所对应的屏幕大小及DPI，不同的屏幕与DPI，你有可能会存在不同的UI布局，最典型的是在3.0以上的SDK版本，可能引入了Fragement元素，手机屏幕与平板的屏幕的UI设计，完全是两种不同的风格。

还有，尽可能地明确出跳转关系，这可以用一些小卡片的形式来标记，一个卡版表示一个画面，把不同画面之间的迁移关系明确出来。

同时，还要把这些画面之前的相同点与不同点找出来，因为这会影响到是否决定提取共通画面。

3，列出需要用到的UI元素（Widget）

把界面上展现的UI元素列出来，像常用的button, imagebutton这些很简单，一看就知道，关键是有些UI，可能会涉及到一些自定义的View，这里一定要多考虑。

另外，有可能为了统一控制，比如也有可能扩展一个Button，派生类里面可能只是改变一个字体大小等，这种做法通常是用于多数UI的字体大小相同，可以抽象出来个共通的Button，这样在各个UI里面，就可以不用都来设置这个字体大小。

还有，也可以抽出共通的style，比如textview的style，文本颜色，字体大小，是否加粗等。

4，列出哪些UI元素可以用SDK的，哪些则是需要自定义

据我的经验，通常一个项目里面都会有自定义的组件（View），多数是组合控件——把不同的Widget组合成一个Layout。这还要需要根据项目自身的需求来定。

注意：这里一定要有一个良好的设计，以应地需求变更。比如第一版需求，可能不需要一些组合View，直接使用SDK自身的Widget就能完成，但经过一些变动之后，发展之前的UI设计不合时宜，可能需要提供自定义的View，那么原来用到SDK自身的Widget的地方可能需要改动。这种改动说大也大，说小也小，在设计的时候，要多考虑一下这种需求变更。

5，完成UI界面的绘制

这一步，其实不一定会用到，通常情况下，不会涉及到自绘制，因为自绘制比较麻烦，而且费时间，但是在特殊情况下，自绘制能提高效率，因为你用View布局，会涉及到layout, measure, touch event, dispatch draw等方面，这些会影响性能。

6，进行内部逻辑和UI界面的整合

通常一个View里面，都会有一些逻辑，特别是自定义的View，可能会封装一些特定的属性。

在使用这些View的时候，UI的activity会与这些View有一个逻辑的整合。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

五十个UI设计资源网站
 

1、UCD大社区 /

2、腾讯WSD /

3、腾讯CDC /

4、腾讯ISD /

5、淘宝UED /

6、著片会/

7、口啤UED /

8、阿里UED /

9、阿里妈妈UED /

10、163UED /

11、搜狐UED /

==============================================================================

图标设计及素材

1、中文图标搜索 /

2、/

3、/

4、/

5、提供搜索/

6、国外图标/

7、图标搜索 /

9、/

10、/

===============================================================================

网页、UI设计门户

1、站酷/  /

2、八只熊/

3、国外网站欣赏/

4、网页设计师联盟/

5、我爱设计网/

6、蓝色理想/

7、视觉中国

8、创意视觉/

9、国外设计门户/

10、合子UI /

11、酷点/

12、优艾网/

13、中国UI设计师大社区

14、UI制造/

15、UI设计网/

16、优设 ： 

==============================================================================

专业UI设计团队

1、Eico设计 /

2、Reooo 设计 /

3、西安超人科技 /

4、UI power /

5、Rigo设计

6、ICON设计 /

7、记忆拼图 /

===============================================================================

素材门户

1、素材精品屋 /

2、昵图网

3、全景网

4、图库 (行业LOGO)

5、素材库 /

6、LOGO大全 /

7、图图网 /

8、创意悠悠花园 /

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

ui设计技巧，让你的设计不落伍

 

1、功能性极简主义

不少移动端APP和网站开始基于极简主义设计风来设计，而极简主义本身并非关注所有的信息，而是通过减少非关键信息来突出特定的内容，它是有着极强的功能性和偏向的。它有着如下的特征：

・简单明晰

・富有表现力的视觉层次

・对比明显的比例控制

・每个元素都有功能

・大量的留白

・对核心细节的高关注度

・优秀的排版设计

・去除非功能性的装饰元素

2、粗野主义风格

粗野主义设计在2017年非常火爆，采用这种风格的UI，致力于使用更加明亮的色彩，质朴甚至原始的设计元素，借助复杂的布局和反模式的排版，还原早期网页设计的特征，甚至制造出上世纪八九十年代的质感。它有着非常明显的独创性，不管你喜欢不喜欢，它都是无法被忽略的一种流行设计风格。

3、字体和图片的融合

大胆地将虚拟的字体和真实的图片融为一体的设计也是去年流行的设计手法，这种设计手法让字体拥有了融入真实场景的视觉体验，协调而赏心悦目。

4、带动效的首图Banner

在网页中，首图Banner 是最为吸引用户的内容，他们不仅在视觉上足够突出，而且能够传递信息，传达情绪，强化主题。动效的加入，让首屏的Banner图更加吸引人，富有更强的吸引力。

5、自定义主题的插画

插画有着极强的可定制性，这也使得它越来越多地出现在UI和网页设计中，它不仅更容易被用户所感知，可以更好地承载创意，也可以带来更加可控的风格和调性。此外，优秀的插画还能干删用户体验，提高可访问性。

6、全屏式布局

如果你仔细观察，会发现许多设计师都热衷于使用全屏式的布局，让图片和视频等视觉元素不再受到边框的限制，这样的布局更加宽敞，不会有打破界限的感觉。

7、多样的UI动效

在动效设计这件事情上，你会发现它在2017年越来越成熟了，融入交互的动效越来越圆融，用户体验引人入胜的APP也越来越多了。接下来，UI动效还会越来越优秀。编辑：千锋UI设计

8、对UI友好的品牌设计

2017年许多著名的品牌都针对自家品牌进行了重设计，被重新设计之后，这些品牌的LOGO等元素都得到了不同程度的简化，并且针对数字化产品进行了优化，对于UI更加友好，而且几乎每个品牌都制作了动态版本的LOGO。

9、单色UI

为了让UI和产品的功能性更强，不少设计师倾向于使用单色配色方案，这样设计出来的UI确实看起来更加时尚，最关键的是单色配色之下，内容更加突出，用户更不容易被分心。不过，设计师需要投入更多的时间来打磨设计，避免整个UI变得乏味。

10 、深色系背景

深色系的背景通常能够创造出更加优雅、更具有形式感的设计，也能让设计出来的实际效果在不同的环境下有更加一致的体验。相比之下，采用这样设计的大多是数字产品页面，而非以文本为主的网站。

11、浅色的文本背景

这是和深色系背景相伴出现的一种设计趋势，通过白色或者浅色的区块来承载文本，确保文本内容的可读性，还保持了整体的优雅。

12、成熟而对比强烈的字体搭配

越来越多的新字体进入设计师的视野，许多经验丰富的设计师都特别重视字体的搭配。在2017年我们看到了许多优秀的衬线体+非衬线体的字体组合，它们不仅创造了良好的对比度，而且让整个排版设计的层次感更加显著。

13、实验性的栅格系统

设计师的创意越来越强了，即使是栅格也能玩出新花样。通过自定义创造出实验性的栅格系统，设计师在此基础上能够创造出更加灵活原创的布局，创造性地使用各种视觉元素。不过，实验性的栅格系统通常都需要多次迭代和测试，确保可用性。

14、多样的着陆页设计

在2017年，着陆页开始以多种多样的方式呈现出来，无论是企业网站还是电商网站，在着陆页的设计上也越来越实在，开始越来越多地关注用户最在意的问题，着力提升着陆页的转化率。通过市场调研和测试，着陆页的设计也越来越友好，灵活的原创近乎随处可见。

15、创意十足的视差设计

视差滚动依然在流行，滚动毕竟是最省心最自由地交互方式，视差滚动本身能够促进用户持续不断地交互，这也使得多样而富有创意的视差在网页和移动端APP中大规模地使用。

16、用视频内容促销

视频内容的普及是我们大家都有目共睹的大趋势，这也使得视频内容成了营销和运营人员的最爱，越来越多的视频促销内容开始出现。视频内容可以结合视觉和听觉对用户产生作用，而动画和平面设计的内容也同样可以适当地融入其中，更好地服务于产品，提升转化率。

17、UX的游戏化设计

游戏化设计对于产品体验的提升是明显的。不仅仅提升了产品的娱乐性，而且让产品更贴合用户需求和人性。挑战，奖励，积分，成就系统，徽章，排行榜，社交媒体机制，等等等等，所有的这些都提升了用户的参与度，对于UX的提升是毋庸置疑的。

18、卡片式布局元素

卡片式布局的优势在于它的自由度，它足以承载各种类型不同功能的元素和模块，拥有着统一的美学特征和易于阅读、易于交互的特点，为更为协调的设计作出了不小的贡献。

19、风格化的几何元素

几何元素有着不俗的装饰性，而且它可以和不同的设计风格搭配起来，让整体设计的视觉饱满度和体验有所提升，不同的几何元素还能营造不同的情绪和氛围。

20、实验性的配色方案

设计师对于色彩的探索从未停止。实验性的配色方案通常都不会太完美，但是由于色彩本身会传递出不同类型的情绪，实验性的配色通常由于其独特性，而能够传递出更为强烈的情绪和独特的体验。

21、不再使用乱数假文

现如今对于UI设计的要求越来越高了，以往在设计阶段，设计师会用乱数假文（Lorem Ipsum）来填充内容，但是现在大家已经开始有意识地使用真实的内容来填充界面，确保视觉到内容都有真实感。

 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

7个向设计师提需求的正确方法

1. 讲清设计目的
安排这个设计项目是为了什么？
是调整产品整体视觉，还是解决某一个项目的需求？
是重新升级已有版本，还是推出一个全新的设计？
你是否清晰地知道自己想要什么样的设计，还是只有一个模糊的概念？
比如，大多数的品牌设计不单单只是为了卖货，更重要的是突出品牌辨识度，这对品牌来说是一项长远的规划。敲定这一目标对达成满意的合作至关重要。

2. 预算与工期
您的预算范围是多少？
设计师不会因为知道预算而刻意提高报价，相反，当他们知道预算范围，就有能力知道在这一范围内，可以为之定制何种质量的设计作品。
你的预计工期是多久？
好的设计永远需要耗费大量的时间。设计一个完美的网页需要考虑非常多的因素，比创作一幅漂亮图片复杂得多。比如为了配合公司和产品发展的一些节点，你可能即将举行一个产品发布或展销会。你可以设置一些具体的时间要求，但请提前告诉设计师这些时间点，期望完成的时间点对设计师很重要。
就预算和工期与设计师达成一致非常重要。
如果设计师无法接受设想中的预算和工期，可能需要你做一些让步，削减设计内容。我们建议，在预算和工期上不要过于苛刻。给予宽松的预算和工期，你与设计师之间的合作会更加愉快。你的网页到底要达到什么样的程度？如何跟设计师点出你的功能性需求和审美性需求？然后我们再详细跟设计师沟通工期和预算。


3. 明确目标客户
本次设计的目标客户是哪类人群？
你的网站主要浏览群体是青少年还是公司决策者？
如果不知道目标客户是谁，可以描述期望的客户是哪种人群，或者解释一般是谁购买和使用你的产品和服务。如果有几类人群，可以分别进行详细描述。设计师会努力覆盖所有你的期望人群。有时，你的真实目标客户与你的设想并不一致。让设计师更多地参与和了解你的产品，对于设计的结果有重要帮助。还是以开发手机安卓系统安全软件的科技公司trustlook（硅谷）为例，品牌重塑的目标是为了扩张市场，最开始认为其目标客户应该是重视手机安全的人群。经过市场调研发现，由于在明显的客户群中竞争激烈，其市场真正的潜在客户是妇女和老人。


4. 明确设计范围
本次设计的范围是什么？
不是所有的设计项目涉及的深度都一样。也许你想要的是一个带购物车的电商网站，也许你想要的是只有基本公司信息的导航主页。制作需要设计师介入的深度也不一样。一些项目需要的是一套完整的客户解决方案，另一些项目则只需要套一个现成的模板。有时候，设计项目的范围显而易见，如果你的目的是通过网站售卖产品，需要的是一个商业方案。有时候，你要的东西无法通过目的清晰得知，比如是否需要整合博客资源，或者社交功能等等。


5. 提供可能的材料
你是否已经有商标？小册子？产品图？或其他对设计有用的材料？
是否有既有的推广材料能够体现你的设计品味？


6. 设想整体风格
你对设计风格是否有整体把握？跟设计师沟通的结果可能发生以下两种情况：
你心中的设计是最符合你产品的设计，而设计师的设计却没有那么容易理解
你心中的设计并不好，设计师的风格却更能被大众接受
这两种可能性都存在。如果你没有办法表达你需要的设计风格，那么就清晰地表达出你厌恶的设计风格。举个例子，如竞争对手的设计，你是喜欢还是不喜欢，这对设计师有很大帮助。


7. 什么是”不想要”的
知道自己的“厌恶型”和明白自己的“理想型”一样重要。一些客户讨厌某些功能，例如三栏布局，幻灯片。这些请一定告知你的设计师，以免设计师将精力花在你不感兴趣的功能上。


那么，我该如何“下需求”？
如果你是一位有过设计外包经验或者熟悉这一领域的客户，不妨尝试写一个全面的设计需求文档，明确设计师需要做什么、一些设计要求和限制等等，从而指导整个设计过程。如果你没有尝试过这一方式，那么不妨请设计师给你出一份问卷或者做一次采访，与设计师当面交流，让设计师明白你会欣赏那些创意和想法。
设计需求文档对一个设计项目非常重要。将之看做商务计划，覆盖设计项目的所有方面，并对之后项目按期完工提出要求。


看完了方法论，来看个例子温习一下：
某知名App的Logo设计需求文档
原稿：
Logo设计要求（按照优先级排序）：
1、独特（醒目、识别度高、容易记）
2、简洁
3、国际化
4、品牌的延展性较高（各国语言的”单行本”app，从语言延展到其他相关领域）
5、卡通形象加分，不必须（logo不一定要是一个卡通形象，但是我们需要一个卡通形象）
6、能看出是从现有logo演化而来的（能看出联系）加分，不必须
7、输出：logo图形；logo与中英文品牌名的组合（中英文字体无需设计，用基础字体即可）； logo单色图形；logo在App Icon中的应用
修改意见：
有效的设计需求是问题而不是结论。例如，不要写”我要独特的设计”，每个人对于”独特”都有不同的认识，因此结果无法量化。而可以写”我们的挑战是如何在诸多竞争对手中获得更多的用户”，从而把设计、产品、市场一起面对同一个目标。针对好的问题，好的设计师可以更好的创造新的形式。
修改稿
1.设计目的：公司战略转向国际市场，因此品牌形象需要符合这一战略，希望做一个适应国际市场的形象。我们的挑战是如何在诸多竞争对手中获得更多的用户。
2.预算与工期：由于要配合公司产品2个月后在美国市场发布的计划，因此工期限制在一个半月的时间。预算方面可以和设计师协商，5-10w。
3.目标客户：从美国开始，但是之后会拓展到各个国家的人群。
4.本次设计的范围：Logo、Logo与中英文品牌名、Logo单色图形、Logo在App Icon中的英文、西文、日文版本，品牌卡通形象。
5.参考材料：现有Logo。
6.整体风格：简洁，与现有logo最好有关联 。