首页

UI设计改稿经验总结

博博


UI大课堂 2018-02-01 00:00:39

提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以后者为出发点进行讨论,其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方向。在工作项目中进行UI设计改版分为团队发起和自我发起,这个我们下一次一起来讨论。

UI设计师的自我提升来源于多方面的综合体现,工作项目中的实战经验、团队协作的互补学习、项目沉淀与反思、碎片化阅读的查漏补缺、业余时间的自我驱动、阅读带来的知识沉淀等等。如何充分利用自己的业余时间是被很多初入行业的设计师所忽略的,一晃三五年过去了,却发现自己找不到更多的作品用来丰富简历,很快便进入了瓶颈期。

面对未来的自己可能会出现这样的情况,我们一起提前探讨一下这个话题,以 UI设计改版为突破口展开我们的话题,希望带给即将入行和刚入行的设计伙伴儿一个新的方向。

目录

1、UI改版的目的,从不做无意义的事情;

2、制定时间规划,是为了治疗懒病;

3、如何挑选改版产品,再也不是选“美”了;

4、体验,这是你的第一次深度探寻;

5、功能梳理,理清流程好开工;

6、竞品分析,做好知己知彼;

7、素材采集,打开禁锢的思维;

8、体验,走了一圈才发现你可以更好;

9、交互设计,实现你心中的更好;

10、设计风格推导,符合产品的设计趋势运用;

11、界面设计,碎片化积累;

12、审核,寻找导师;

13、调整优化,不放过任何一个细节;

14、包装,整理设计思路;

15、分享,设计交流。

正文

1、UI改版的目的,从不做无意义的事情

工作中的项目参与对UI设计师的专业提升是非常重要的,由于很多公司都处于高速发展的阶段,项目的周期很紧张,都希望每个支援板块能够具备更高的效率,推进项目更快的完成迭代上线。在设计板块,很多成熟的平台也是愿意花费更高的福利待遇引进资深及以上级别的设计师支持项目的运转,那么设计师的进阶之路便是你在职场中稳中求进的关键。

在真实的场景中,有一部分设计师也存在着以下情况:

  • a. 项目参与度低,没有更多的机会发挥自己的专业;

  • b. 公司产品迭代缓慢或者视觉支持较小,空余时间较多;

  • c. 没有机会在项目中尝试一些新的设计语言;

  • d. 自学 UI 中,没有真实项目能够发挥;

  • e. 增强设计效率和产品设计思维等能力。

如果你拥有以上的情况之一,利用自己的业余时间进行 APP 设计改版将会给你带来更多的提升空间,不但可以通过练习增强自己的设计效率,也能体验更加丰富的产品设计。在改版中也能不断加强一些交互或者产品的思维,可以让你在以后的工作项目中不局限在视觉层面,具备更多的产品思考,做出更合理的设计。

UI设计改稿经验总结

2、制定时间规划,是为了治疗懒病

如果你想要改变现状,也拿出前所未有的热度值,那就趁热打铁吧,制定一份时间表是必须的,千万别忽略它的重要性,如果你不按照这个时间计划去推进,可能这个热度值将会被懒宝宝不断地熄灭^_^。

制定时间规划不仅可以合理的利用好自己的业余时间,也能更好的按照这个规划表去逐步的推进这次改版项目,把一个大的事项拆分为若干的小事项,每天推进一部分,一次改版设计很快就在不断的推进中被完成。

APP 改版时间规划表大家可根据自己的习惯设置,表格形式还是简单的文字记录都可以,进度把控需要结合自身情况而定,确保其有效性。

UI设计改稿经验总结

3、如何挑选改版产品,再也不是选“美”了

面对应用商城里面海量的 APP 产品,你是否有点不知所措,如果选择一个自己从来不玩的 APP,改版的时候对产品的服务模式、功能架构、交互逻辑等都是比较陌生的,需要一定的时间进行学习。如果选择一些大型的产品,由于其自身的设计团队就是非常的专业,你很难从中发现可以优化的点,即使勉强进行改版,也会发现自己设计得不如原版的好,进而打击自己的自信心。

通过上面的分析,我们在挑选改版产品的时候,需要结合自身的一些情况先做出一定的预判,然后再去挑选现阶段相对比较符合的产品进行改版练习。

a. 挑选自己接触过的直接产品或者间接产品;

b. 对 APP 里面所提供的产品或者服务比较认可或者没有一定的排斥感;

c. 挑选无论是视觉层面还是交互层面都有一定优化空间的产品,别轻易尝试精品;

d. 如果身边有朋友使用过的产品优先考虑,因为可以成为你调研数据的来源;

e. 选择阳光积极型的产品,不做传递负能量或者违反规定的产品;

f. 初次尝试 APP 改版设计,从轻量级的产品入手,可以控制练习时间和自己的驾驭度。

UI设计改稿经验总结

4、体验,这是你的第一次深度探寻

当你确定自己改版的 APP 对象以后,我们就开始做一次体验吧,这是你的第一次深度探寻。体验情况根据设计师对该产品的熟悉程度而定,你需要通过不断的进行操作把自己从小白用户升级到专家级用户。

这个过程需要你对产品有一个很深入的了解,不只是熟悉主流程操作逻辑,对一些偏冷门的功能操作也要非常的熟悉,如果是需要注册使用的产品,一定不要忽略注册会员以后的体验。最终达到的级别是你可以向身边任何一位朋友轻松的进行推荐和演说,能够通过你的讲解让他轻松地学会使用该产品。

UI设计改稿经验总结

5、功能梳理,理清流程好开工

当你对改版 APP 进行第一次深度体验之后,利用思维导图软件绘制出整个产品的功能结构图,思维导图软件种类很多,大家自行选择,我常用的是 MindNode。第一次进行功能梳理无需进行增删处理,真实还原产品现有功能即可,其目的是整理自家“仓库”,做到心中有数。

在进行功能梳理的时候,如果遇到操作复杂的功能需要备注信息,以便自己后期预览时能够快速理解其含义。如果是第一次做功能结构图越详细越好,这将有助于你充分理解每个功能传达的含义。

UI设计改稿经验总结

6、竞品分析,做好知己知彼

深度体验完改版 APP 之后,做了功能结构图,此时你对所需要改版的 APP 以及这个行业的产品都有一定的认知,此时你再去体验直接竞品和间接竞品必然是以一个专家级用户的水平去探寻。在体验过程中需要结合改版产品的功能进行对比,可能第一遍体验无法很好的进行对比,所以需要至少体验 3 次以上才能很好的得出对比的结论。

体验产品时需要注意的几个维度:

  • a. 不要急于进行总结,先进行至少 3 次以上体验;

  • b. 先看整体布局再分析局部细节;

  • c. 重点功能交互形式需要提取出来进行对比;

  • d. 主界面的各版块布局设计需要进行对比;

  • e. 配色分析,作为改版时的配色优化指导;

  • f. 图标和组件库的分析,找出细节的优化方向。

进行竞品体验时,尽可能多的找出差异化的设计形式,作为改版 APP 优化的指导方向。由于作为 UI 设计师进行 APP 改版练习更多是视觉优化为主,交互优化为辅,所以我们需要在相同模块上面找出更多不同的设计样式,作为视觉优化的方向。

如果你自身交互能力较好,也可以以交互优化为主,视觉优化为辅,这个可以结合自身情况选择。在进行竞品体验的时候也要根据优化目的的不同,着重的转移体验的重心。

UI设计改稿经验总结

7、素材采集,打开禁锢的思维

通过竞品体验你会总结出改版 APP 各个模块的差异化,相同的功能模块各自产品的交互形式、布局样式、视觉风格都存在各自的差异。此时,你对改版 APP 中的很多设计都一个初步的优化清单,你需要再深入一步,因为竞品的设计样式不一定就是值得借鉴的,我们需要寻找更多的灵感,打开自己禁锢的思维。

通过国内外的一些设计平台、素材网站等我们可以去采集更多的设计样式作为灵感借鉴,日常的一个采集收藏习惯也就变得尤为重要了,作为一个优秀的 UI 设计师,我们需要养成这样的习惯。个人平时经常访问的设计平台有站酷、UI中国、致设计、Dribbble、Behance等,采集收藏灵感会经常用Pinterest和花瓣,都是一些大家经常访问的平台,所以不是别人知道你所不知的优秀平台,而是你没有他的良好习惯。

UI设计改稿经验总结

8、体验,走了一圈才发现你可以更好

采集完一些灵感素材之后,我们又回到体验改版 APP 的起点,走了一圈之后你会发现改版 APP 中很多你可以入手优化的方向,比起第一次体验,你会更加有信心能够做出一个不一样的设计作品。再次进行产品体验的时候,你需要带着脑海中处理相同功能板块的不同设计表现形式进行思考,寻找出更好的设计表现形式来解决这个功能模块。

在构思优化样式的时候,可以绘制一些简单的草图,以防后期进行交互输出的时候遗漏灵感细节。在进行设计优化的时候先从灵感库中寻找较为符合的样式进行思维嵌套,然后再发散思维,融入自己原创性的思维,形成自己的原创思路。

UI设计改稿经验总结

9、交互设计,实现你心中的更好

通过前期的准备工作,我们即将进入重要的设计部分,大家不要忽略前期的准备阶段,只有思路成熟且清晰,后面的设计工作才能更加顺畅。

作为 UI 设计师最终输出的必然是高保真的视觉稿,那么交互原型设计是为了快速的把自己的思路展现出来,所以不局限于原型软件的绘制,哪怕是纸上的草图绘制也是可行的方案。最终的交互稿是给自己看的,所以能看懂就能达到最终的目的。

如果你考虑后期进行作品包装展示时,希望能展示出交互思维,那你花点时间适当的对低保真交互原型进行绘制也是不错的选择,也能锻炼自己原型制作软件的操作能力^_^。

UI设计改稿经验总结

10、设计风格推导,符合产品的设计趋势运用

在开始进入界面视觉设计时,我们需要对整体 APP 设计做风格推导,这将直接关系着最终界面呈现的效果。如果你是一位对行业趋势关注的设计师,各种设计趋势呈现在你脑海中,你需要进行筛选,结合改版产品的属性选择合适的设计语言去表达,切不可为了趋势而牺牲产品定位。

在进行风格确定的时候,颜色的选择也占据一定的因素,我们可以选择改版 APP 现有的主色进行优化,也可以进行推翻重选。如果是重新选择配色方案,我们可以通过情绪版的方式在身边朋友或者各种群里进行。也可以与竞品形成视觉差异化,选择一些形成对比的配色方案,方式很多,大家根据自己的条件和思路自行展开。

确定好配色方案之后,我们需要考虑设计的表现形式,无论是何种设计形式都需要符合产品的属性。比如大标题、大圆角卡片、大投影等设计表现形式会在视觉层面带来不错的效果,却需要考虑信息量的因素,如果本身改版 APP 就属于信息量很大的产品,在选择时就要综合考虑。根据 APP 的风格定位,比如文艺类、娱乐类、儿童类等,那么设计的风格也会对产品风格定位起到一定的影响。

UI设计改稿经验总结

11、界面设计,碎片化积累

当你打开设计软件进行界面设计的时候,剩下的就是“满血复活”的激情,为了能够充分利用好业余时间,我们需要把数十个界面分配到具体的日程中,的利用碎片化的时间进行积累。规定自己一天完成两个界面,就要严格执行,只有这样你才能具备超强的战斗力。

提到界面设计很多设计师会纠结在软件的选择上面,总会问老司机们你们用什么软件,其实软件的选择并不是问题,它只是一个工具,用的顺手即可,现在很多软件都能带来最终的目的。随着很多轻量级的软件不断丰富多样,软件的操作也更加简单便捷,只要你充分的利用互联网资源,软件的学习只是熟练度的问题,设计的思路与技巧才是需要更多的学习、研究和总结。

UI设计改稿经验总结

12、审核,寻找导师

历尽艰辛你收获了希望,一套 APP 改版设计作品初步完成,接下来你需要寻找到一位导师,俗话说当局者迷,你自己构思出来的东西需要得到验证,寻找一位资深的设计老司机给你指点作品,将会给你的成长带来很大的帮助。他们会站在更高的专业角度给你指出一些优化建议,也能使你的作品更加成熟。

导师在哪里?

  • a. 可以是身边的同事,别以为导师一定是大神,旁观者的意见都是具有一定的思考价值;

  • b. 通过一些设计交流群寻求意见,建群的意义其实就是交流设计(可是现在演变为畅谈人生了/(ㄒoㄒ)/~~);

  • c. 通过设计平台寻找那些活跃的老司机,只要是真诚的设计交流,他们都会乐于分享;

  • d. 机缘巧合下加上的大神微信或者QQ,平时要注意不要群发小广告去骚扰他们,他们关键时候会乐于给你专业性的指点;

  • e. 相信你能找到更多的方法,寻求帮助。

UI设计改稿经验总结

13、调整优化,不放过任何一个细节

通过不同形式的意见反馈,我们即将面临一次调整优化,在众多的反馈意见中,我们也不能盲目的进行修改。我们要做有思考能力的设计师,去分析这些修改意见,遇到意见相左的修改建议要结合自己前期的调研进行把控,因为提意见的人不一定能像你一样熟悉产品,可能存在一定的主观性。

选择性的进行修改,也要保持自己的自信度,适度的自信可以增强你对作品的信任度,我们不能总是质疑自己的能力,只要保持不断努力学习的心态,有时候也要相信自己的专业能力,相信自己就能给作品带来自信度,你的需求方才能被你的专业意见所引导。

UI设计改稿经验总结

14、包装,整理设计思路

作品包装总是会被很多设计师所忽略,在进行作品展示的时候也比较随意,没有充分利用作品包装的优势传达出作品自身的价值。我们将作品展示出来进行交流时,需要通过适当的包装把作品更好的一面清晰的传递给读者。

在进行作品包装的时候,可以加入自己的设计思路辅助传达出作品背后的故事,让读者更容易走进你的作品。通过包装把原本单调的独立界面进行解剖,利用整体布局、局部提炼、细节展示、文案描述、思路整理等形式,让作品呈现效果更加丰富多样。

作品包装中一些简单的设计技巧:

  • a. 作品包装设计中的版面布局需要舍得,适当加大留白会给版面更强的呼吸感;

  • b. 局部提炼,对界面设计中的一些视觉表现力强的样式提取出来独立展示,丰富作品的细节展示;

  • c. 精心挑选样机,让作品展示效果更佳,有时候也可以自己绘制更加简练的样机模型;

  • d. 设计组建选择性展示,增删挑选的组建让布局更加整体,视觉效果更加协调,整体组合形成块面感;

  • e. 利用对比突出重点,不要使整体布局都处于平面化;

  • f. 装饰元素的运用,可以利用辅助图形、短线等进行设计装饰;

  • g. 加强头图设计的视觉表现,提高读者的注意力。

作品包装设计分为平台型作品包装和作品集包装,也是需要我们设计师加以重视的一个板块,以后我们单独进行这方面的研究分享。

UI设计改稿经验总结

15、分享,设计交流

此时,你已经完成了这次 APP 改版之旅,恭喜你击败了懒宝宝,相信下一次你会具备更强的自我驱动力。完成一次作品你可以选择封印在冰冷的硬盘,也可以选择分享给更多的设计朋友,大家互相学习和讨论,个人比较倾向于后者。

看看老外的社交APP UI界面设计,不知道你能有启发不?

蓝蓝设计的小编

社交软件已然成为现今人们沟通交流的主要媒介,那什么样的对话页面更大家受欢迎呢?对话页面的ui要怎么设计呢?下面列举12个国外社交app ui设计案例供设计师盆友们参考。

日常APP体验-交互知识点汇总-2

资深UI设计者

Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title



Image title


Image title


Image title


Image title


总结:

大家在日常使用APP过程中也可以带有目的性,发现一些好看的UI或是好的交互点可以截图保存和思考:为什么这么设计?目的是什么?分析其优势之处,还可以和竞品的相似交互进行对比,始终相信“不积跬步 无以至千里”,通过在点滴中慢慢积累,今后当你遇到类似的问题时就可以快速回忆起这些知识点,自然就可以运用自如,thanks~

WebVR大潮来袭 ---前端开发能做些什么?

周周

        去年谷歌和火狐针对WebVR提出了WebVR API的标准,顾名思义,WebVR即web + VR的体验方式,我们可以戴着头显享受沉浸式的网页,新的API标准让我们可以使用js语言来开发。今天,约克先森将介绍如何开发一个WebVR网页,在此之前,我们有必要了解WebVR的体验方式。

WebVR体验模式

WebVR的体验方式可以分为VR模式和裸眼模式

一、VR模式

➤滑配式HMD + 移动端浏览器

        如使用cardboard眼镜来体验手机浏览器的webVR网页,浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向,并告知页面需要渲染哪一个朝向的场景。

➤分离式HMD + PC端浏览器

        通过佩戴Oculus Rift的分离式头显浏览连接在PC主机端的网页,现支持WebVR API的浏览器主要是火狐的 Firefox Nightly和设置VR enabled的谷歌chrome beta。

二、裸眼模式

        除了VR模式下的体验方式,这里还考虑了裸眼下的体验浏览网页的方式,在PC端如果探测的用户选择进入VR模式,应让用户可以使用鼠标拖拽场景,而在智能手机上则应让用户可以使用touchmove或旋转倾斜手机的方式来改变场景视角。

        WebVR的概念大概就如此,这次我们将采用cardboard + mobile的方式来测试我们的WebVR场景,现在踏上我们的开发之旅。

准备工作

        技术和框架:three.js for WebGL

         Three.js是构建3d场景的框架,它封装了WebGL函数,简化了创建场景的代码成本,利用three.js我们可以更优雅地创建出三维场景和三维动画。

        测试工具:智能手机 + 滑配式头显

        推荐使用cardboard或者某宝上三十块钱的高仿货。当然,如果你练就了裸眼就能将手机双屏画面看成单屏的能力也可以忽略。

       需要引入的js插件:

  • three.min.js
  • webvr-polyfill.js
  • VRcontrols.js
  • VReffect.js
  • webvr-manager.js

webvr-polyfill.js

        由于WebVR API还没被各大主流浏览器支持,因此需要引入webvr-polyfill.js来支持WebVR网页,它提供了大量VR相关的API,比如Navigator.getVRDevices()获取VR头显信息的方法。

VRControls.js

        VR控制器,是three.js的一个相机控制器对象,引入VRcontrols.js可以根据用户在空间的朝向渲染场景,它通过调用WebVR API的orientation值控制camera的rotation属性。

VREffect.js

        VR分屏器,这是three.js的一个场景分屏的渲染器,提供戴上VR头显的显示方式,VREffect.js重新创建了左右两个相机,对场景做二次渲染,产生双屏效果。

webvr-manager.js

         这是WebVR的方案适配插件,它提供PC端和移动端的两种适配方式,通过new WebVRManager()可以生成一个VR图标,提供VR模式和裸眼模式的不同体验,当用户在移动端点击按钮进入VR模式时,WebVRManager便会调用VREffect分屏器进行分屏,而退出VR模式时,WebVRManager便用回renderer渲染器进行单屏渲染。

        具体使用方法我们将在下文说明。

        3D场景构建

        首先我们创建一个HTML文件

       <!DOCTYPE html>

       <html lang="en">

       <head> 

              <meta charset="UTF-8">

                  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

              <title>webVR-helloworld</title>

                   <style type="text/css">

                         * { 

                           margin: 0;

                           padding: 0;

                            }

                     html,body {

                                 height: 100%;

                                overflow: hidden;

                     }

               </style>

         </head>

         <body>

         </body>

        <script src="./vendor/three.min.js"></script>

          <script src="./vendor/webvr-polyfill.js"></script>

          <script src="./vendor/VRControls.js"></script>

       <script src="./vendor/VREffect.js"></script>

       <script src="./vendor/webvr-manager.js"></script>

       <script src="./main.js"></script>

       </html>

         接下来编写js脚本,开始创建我们的3d场景。

1、创建场景

        Three.js中的scene场景是绘制我们3d对象的整个容

       1.var scene = new THREE.Scene();

2、添加相机

Three.js的相机

Three.js中的camera相机代表用户的眼睛,我们通过设置FOV确定视野范围,

  • //定义一个60°的视角,视线范围在1到1000的透视相机
  • var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
  • scene.add(camera);

3、添加渲染器

  • Three.js的渲染器用来渲染camera所看到的画面


  • //初始化渲染器 antialias参数为ture表示开启抗锯齿策略
  • var renderer = new THREE.WebGLRenderer({ antialias: true } );
  • //设置渲染器渲染尺寸
  • renderer.setSize(window.innerWidth,window.innerHeight);
  • //设置渲染背景为白色
  • renderer.setClearColor(0xeeeeee);
  • //将渲染场景的canvas放入body标签里
  • document.body.appendChild(renderer.domElement);

  • 添加一个立方体网格

  • // 创建立方体
  • var geometry = new THREE.CubeGeometry( 10,10,10);
  • var cubematerial = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
  • var cube = new THREE.Mesh( geometry, Cubematerial );
  • cube.position.set(0,100,-50);
  • cube.rotation.set(Math.PI/6,Math.PI/4,0);
  • scene.add(cube);

4、启动动画

  • 产生动画的原理就是让camera持续连拍,同时每一次改变物体的属性,通过requestAnimationFrame()方法递归的方式来持续更新场景对象属性,你可以将它理解为setTimeout的优化版。相比setTimeout函数,requestAnimationFrame可以保证动画渲染不会因为主线程的阻塞而造成跳帧。


  • function animate() {
  •     //让立方体旋转
  •     cube.rotation.y += 0.01;
  •     //渲染器渲染场景,等同于给相机按下快门
  •     renderer.render(scene, camera);
  •     //递归运行该函数
  •     requestAnimationFrame( animate );
  • }
  • animate();//启动动画

      至此,我们已经绘制了一个简单的3d场景并且让它动了起来,接下来,我们需要让我们的场景可以支持WebVR模式。

WebVR场景开发

       WebVR网页的基本原理其实是通过浏览器的WebVR API获取用户输入,进而控制相机的视角,在VR模式下通过VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺仪)的方式显示画面,裸眼情况下提供全屏+touchmove/gyroscope。

       现在我们开始分别创建上文所说的VR控制器和VR分屏器

  • //初始化VR控制器需要传入场景相机
  • var vrControls = new THREE.VRControls(camera);
  • //初始化VR渲染器需要传入场景渲染器
  • var vrEffect = new THREE.VREffect(renderer);
  • //初始化VR适配器,传入渲染器和分屏器
  • var vrManager = new WebVRManager(renderer, vrEffect);

      然后在前面创建的场景渲染函数里调用

  • function animate() {
  •     cube.rotation.y += 0.01;
  •     //实时更新相机的位置和转角
  •     vrControls.update();
  •     vrManager.render(scene, camera);
  •     //递归运行该函数
  •     requestAnimationFrame( animate );
  • }

       至此,我们已经完成了一个基本的webVR网页,不过少了点交互效果好像,敬请期待Web开发的新世界---WebVR之交互事件。

  • 完整代码:在文章基础上添加了天空和地面相关代码,以及下篇文章将讲到VR凝视交互事件。
  • demo演示地址 :手机浏览需设置允许横屏。

结语

        目前,国外的谷歌、火狐、Facebook和国内百度已推出支持WebVR浏览器的版本,微软也宣布将推出自己的VR浏览器,随着后期5g网络极速时代的到来以及HMD头显的价格和平台的成熟,WebVR的体验方式将是革命性的,用户通过WebVR浏览网上商店,线上教学可进行“面对面”师生交流等,基于这种种应用场景,我们可以找到一个更好的动力去学习WebVR。






卡片式UI设计欣赏

蓝蓝设计的小编

在设计中,卡片上设计是屡见不鲜的,比如:用在UI产品的包装排版、APP/web的列表排版、banner轮播的设计、导航的切换等。在这些上做出很多别出心裁的卡片视觉设计及炫酷的动画效果,都能带给用户很好的体验。

优秀UI界面设计评析

蓝蓝设计的小编

男生运动鞋商店支付界面,颜色搭配非常舒服,鞋子摄影也很漂亮,字体字号运用非常到位。

界面欣赏

博博

  • 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

    万聚制作 2018-05-15 13:30:00

素材源自网络

这是我们收集UI / UX交互的一周时间,以增强您的用户界面灵感。我们专注于酷炫的动画,布局设计,用户体验思考等等。我们正在从静态,动态甚至是现场原型混合它,这可能是一个伟大的每周系列书签!本周,我们对交互/转换的关注较少。本周我们一直在挖掘一些动画,但我们发现的主要是静态的。我们有各种各样的组合,恰到好处地为您提供创意提升。

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

这些小小的改变,能够让UI动效更上一层楼

蓝蓝设计的小编

UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。

案例讲解 | 移动端的长表单应该如何设计?

博博

案例讲解 | 移动端的长表单应该如何设计? 

原创 UEDC  2017-10-24

作者 Echo

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

本文大纲:

1.三种主方案

2.主方案1的设计讨论

3.主方案2的设计讨论

4.主方案3的设计讨论

5.总结

1.三种主方案

针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:

PS:图中的举例的关键字段仅仅为举例需要。

主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。

主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。

主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。

2.主方案1的设计讨论

主方案1的设计优缺点

优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案2和3,减少了页面跳转操作和查看。

缺点:基于移动端界面承载能力较弱,一个界面将表单所有展示出来,用户一次性浏览和操作起来压力较大,容易使操作流程失败,导致成功率大大降低。

针对于主方案1,用户完成表单完成后,提交按钮有三种主要的设计方法,一种是提交按钮放在表单最后,一种是提交按钮放在导航栏上。另一种是,提交按钮底部悬浮。如下图所示:

方案1.0,如果提交按钮放在表单之后,那么用户的视觉流和操作感觉是一致的,流畅而自然。但是会出现一个问题,用户在输入信息时,键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法在输入法中没办法推下去,只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦,用户可能会忽略掉提交按钮。

方案1.1解决了提交按钮会被键盘挡住的缺陷,但是视觉流和操作行为错乱,用户在屏幕底部输入完成之后,视觉和手指要返回到顶部操作。

方案1.2提交按钮底部悬浮,解决了方案1.1的视觉流和操作紊乱的问题,解决了方案1.0提交按钮被隐藏的问题,但是当输入文本,调出键盘时,依旧会被挡住。

使用底部悬浮按钮的场景是操作按钮非常重要,例如手机淘宝的立即购买和加入购物车。

同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出,适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

3.主方案2的设计讨论

主方案2的设计优缺点

优点:与主方案3相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁,填写信息全部隐藏到下一级界面。

缺点:来回跳转,操作负荷较大,会把用户绕晕。

在方案2.0中用户填写完成的分组和未分组填写分组区分不开,将方案2.0进行优化,例如填写完成后,会出现已完成的标签,提示用户已完成和未完成不同的状态(如方案2.1)

4.主方案3的设计讨论

Facebook曾针对分步注册与非分步注册做过A/B Test,其结论指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面,不如适当拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

主方案3的设计优缺点

优点:流程分步操作,相对于主方案1,用户操作成功率大幅度提高。

缺点:如果用户操作到了第三步,需要返回第一步确认填写信息的准确性,那么用户需要两次返回。

用户填写的信息做保存(缓存),用户返回上一步,填写的数据做保留。H5依旧适用,用户填写的数据保存在数据库,用户返回上一步时,同时刷新载入数据库记录的数据。

对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种?方案3.0视觉流和操作流是正常情况,且不存在按钮被键盘挡住,所以方案3.0最佳。

移动端长表单设计总结

主方案1、2和3,都有各自不同的优缺点。

一个交互流程的好坏,一个最重要的标准之一是让用户顺利完成操作流程,保证操作流程的成功率,才能完成用户的目标。以此标准来看,主方案3是最好的。

接下来探讨一个细节问题,就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮?

这里分为4种情况:

情况1:内容区加上操作按钮不被键盘覆盖,建议按钮放在内容区内。

情况2:必填的内容未被键盘覆盖,非必填被覆盖,建议操作按钮放在导航栏上,例如朋友圈、QQ空间和新浪微博。

情况3:必填的表单超过一屏,建议按钮放在内容区。不建议放在导航栏上的原因有两个:

a.视觉流错误,从上往下,信息量很大,用户滑动浏览时,会忽略且很难联想点击导航栏上的操作,行业常见放在导航栏上是因为必填的不超过一屏。

b.当必填项过多时,要滑动屏幕才能填完。 把按钮放在右上角的导航栏,当用户还没填写完成,那么在按钮放在导航栏上很容易去点击,容易引导用户犯错。

情况4:必填超过一屏,且无非文本输入,建议可使用底部悬浮。


PC端表单设计的研究:如何设计一个优秀的表单页面

蓝蓝设计的小编

最近身边的一些小伙伴,总会遇见B端设计工作,对于这种偏后台设计的B端设计,总会有大量的表单设计需要做,结合以前自己也有过不少表单设计的工作,在这里给大家分享一下自己对于PC端表单设计的研究,聊一聊表单在PC端中的运用。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档