UI设计思路最重要！设计网站有七大秘诀
UI设计思路最重要！七大秘诀帮你设计出令人难忘的优秀网站
失败的网页设计各不相同，但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么，什么东西能够触动他们，让他们欲罢不能，无法忘怀。
听起来似乎很简单，不是吗？取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦，那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素，才是一切的关键。下面总结的7项秘诀，会让你的网页脱颖而出的。
定制化，或者说个性化，是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验，无论是玩页游还是购物。
看看世界上最著名的那些网站是怎么做的吧。Amazon 为用户提供基于购买历史的产品推荐，Netflix 则会推荐相关的作品、有待观看的下一部，并且基于用户 Twitter 上的内容来进行推荐。
每一个微小的自定义设计，都能让用户感觉这些用户体验设计是为他们而做的。同时，这种设计也会给用户一种参与感和沟通的体验，从而加深用户的忠诚度。如此一来，用户会更好地融入整个网站的用户群或者社区。
2、简练的动效
另外一个大热的流行趋势，就是动效设计。它不仅能为用户带来惊喜，而且具备强大的引导性。
动效设计的精髓在于简单。令人头晕或者不知所措的动效，应该不是你要的东西吧？动效应该是有目的性的，和其他所有的设计元素一样，有针对性，达成目标是它存在的意义。
对动效或者说动画最熟悉的，无疑是迪士尼。Frank Thomas 的《生命的错觉：迪士尼动画》中，就详细总结了创造今天动画的12个原则：
·挤压和拉伸·预期·登台·连续动作和姿态对应·缓进缓出·弧形运动·次要动作·时序·夸张·立体刻画·吸引力
3、使用约定俗成的设计模式
对于常见的问题，设计模式就是可靠且可复用的解决方案。简而言之，最常见的信息和交互方式被整合到一个界面当中，比如点击按钮，滚动页面，滑动解锁，它们都是设计师模式。
你需要熟悉这些常见的设计模式，并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求，也是易用性的最基本构成。
同时你也要在自己的设计中创造设计模式，在不同的页面中使用相同、相似或者规则化的设计，让用户习惯。比如，不同页面中的CTA按钮的色彩保持一致，卡片式的元素使用相同的样式，等等等等。
4、给设计以性格
没人会喜欢单调无聊的设计。你的网站应当同你的品牌保持一致的性格，拥有独特的气息。
要做到这一点，通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做，可以看看MailChimp 是怎么做的。（请注意他们的文本和图片是如何无缝地连接到一起的）
5、在屏幕内思考
用户同网站交互都是在屏幕内进行的，无论是桌面端还是移动端，整个体验都是围绕着屏幕进行的。
这并不是一句废话。屏幕是一个区域，它界定范畴，赋予概念，创造隐喻。这也解释了为什么视差滚动和卡片式界面是如此的流行。这两种概念将一定量的信息合理地放置到屏幕这个容器中，让用户随之同下一个元素进行互动。
如何运用好这个概念其实并不是那么容易。一个屏幕内应当承载多少信息，需要仔细考虑。一个桌面端页面所能承载的信息量在移动端屏幕上，可能需要划分到几个页面当中去。
从屏幕的角度来考虑问题，可能会让你的计划更加庞大复杂，但是这种考量是有价值的，这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。
6、一体化的内容和交互
视频、游戏、测试都争取让用户能与之进行互动，这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多，用户所获得的体验就越好。
不过，有趣的元素能让这一切截然不同。
让交互内容尽量简单，不要牵扯太多，让用户可以一目了然，让他们轻松获得反馈的信息，不用在冗杂的体验中沦陷。这其实和美剧的5分钟原则有着异曲同工之妙。
7、轻松有序的设计
最后一个秘诀并非不重要，它甚至可以说是最基础的原则：让你的设计保持干净、整洁和有序。使用栅格可以让每一个页面元素都有准确的位置。将响应式设计落实到每一个元素，能让页面能从一个设备兼容到另一个设备。
简约风和极简风能成为设计趋势是有道理的。用户可以更轻松理解这一切。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作，赋予更好的体验。
苹果的官方App Store 和Google Play 都推荐过的游戏 Two Dots 就是个典型案例。谁都可以拿起手机毫无障碍地开始玩儿，它设计简单干净，容易互动，视觉元素周围有足够的空间，无需担心误触。同时，其他游戏所具备的东西它也有——有趣好玩，可以共享得分，能分享到社交媒体。
界定一个网站的体验与否有的时候并不是单一的标准，而今天所推荐的7条秘诀本身也更接近于基本的Guideline，了解用户，熟悉趋势才能提供优秀的体验。不管学什么专业都必须搞清楚学习的目的是什么，我们学习UI设计的，并不是只需要设计出作品就好了，还要去了解产品思维，，我们的设计作品就是我们产品最直接的体现，UI设计除了需要注重设计水平以外，更多的需要了解用户心理，揣摩用户为什么会喜欢我们的产品，再通过我们的专业设计技能和设计知识体现到我们的作品中，为了更加全面的掌握ui设计的技能和知识，我们需要接受专业系统的培训。如今国内知名的UI设计培训基地CGWANG教育已有开设不同培训时长的UI设计培训班，充分满足不同水平的UI设计师能力提升的需要。
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点UI设计思路_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
UI设计思路
你可能喜欢您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
UI设计主题设计思路.pdf 8页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
UI设计主题设计思路.pdf
你可能关注的文档：
··········
··········
主题设计对初学者更具挑战，既需要辨析度，又考虑创意
整套主题还有一致的统一性，跟着几点小思路来练习一下！
课件中的部分资料来源-小米主题商城
完整内容总结在微信公众号：qduckcn 回复“图标”
转载请注明来源：趣达学院
公开课视频下载： http://pan.baidu.com/s/1skWHss9
什么是主题？
手机上的主题
手机用户可以通过下载某个手机主题程序可以一次性设定好手机系统界面、包括
锁屏、背景、屏保、图标等，实现手机界面的个性化
手机主题元素
主题图标要点：统一
保持图标的一致性，可以使图标的主题感觉更明显更强烈。
一致性可以表现在以下几方面：风格、元素、色彩、形状、光源、质材。
风格：拟物，微拟物，扁平，手绘，写实，选取好一种表现手法后一直延用下去
来自网络、小米主题商城—2016，加速度
手机主题元素
主题图标要点：统一
元素：增加相同的元素，使图标有更明显的一致特征。
如《星空》图标主题中，把小圆点作为每一个图标的必有元素，强调特征的统一
如《蓝调》图标主题中，增加相同的底板，把并不特别相似的图标增加相似性
手机主题元素
主题图标要点：统一
色彩：单色搭配，重复使用同样的颜色搭配；多种颜色搭配，采用相同范围内的饱和度与明度
形状：统一背板形状，圆形，方形，圆角矩形等
光源：统一光源方向，使图标的高光、反光、投影的方向统一
质材：图标质感统一，使用一样的质材制作图标，例如：哑光、镜面、木质、金属、岩石、植物、纸张
来自小米主题商城——MIUI 7-女生版、下雪的冬天、忘不了的是曾经
手机主题元素
主题图标要点：创意
在一味地追求统一的同时，会导致图标的辨识度降低，使同系列的图标之间不能很好地???分，所以在适当
的时候，改变一些特征，增加一些创意的表现，降低某个设计要素的统一度，增加图标之间的辨识率
在有丰富的创意的前提下，规范都只是参考，不要被规范束缚我们的想法与想象
来自小米主题商城——轮回、Emerald、应用商店100亿专属纪念
上一篇：图标设计
下一篇：切图标注
微信公众号：qduckcn
回复“图标”
即可得到上一篇 公开课笔记 《手机图标设计模板运用技巧》
回复“切图”
即可得到下一篇公开课笔记 《切图标注-为什么说UI设计师有一把手术刀？》
回复“交互公开课”
即可得到另外一门《交互设计轻松学系列教程》
想学更多关于UI/UE的知识，记得留言哦！
正在加载中，请稍后...优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 7 分钟
编者按：制作UI 设计规范的大体思路应该是怎样的？制作规范时容易遇到哪些瓶颈？今天这篇好文是华为设计师总结的经验，帮你一次性搞定这两个问题！
2016已经接近尾声，上两天刚参加完比赛，利用这几天空闲时间，把最近沉淀下来的东西分享出来。
上个月团队几个小组进行友谊比赛，命题是“邮件”。规定大家以产品思维去设计一款全新的产品，形式不限。很难得的是所有人都参加了产品设计的每一个环节。我们秉着发现问题、解决问题的态度开始了这次友谊比赛。
通过不停的尝试与否定后，我们锁定目标人群为威客群体，针对威客群体接私单的特定场景，通过用户问卷、访谈、旅程图，最后得到以下几个痛点：
来回寄合同，费钱费力费时间
执行沟通的过程中经常改需求
合同的拟定，需要在网上找模板
对于新客户，不了解，不能完全信任
可能会逃单、违约
针对这几个痛点，我们的解决方案是：
增加发送合同邮件，双方直接签约，无纸化
通过邮件沟通，后期作为凭证
平台提供各种合同模板
增加个人资料、信息（个人、公司网址）添加评价系统
定金冻结功能
最后我们的产品定位是：威客人群的无纸化沟通签约工具。
通过这次尝试，大家都参与了所有流程——信息收集、竞品分析、确定目标人群、场景梳理、用户旅程图、寻找痛点和机会点、信息架构、交互稿、视觉稿。这对于我们每一个人都有很大的帮助。
所以我决定乘胜追击，把设计规范也做出一份，但由于是概念稿，所以规范做的不算全面，每个产品也有各自的规范思路和维度，没有绝对的对与错，这里只是提供一个大体方向，疏漏之处，希望给予批评指正。
至于为什么叫“核桃”，有三个维度的寓意：
1.与合同谐音，首字母都是HT
2.威客就是用智慧在互联网上赚钱的人，而核桃补脑，形状又像大脑，所以寓意恰巧吻合。
3.核桃的外壳是坚硬的，给人一种受保护的安全感，而邮件、合同也正是如此。
界面设计：林佳娜、蔡鑫
logo设计：苏桂
交互设计：李祖松、丁明艳、蔡鑫
规范设计：蔡鑫
上面是给大家提供一个制作UI设计规范的大体思路，现在准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么！
适读人群：想进阶的初级UI设计师、有追求的初级交互设计师。
前期做规范的过程是十分痛苦的，每做一个板块都要花很多时间去思考怎么表达、展示才能让其他设计师和程序员都一目了，然而随着内容的增加，发现很多地方无法深入的执行下去，只能含糊其辞，给我们制作规范的人员带来了很大苦恼。
为什么有如此大的执行阻碍呢？带着问题我们找到团队的一位设计前辈请教了一番，在前辈的指点下，终于发现了问题所在：我们对于前端如何实现设计稿其实并没有很好的了解。
大家要明白，如果你没有彻底了解你做的界面，那么做规范就会十分艰难，因为你只是做了表层的视觉设计，换句话来说就是你根本不明白界面是怎么用代码实现出来的。我就是因为遇到了这样的问题，所以在做规范的时候，经常无从下手。
了解原因之后，我们决定如果后期再发生执行困难的情况，我们就会向设计前辈或者前端程序员咨询一些简单的实现方法，慢慢了解他们的思维模式，让设计执行变得越来越顺畅。
其实遇到困惑的地方还是蛮多的，这里就拿二级导航来举例，希望大家能举一反三，多多思考与实践。
图1-1是XX项目的所有关于二级导航的样式，因为这一块的界面不是我做的（都是借口），所以规范不太了解，导致在做整个项目的规范时，遇到了极大的阻碍。
最初看这几个二级导航时，我的第一感觉是4个样式遵循相同规则：整条导航栏平均N等分后，文字在每个等分区域内居中，但是仔细查看间距后发现只有2、3的样式遵循这样的规律，1和4并不遵循，那1和4的样式到底是什么呢？
导航1，如下图
标明颜色后，我们可以清晰看出，原来这个导航是平均分成了3等分（红绿蓝），只不过将绿色分割成两半放在左右两边，这样我们就可以根据整条导航的长度计算出每块区域的长度，不论是开发还是设计师都可以一目了然并且明白其中的设计规则。
导航4，如下图
首先我们先来认识一个单词：auto（自动的意思），就是指数值可以变化、不固定。
再来看这个导航样式，在程序员眼中这个导航其实是由两个容器组成的，一个容器是：绿色区域+红色区域+蓝色区域，另一个容器是：黄色区域（不可滑动，大小固定）。
而第一个容器内的绿色和蓝色部分（间距）也是固定的，所以只有红色区域是可变化的，因为红色区域的文字个数是可以变化的，我们只要给出字体大小即可。
所以对于导航4的规范，我们要给出绿色、蓝色、黄色区域的宽度；文字（选中、未选中）的大小及颜色；黄色区域内图标的大小、间距以及滑动规则就基本可以高度还原出视觉稿的样式了。
了解了这些前端知识之后，我们发现再次制做二级导航的规范时，过程顺畅很多。
先来总结一下当设计师拥有一定开发思维后的好处有哪些？
1.减少与开发哥哥不必要的沟通，推进工作的顺利进行。
2.对于设计师自身管理设计文件、规范化作图、规范的制定、页面标注都有极大的帮助。
3.避免设计很多无法落地的设计方案，省时省力，提高工作效率。
任何事情都有其内在的套路与规律，我们必须要了解事物的本质，才能帮助我们更好的执行；所有的苦恼与迷茫都是源自你对事物的理解不够透彻，所以让我们从现在开始，锻炼透过事物看本质的思维能力，就算以后你不做设计了，这种能力也可以伴随着你，让你受益终身！
欢迎关注作者的微信公众号：菜心设计铺
「如何看懂iOS 10 的设计规范指南」
看趋势变化丨
看交互启示丨
看使用方法丨
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量180万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
回答1000+问题后，我总结了这7个讨人喜欢的设计师提问姿势
编者按：很多同学喜欢向设计高手提问，但却一直没得到回复。不是大牛太高冷，可能是你的提问姿势不对。来看回答过1000+设计师问题的@TTTing1 总...
如何提高UI设计的速度？在这里分享一些我观察到的常见问题和改善方式。当然，需要注意的地方何其多，本文先着重聊一下观念和沟通的部分。 作者介绍 Taylor ...UI和交互设计中常常会强调某项设计需要足够的“直觉性”，但是直觉性的设计说来容易，实现却往往差强人意。但是不得不承认，它是目前交互和UI设计的刚需。 仔细想...Jorri（译者）：618、双 11……有朋友说，买买买是 Ta 认识世界的方式。现在无论是电子产品还是生鲜食品，你都能上网买。为了让你在小小的手机屏幕上找...编者按：这两天有一款动效神器Hype 3特别受欢迎，借这股动效的劲头，今天胡痴儿（腾讯用户体验设计师）给同学们科普一下动效的类型 &&& ...习惯了一栏式的设计，将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息，是分屏式设计的最典型特征，两边的信息可以包含相同类型的元素...@小魔女HOHO ：UXD是最近很火的一个词，我也总是在想怎么做才能把自己在交互用研上积累的一些知识融汇贯通到视觉设计领域。尝试着做了一些摸索，很乐意把这些...编者按：今天这篇可读性非常高，针对当下几种被严重滥用的UI设计，汉堡菜单、手势操作、引导页、空白页等，仔细分析了它们的缺点，也给出了正确的使用姿势。既是干货...编者按：今天这组Apple Watch展示模板，角度全面，格式丰富（Sketch、PSD都有），而且还有多个完整的GUI资源，质量特别高的已打包微盘，别放过...@Daidai丶呆 ：本篇文章写写近期看到的比较有趣的话题，「一款好产品，所需具备的条件」。 产品角度 早前有看到张小龙说 ：一个产品只能有一个主线功能。 ...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里UI设计的常见思路和趋势UI设计的常见思路和趋势墨指含香百家号每一年设计行业都会涌现一些新的趋势，进入新年，我们会发现UI设计行业在体验设计上出现了很多新的元素，尽管你可能叫不出它的名字，但你会慢慢开始接受这些新变化，并且逐步应用到我们的产品中。今天浙江优就业的小U老师就为大家说一说有哪些常用的例子吧。一、微交互围绕特定的用例，通过微妙细小的动效或者交互强化它的视觉效果，通常能达到意想不到的效果，同时还能让用户感受到设计者的用心。这些微交互能够作为信号提示，来提醒用户动作和任务的完成，简单而且自然，有的有趣的效果还会引发用户多次观看。即刻点击其中一条没有链接的内容，如果没有跳转，该条内容会左右晃动，顶部会出现提示的文案条，给人的感觉非常自然;豆瓣查看大图，按住图片移动的时候会显示背景，可以任意滑动，松开的时候就返回到小图模式，交互感非常强;Uber点击查看司机信息的时候，地点信息会隐藏，司机照片和汽车信息会分开展示，查看完又会收起来，界面使用效率很高。二、图文结合现在随意打开一个App，只要涉及到图片排版，设计师们都更喜欢用图文结合来呈现，简单，节省空间，文字和图片配合相得益彰，文字的叠加填补了图片在画面层次上的空白，同时也让界面更丰富。三、用空间来间隔之前设计师们习惯通过线条和分隔符来进行划分内容区块，拥挤且不整齐。而通过空白空间来划分区块能，让界面更加通透、干净。通过空间间隔来划分区块是一种非干扰性的设计，使得用户专注于功能，而且拥有更加清晰的层级划分和更优的易用性，更匹配时下流行的风格和设计的需求。例如Pinterest，在最新的一次改版中直接把卡片的背景去掉了，这个做法非常大胆，但是效果非常好，整体图片内容更加清晰、通透。同样还是uni，一般我们会设置背景为灰色，来区分不同模块，这样可以更突出内容。新的设计直接把灰色背景去掉，同时加强了模块的标题，通过间距来划分模块，整体更加统一，简洁，界面的整体感也随之变强。四、双色调扁平化设计占据主流的时候，渐变的设计手法就很少出现了，但是看最近的一些作品，发现渐变色被设计师们重新启用了，渐变色设计有很多好处，设计师们可以调节过度使用的图像和元素，为画面添加有趣的元素。其次就是双色调的使用，双色渐变是渐变设计中很重要的组成部分，它比同类色渐变的视觉效果更多突出，可以让页面层次感更丰富，突出页面更加重要、关键的元素。五、模糊背景模糊背景和iOS毛玻璃效果非常的相似，也符合时下流行的扁平化和现代风的设计，设计效果十分的赏心悦目，可以很好的和幽灵按钮以及时下流行的元素搭配起来，提升用户体验。我们以淘宝电影为例，采用的是虚化该电影海报作为背景，这样的话每一个页面的头部效果都不一样，视觉效果更佳，也更个性。六、大字体随着手机屏幕越来越大，各App的字体也越来越大，大字体在移动端上呈现，会赋予界面以层次，提高特定元素的视觉重量，给用户眼前一亮的感觉。而且现在的界面设计趋势更有杂志风的方向，大字体，模块化，用图片替代色块作为背景。其次字体够大，够优雅，够独特，同时也能提升页面的气质和特色，不一定满足功能，但是足够好看，这对很多app提升用户粘性也是一个不错的新方向。以蘑菇街为例子，文章详情页原来的标题和正文字体分别是36px和28px，改动后的大小分别是56px和34px，整体页面的信息密度虽然降低了，但是字体变大使得用户的阅读效率有所提高。七、彩色投影的流行自从Google的发起的长投影慢慢从人们的视野中淡出后，近期又兴起了一种新的投影方式—彩色投影，投影的颜色会随着整体背景的色系而改变，这样的好处是可以把投影融进整体的画面中，同时也可以让界面更突出和饱满。设计的流行趋势总是在变化轮回， 扁平化潮流的兴起，表达质感拟物的元素退出历史舞台，如今代表空间感的彩色投影又回来了，它和扁平设计的相结合，在视觉上给人带来一种别开生面的感觉。八、为空页面趣味化近些年，为空页面的设计越来越受到设计师的重视，它变的更富趣味性，色彩也更加丰富了。我们可以看到，设计师们正在想办法，尽可能的让App的每一个维度都变的更有趣。像蘑菇街产品，把原来以图标形式为主的空白页面调整成趣味性的插画，这样页面即使在没有内容的情况下也是饱满的，对用户来说也更加友好。趋势的展开往往都是从大开公司开始，顶级互联网公司的产品拥有庞大的用户群，这样更容易向用户普及和推广，从而推动整个行业的推陈出新。趋势的变化很快，今年所流行的可能明年就已经消退了，但是趋势的大方向是相对稳定的。本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。墨指含香百家号最近更新：简介:故事我有，带着故事，带着心情，一起飞翔作者最新文章相关文章