标签:adobexd

Daily UI 007 Setting 实作分享(二)

今天换分享第二个 Artboard ,这一页是做 personal information 的细项设定。 上面的 setting 部分一样保留复制过,细项的设定也做分类,所以先打上分类的大标,这边是基本资讯的部分,字一样用蓝色区分。 那可以思考一下基本资讯会有什么内容,也可以参考其他的 App 或是网站,把整理出来需要的资讯打上来。 接着也把其他类别的资讯和 […]

Daily UI 007 Setting 实作分享(一)

这次的 Setting 是延续上一次的 User Profile做的设定,风格跟用色会统一跟 User Profile 一样,针对 User Profile 的设定页面。 第一个 Artboard 上面先放上底部色块上面加上 Settings 让使用者到自己在什么页面,还有左边的返回键和右边的汉堡选单,模拟一下App 该会有的按键。 因为是个人帐号的设定页, […]

DAY 18-Daily UI 002 Checkout 实作分享 (Prototype)( 二 )

转场到场景2后,要模拟打资料后的样子,那模拟的页面都已经有另外做好了,点击订购人的填写框会转场到已经填写好资料的页面。 点一下旁边会让键盘退下去,那这边就选择订购资料的底框,添加触发“单击”,添加交互动作“移动”,属性区图层选择键盘图层,座标的部分可以先复制一个键盘,将他移出画面外,就可以知道移出画面外的座标是多少,复制他的Y轴座标数值,贴回刚刚移动属性区的 […]

DAY 17-Daily UI 002 Checkout 实作分享 (Prototype)( 一 )

上一篇已经介绍怎么新增场景,今天就来分享实际操作的过程。 基本上就是对一个物件设定触发指令,触发动作如下图,有基本的手势性单击、双击等,还有其他条件性触发、鼠标、硬件键盘、输入和传感触发。 再添加设定触发后会有什么交互动作,如下图,选择不同的触发指令后,能设定的交互动作也会有些微不同。 那就直接进入实作吧!第一个购物车的场景是模拟使用者己经选好要购买的商品, […]

DAY 16-ProtoPie 工具及场景介绍

上一篇已经导入文件了,那这边先来介绍介面的部分。 1.物件工具区 可以新增多种物件的工具,有图片工具、视频工具、图形工具、文本工具、容器层工具。 2.场景区 可以设定场景格式尺寸,切换、新增场景 3.测试区 第一个触发工具可以新增触发指令,预览窗及播放工具可以预览演示模型,设备工具会有QRcode可以用手机扫描在手机会平板预览,云端工具是可以浏览ProtoP […]

DAY 15-ProtoPie 软件介绍和文件导入

今天要介绍的软件是 ProtoPie,他最初就是以 “ 打造设计师可轻松上手的工具”为目标,是目前唯一支持无代码调用感应器并制作跨平台互动的原型工具,可支援 Mac、Windows、IOS和Android。 ProtoPie 是付费软件,有15天的试用期,注册帐号还可以再延长10天,到官网可以直接下载免费试用版。 安装好打开应用程序会看到下面的页面,中间有五 […]

DAY 14-Daily UI 002 Checkout 实作分享(四)

这一篇会把剩下的 Artboard 做完,上篇的 VISA 完成了,今天继续做 PayPal 的部分。用昨天的 Artboard 直接复制一样的一个,滑鼠按着 Artboard,再按 option / Alt 就可以直接拖移出一个一样的 Artboard。 那 PayPal 付款方式的部分也有参考网路上其他网页或是 App 的设计,让使用者在付款时有比较习惯 […]

DAY 13-Daily UI 002 Checkout 实作分享(三)

上一篇已经完成前两个Artboard,这一篇会继续做下一个Artboard的分享。 这个Artboard是想要设计成点开付款方式的VISA会变大展开成一张VISA卡的样子,上面有栏位让使用者填写付款资讯,让使用者有真的在使用VISA卡付款的感觉。那我们一样开一个新的Artboard,把需要的物件都复制过去,因为VISA会变大张,所以先拉一个框表示VISA卡的 […]

DAY 12-Daily UI 002 Checkout 实作分享(二)

昨天做完第一个Artboard购物车的页面,今天要继续分享第二个Artboard结帐页面的设计了。 新增一个Artboard,把也会出现在第二个Artboard的物件从第一个Artboard复制过去。 那这个Artboard主要是要让数用者填写订购人资料和付款资料,所以要注意一下需要放什么资讯和填写栏位等等,是输入文字的栏位还是下拉式选单都要标示上去。 接着 […]

DAY 11-Daily UI 002 Checkout 实作分享(一)

今天终于要换到下一个作品了,这次要介绍的作品是Daily UI 002 的Checkout,先给大家看一下,这次的购物页面会做五个页面,还会模拟购买的过程,这次作品的prototype会使用ProtoPie这个软件制作,后面会再分享。 前几篇已经把基本的工具和操作都介绍的差不多了,所以这次会比较快的介绍过去,一样想好架构,打开Adobe XD新开一个文件,这 […]