网站设计制作UI需要做什么?

来源：蜘蛛抓取(WebSpider) 时间：2016-09-13 22:01 标签： 网站设计ui
小编：做什么事之前，我们大概得理清思绪，那么就有了流程图这货。可是流程，流程，也分工作流程，分工流程，时间流程。可是什么样的流程适合设计师拥有，哪些是需要出现在流程图中的内容呐？
一、什么是设计流程图？
1. 什么不是设计流程图？
　　以下是百度百科关于流程图的定义：
　　以特定的图形符号加上说明，表示算法的图，称为流程图或框图。流程图是流经一个系统的信息流、观点流或部件流的图形代表。在企业中，流程图主要用来说明某一过程。这种过程既可以是生产线上的工艺流程，也可以是完成一项任务必需的管理过程。
　　我把见过的流程图大致归纳成两类。
一类是表示算法或内部逻辑的，像这张图：
　　可以看出来这种流程图是描述算法逻辑，或者可以理解成物体的底层的运作逻辑。它的特征是底层，复杂。但它不是设计流程图。
　　一类是表示业务或工作流程的，像这两张图：
　　业务流更常见于一些办事流程、服务过程，里面有各个不同的单位、人、物品参与其中，它的特征是宽泛，简单。但它不是设计流程图。
2. 流程图的基本构成。
　　从上面几张图可以看到，流程图由特定的图形构成，但具体的样子由图本身的目的和阅读者的阅读习惯（或约定）来决定，所以使用的图形并不是固定的，比如有人用圆形表示开端和结束，有人则用圆角矩形，有人有云团表示其他流程的引用，有人用矩形加文字来表示，形式不重要，达到描述的效果而阅读者能读懂才是最重要。设计流程图也遵循这个原理。
3 设计流程图。
　　设计流程图长得并不特别，跟全世界流程图都差不多，也同样是作为一种表达工具存在。区别只在于描述的对象和组成的内容不一样。设计流程图的一大重点是面向表现层，也就是说，描述的是界面（或叫屏幕）的变化，是用户看到的界面的行为流。什么行为呢，界面之间的跳转逻辑，也就是导航逻辑。
　　导航是信息架构的一部分（教科书把信息架构划分为组织、导航、标签、搜索四个系统），当然是交互设计的重要一环，导航的设计思路就能用流程图表达出来（或者也可以说用流程图来辅助设计吧），这也是个人觉得设计流程图的最重要运用。看下图：
　　从图中可以看出构成：
　　a 界面。
　　一个矩形代表一个界面，这个流程中用户走过两个界面（登录页和首页），因为表达的是界面的跳转，界面是用户实实在在接触到的媒介，非界面的内容，不要出现。
　　b 动作。
　　矩形之间也就是界面之间加上一个触发动作，比如从界面A点击下一步按钮，到达界面B，“点击下一步”就是连接这两个界面的关键动作，需要标示出来，上图例子就是“单击提交按钮”。
　　c 条件。
　　一个动作之后可能有多种“是/否”的结果，则在矩形之间、动作之后加上一个或多个判断菱形。如上图的检验账号密码是否输入正确。
二、注意什么?
1 坚持表达表现层。
　　不要一个流程图里面，又有内部算法逻辑，又有界面逻辑，下图标红的矩形就是多余的，这个不关用户的事情，会扰乱你的导航设计思路：
　　不要把步骤和界面本身都用矩形表示，比如下图标红的矩形（况且你还不知道用户填写的顺序呢，我先填密码不行啊）：
2. 抛弃系统错误。
　　什么是系统错误呢，也就是非用户犯的错误，比如登录的时候服务器当了，网络连接错误等导致登录失败。除非你特别想强调系统错误后的提示界面，否则建议不要加进去流程图里面，因为每一步操作都可能错误，你的流程图会因此变得很庞大。如下图：
3. 形式可以很灵活。
a 如果一个界面可以通往多个界面，而你又真要描述出这些跳转，那就一个矩形长出多条线路，对应标示上对应的动作就ok了。如图：
b 如果几个界面属于同一逻辑，比如实际是一个界面的几个tab，则可以这样把几个tab包起来：
c 如果你想把一些警告窗口等临时窗口表达出来，也可以自定义一些图形，比如：
d 更详细一点，如果你想把一个界面的主要内容表达出来，也可以如下图（还可以细分里面的内容究竟是信息还是下个界面的入口）：
三、没法做到的和延伸的。
　　这种流程图对交互流程表达也不是万能的，它不适用于同界面的局部交互，比如一些工具类产品，由始至终只有一个界面，像PS。又比如某些表单的各种提示，提示在同一界面的不同位置按某种规则出现，要表达这种规则只好使用算法流程图，但其实也片面，因为我们不知道用户的输入顺序。
　　除了导航逻辑，设计师还可以在其他时候使用流程图，比如做服务设计描述服务蓝图的时候，流程里有相关的人、场景、接触点、工具、所需资源、输出等等。如下图：
文章来源：
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【学UI网 原创文章 投稿邮箱：，也可以找各个群的管理】
你可能喜欢的：您的位置： >
上一篇： &&|&&下一篇：
本站特色栏目
本站素材专题
素材下载总排行榜
苏ICP备号 业务合作QQ： 素材群1： 群2:（满）群3：（满）群4：、、、、、、、、免费下载总站。网站设计：怎样设计合理的用户引导界面_站长圈_网页漂亮网
您的位置： >
网站设计：怎样设计合理的用户引导界面
字号：[ & & & & & &
移动网站与传统意义上的站点不同，由于手机或平板等移动设备的屏幕空间有限，即使是拥有5.7英寸屏幕的Galaxy
Note3也无法在一个屏幕内展现所有页面内容。因此，网站开发者就会尝试设计出各种各样将视图叠加的方法。但是叠加的视图必须由一个按钮或者收拾来触发才能显示，这时就需要一定的学习成本。那么如何让用户快速掌握使用方法，并充分体验到设计的好处，这种情况下用户引导界面设计的重要性就会体现出来。下面我们就列出了几种较为合理的用户引导界面。
1. 大段的文字介绍
一些移动站点和手机APP应用在界面无数据时会采取贴一长段文字来介绍页面的操作。从技术实现的角度来看，这样的设计是最容易的，但是用户体验却不理想。众所周知，用户在移动设备上几乎没有耐心去阅读长篇累牍的文章，这样就会造成大量用户的流失。因此，开发者可以在等待界面中以弹窗的形式，简明扼要的弹出一些文字说明，这样能够在保证通俗易懂的情况下，不浪费用户的时间。
2. 通过类似PageControl的空间将应用的新增功能及介绍展示给用户
很多手机应用都是采用这种方式作为用户引导界面，但是这种形式的用户引导界面也存在一定的不足之处。首先，在很多应用中，这种用户引导界面只会出现一次，当用户快速划过屏幕进入应用之后却发现不会操作，却发现无法回头查看。其次，在某些重要更新后，可能会添加了许多新功能，这时用户在浏览到后面的页面时，很容易忘记先前页面中的内容。因此，在这种模式下，用户需要花费一定的时间来学习之后才能使用。
3. 先期自动导入部分事例数据
一个很好的例子就是课程表管理软件iStudiez，这项应用先期可以导入很多开发者建立的课程，在完成数据导入后，日程看起来就不是一张空白的表格，就会让整个界面顿时美化了不少。尽管这样的设计能够很好地美化界面，但是在指引用户使用方面并没有发挥很大的作用。因此，严格来说，这类设计是一个很好的填充空白界面的方式。
4. 在特定界面的操作指导
与其他界面引导方式相比，这种引导方式的优势在于它需要在一定的特定情景下才会触发引导。当用户第一次进入一个全新界面时会弹出引导，这样就能让用户明确每一个界面按钮的意义。但是在设计这种引导方式时，要尽量避免强制引导用户操作。一些应用可能会强迫用户执行某些操作才能进入下一步，或者会重复出现某些提示，这时就不利于用户体验。
来源：赛易科技(http://www.saiyi.net/)
本文移动端链接：
相关阅读：
本站已经安全运行:
创建百年品牌

我要回帖

更多关于 网站设计ui 的文章

 

随机推荐