IT产品原型与UI设计之二

news/2024/11/24 12:12:36/

1. 产品原型设计

原型设计是产品经理的工作。

原型图追求的是快速的开发和低保真的实现,重要的是页面之间的逻辑,页面的信息框架,和页面承载的功能(状态)和模块。比如说,这个页面需要搜索功能吗,搜索页面需要历史纪录,还是热门搜索标签;这个页面的键盘是默认弹出,还是点击输入框弹出。

而UI设计师就需要从视觉的角度考虑如何美观有效的呈现页面内的功能信息和页面间的逻辑。他们可能需要从对比,留白,视觉层级等方面提升页面的美感和清晰。

2. Axure

Axure是原型设计常用的工具之一。不熟悉的可以去花瓣临摹几个App、Web交互原型,多临摹几个,就能立刻上手了。Axure很简单很容易学,但“交互设计”不是那么简单的,需要画很多时间和精力去学习去钻研。

第一,不要去做高保真原型。

第二,不要子页面套子页面,直接用文件夹,目录清楚规范统一。

第三,不要去设计点击交互,所有的页面内容都在左侧展示,一目发然。(不需要做太多花哨的互交)

第四,不要在一个文件里设计多个页面,这样研发团队无法直观估算工作量

第五,正确标注

第六,不要用假数据制作原型

第七,注意排版和间距,字体大小等,不要认为这是UI做的事情

第八,万能的矩形能解决很多问题

第九,原型就是黑白灰三色,不需要加其他的颜色

第十,对齐很重要

第十一,正确的给页面命名,列表页,详情页,首页等

第十二,善于母版

不要需要刻意去学Axure,能规范清晰的表达出来原型设计理念就够了。

常用操作:

1. 下载元件库,可帮忙快速开发。

2. 锁定元件(选中希望的所有元件,右击,锁定)

3. 元件对齐;顶层与返回(图层上下关系)

4. 母版(选中所有希望元件,右击,创建母版)

5. 使用母版(在页面中将母版拉入即可)

6. 发布生成html文件 (public to axure cloud)

3. XD与Sketch

XD,是一款轻便的矢量+原型工具,集线框图设计,视觉设计 , 交互设计, 原型设计 等功能于一体,你可以使用它轻松搞定用户体验设计。XD适用于mac和windows两个平台。

Sketch,只要功能同XD,只适用于mac,XD出现前Sketch是一哥的存在。

Adobe XD共分为两大功能部分,Design(界面原型设计)与Prototype(界面关联与交互)两个部分,刚刚说到的工具是属于Design功能的,而Prototype的使用是与Axure完全不同的。

Axure的交互操作也并非不舒服,但是它缺少了更具互动性质的可视化操作。在Adobe XD中,只是将需要交互的两端拉上一条线就可以完成的操作,Axure上却是更多的操作步骤与繁杂的选项按钮。

我属于那种特别偏重于视觉性与操作性的人,所以如果时间允许我基本都是绘制高保真原型的,所以对于Axure本就为了方便使用而产出的事物却没有为我带来应有的便捷,那么我也只好做出了更优的选择。Axure的价值在于它如同“随手涂鸦”般的绘制体验,而这种体验在我看来更适合去绘制简单的或是低保真的线框图,Adobe XD则是一个中等偏高保真级别的原型首选软件。

常用操作:

1. XD 打开之后,主面板上有两个tab,设计与原型。设计是所有页面做设计的地方,当所有的设计完成之后就可以在原型面板那里做互交设计。

2. 画板。 新建一个画板就是新建一个页面。点击画板上方的名字可以选中整个画板。ctl + d 复制整个画板。

 

4. 位图与矢量图

矢量图可以无限放大而不失真,位图放大到一定程度之后就会越来越模糊。

矢量图在保存图形时,实际保存的是一些可以用来生成相同图形的坐标、函数、向量等信息,这些信息的背后都是一些数学原理。因为矢量图的背后都是数学算法和模型,所以呈现出来的画面总是有一定规律可循的,尽管我们不能一眼看透它背后的规律,但就是这样一种规律会给我们一种人造的、不真实的感觉。

位图是由一个个像素点构成的。这样的保存方式就导致了一个问题,当图像的分辨率较高时,文件体积会变得特别庞大,保存几百个点、几千万个点可不是什么好玩的事情,所以这就催生出了各种压缩图像的方法。另一个问题就是大家所熟知的,一张图像的分辨率是固定的,当我们想要查看图像的细节,而这个细节的精度已经超出图像分辨率所能表示的范围时,我们就只能看到万恶的马赛克了。

所以,当我们需要一张有规律可循、中规中矩的图时,矢量图就是最好的选择。这方面的例子有很多,比如软件的图标。对于软件的图标来说,我们就是需要简单明快的配色,有数学理论支撑的漂亮曲线,让人一眼就能认出来,那我们无疑应该选用矢量图进行绘画。而当我们想要更多的细节、更加原汁原味的真实时,我们就应该选用图像,比如一个新闻记者,他肯定更愿意要一张高清彩色照片,而不是画家画的现场写生。至于海报,则要视具体的内容而定。事实上大部分情况下我们使用PS是因为我们已经有了一定的素材,需要使用其中的图像处理功能。如果是凭空作画,那么AI的矢量图形则是更好的选择。

5. AI 与 PS

Adobe illustrator,常被称为“AI”,是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。作为一款非常好的矢量图形处理工具,该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,比如手机APP、网页设计的布局排版、按钮、图标等矢量元素。

ps通常被认为是一个图像编辑软件,是一个以处理栅格图片为主的像素图处理软件,适合用来做平面广告、插画或后期处理等。
 


http://www.ppmy.cn/news/284435.html

相关文章

Dart 规范

好的代码有一个非常重要的特点就是拥有好的风格。一致的命名、一致的顺序、以及一致的格式让代码看起来是一样的。这非常有利于发挥我们视力系统强大的模式匹配能力。如果我们整个 Dart 生态系统中都使用统一的风格,那么这将让我们彼此之间更容易的互相学习和互相贡…

如何通过桥接模式重构代码?

文章目录 什么是桥接模式?UML结构图通用代码实现适用场景案例场景分析⽤⼀坨坨代码实现桥接模式重构代码代码实现⽀付类型桥接抽象类⽀付类型的实现定义⽀付模式接⼝测试 总结 同类的业务、同样的功能,怎么就你能写出来那么多if else。 很多时候你写出来…

无线可编程、兼具多功能的鼠标如何选?这里有你需要的答案

说到鼠标和键盘,不管是宅家也好、工作或游戏也好,各种人群都离不开电脑,而鼠标做为其中使用最频繁的数码外设,如果选择不精准,就会给使用带来很闹心的烦恼。 就拿上图这几种先锋使用过的鼠标来说,有超薄的、…

无线鼠标分类

为了节约X201上的USB接口,我在一家小电脑公司购买了雷柏6000蓝牙鼠标,入门级的蓝光蓝牙鼠标,105元成交,比网上贵了20元。送货员送来时,我当时手头边只有X32本本支持蓝牙,结果死活用不上,估计是本…

CSP-S 第一轮笔试重点题

CSP-S提高组笔试题重点题汇总: 今天我给大家分享一些 CSP-S 第一轮笔试中的一些重点题,包含讲解。 第一题: 1.十进制小数13.375对应的二进制数是()。 A.1101.011 B.1011.011 C.1101.101 D.1010.01 解析&#x…

cassandra如何进行反规范化设计?

Cassandra 是一个分布式、高可扩展性的 NoSQL 数据库,它采用了反规范化设计以支持快速查询和高吞吐量。反规范化是指在数据模型设计中将重复数据复制到不同的表中,以减少查询时的数据访问和联接操作。 以下是一个示例,说明如何在 Cassandra …

前后端交互四、跨域与JSONP

零、文章目录 前后端交互四、跨域与JSONP 1、同源策略和跨域 (1)同源 如果两个页面URL的协议,域名和端口都相同,则两个页面具有相同的源。 例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测&…

安装OpenResty

安装OpenResty 1.安装 首先你的Linux虚拟机必须联网 1)安装开发库 首先要安装OpenResty的依赖开发库,执行命令: yum install -y pcre-devel openssl-devel gcc --skip-broken2)安装OpenResty仓库 你可以在你的 CentOS 系统中…