应用设计 -亚博电竞官方网址

产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计 8 原则： 原则 1：用户界面应该是基于用户的心里模型，而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。   # 左边界面 #：大众点评新版的价格的搜索就比之前改得更符合用户心里模型； # 右边界面 #：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。 原则 2：培养用户使用情景的思维方式做设计   要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。 那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是 qq 帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。   对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比： 微信 1.0 的时候（我这里只截了 4.0 的图）把添加好友放置主 tab 上，方便用户很快的添加好友 米聊 2.0 时还是把添加好友放置在好友列表的第一排，用户很难发现 原则 3：尽量少的让用户输入，输入时尽量多给出参考 移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1. 输入定位无法反馈，所以无法形成高效的盲打；2. 虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到 input box 的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。 百度音乐的搜索先是把近期最热门的歌曲依次排列在列表中，当有字输入时，会出现歌手的候选词，这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。 百度地图也是我用得比较顺手的一个地图导航应用，在减少输入方面也做的比较出色，百度地图拥有 cookies 功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜，在用户输入到一半的时候，下面的候选列表就出现了目标地址，用户直接停止输入点击列表即可。 原则 4：全局导航需要一直存在，最好还能预览其他模块的动态   全局导航在 web 交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。 全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少yabo亚博88主页面和次级页面之间的跳转次数，当然全局导航中的…

我从 dribbble 收集了 20 个漂亮的登陆表单案例。希望你看后能从中受益，并对你以后的登陆表单设计有帮助。设计一个登陆表单是非常容易，但大多设计都很糟糕、毫无亮点。无论如何，这篇 dribbble 案例集锦绝对走的是另一个极端。希望这 20 多个都能赢得你的青睐，废话不多说，直入正题！ 网站与 app 中的登陆表单 继承了 ios7 的精髓，这件登陆界面作品将 ios7 微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片——甚至可能是 gif。尽管这背景事实上没有那么精致，但这一定是你平时不常见的设计。你几乎很难见到这样的 app，还有如此卖弄的首屏设计。 同样秉承着 ios7 的精神，这个登陆界面和它的附属界面采用了彩色模糊背景，令一切都保持绝对简洁。我得说这两个界面都相当极简化，实际的输入框被细线所取代。不过美妙的多彩背景增添了个性化色彩，令作品亲切美观。 如果说有令人愉悦的设计，那这一件就是了。蓝色背景图与明快的白色 logo、文字和输入框形成强烈对比。绿色按钮看起来像个真实的按钮——尽管界面的其余部分都是扁平的——色调也与蓝色搭配地非常好。 真是醒目的配色！当然，它是从另一个角度思考登录框的产物。这不是一个通常意义上的登录窗，因为它在易用性方面仍存在瑕疵。但是在设计方面，我们尽可以跳出条条框框来思考登陆界面。 与之前那些相比，这件相当平静和简洁。颜色选得非常棒。页面也很切中要害，它没有任何不必要（甚至扰乱注意力）的小把戏，任何一个登陆界面都不应该有。 这又是一款大胆的登陆界面设计。深色的登陆界面、深色模糊背景、明亮柔滑的纤细字体，营造出了神秘气息与魔力。有了迷人的登陆界面，就别无他求了。 现在呈现的是一款深色登陆界面，还有非比寻常的红色文字与按钮。我不确定这么多红色是否合适，不过我们暂且继续——这是非比寻常的大胆设计，值得喝彩。我觉得自己对于红色的忌惮是没道理的，因为决定用户反应的，是红色按钮所处的环境，而非红色本身。我可以肯定，没有人会在按下这个登陆按钮时感到崩溃。 这件作品绝对是本文中我的最爱之一，因为它够简洁，却不单调。它的配色相当惊艳，几种颜色完美结合。而且，它看上去真的很赞！确实是个打造简洁美观登录界面的好办法。 这是个稍微复杂些的登陆界面。像如今大部分平台一样，你可以已有账号来登陆，比如 google、twitter 或者 facebook，而不必在每个新网站上创建新的账号。不过如果你想的话，你也可以注册自己的账号。 这个界面很有创意——手写风格的注释与箭头，给界面增添了一些个性，配色也很棒，与常见的蓝色和银灰色有所区别。同时，不像时下大多数登陆页面，它的背景图并不是视觉焦点，它就是一个轻巧的登陆 / 注册页面。 我非常欣赏这件自由散漫的设计。没有分散注意力的导航，也没有烦人的其他内容。用户的操作与目标同样简单：选择 platform 或 opentag，然后登陆。如果是首次打开，你可以试试底部的“注册账号”链接。我觉得这真是个组织良好且执行到位的登陆界面。 这也是我最爱之一，我着迷于它的扁平设计。它也没有多少分散注意力的东西，重点就是登陆。简明的 logo 效果非凡，如果你没有账号，也能在这注册一个。除此之外，所选的颜色也紧密结合，表现良好。 我非常喜欢这件设计，因为东西都足够大，登陆按钮很大，按钮上的文字很大，图标也很大。现在你应该有所体会了。另外，登陆按钮是明亮的橙红色，你不会忽略它。它不会与周遭环境混为一谈，所有需要强调的操作都该如此。 我不确定自己是否赞同输入框背景和文字的颜色，不过除此之外，这仍然是件优秀的单色表单设计。我喜欢这两个输入框彼此结合的方式，因为他们显然就是一体的。我也喜欢那个醒目的登陆按钮。 在你注销登陆前，网站会记住你是谁，这点太赞了。从外观来看，它想营造安全登录的感觉，事实也确实如此，这得益于下面的两个 logo——mcafee 和 verisign。我还喜欢它滑稽的头像，使得整个界面体验如此愉悦，虽然它其实很严肃。 这是我第三喜爱的作品，因为它好玩的配色。是的，这是扁平设计。如此基本的样式，本应该很单调，它却没有。我发现精心挑选过颜色的扁平设计常常能成功，因为充满了亲切感和个人色彩，这件登陆界面就是如此！我很希望在自己经常使用的 app 和网站中见到更多这类设计。 啊，又是一个蓝色的界面！我对此处使用的绿色持怀疑态度，不过本作品中微妙变化的蓝色，与白色文字结合地很好——确实非常好。非正式的小写字体也给整个界面增添了几分个性。 我相当喜欢这个表单，因为它显然是页面的视觉中心，再没有其他东西分散我的注意力。当然，还有 logo…

扁平化风格潮流浩浩荡荡，童鞋们周末有时间也来撸一发，学习一下扁平化风格 icon 的设计思路吧。今天分享的教程是教你创建一枚 ios 7 风格的图标，教程不难，熟练的童鞋 30 分钟就可以完成咯。好嘞，教程开始！ 先上效果图： 挺干净的，兴趣大增有没有？那就开始咯。 part 1：打好地基 cttrl n 创建画布，大小为 1024px * 1024px，填充背景色为 #fcf2da。 然后 → 编辑 → 首选项 → 参考线、网格和切片，设置如下： 武器已准备，接下来踏上征程吧！ 先创建一个圆角矩形，大小为 512px*512px，半径 120px，记住左上角是形状哦。 搞定后填充颜色 #c47420，命名“icon base” 添加内阴影，参数如下： 为它做一个长投影效果，创建一个矩形，填充黑色，大小可以自己调整，我是宽 718.22px 和高 732.74px，ctrl t 变换角度。 添加图层样式—— 渐变叠加，参数如图，顺便把不透明度调整为 30%，填充 0% 好了，现在的效果是这样的： part 2：创建笔记本 同样创建圆角矩形，参数如下： 然后复制一层，快捷键“a”来到选择工具，减少 16px，调整高度为 432px。 完成后继续复制一层，依上高度改为 416px，填充颜色改为 #…

事先声明，这不是广告。就是一个简约的 ps 教程，适合练手，制作其它图标也是类似的思路。融会贯通，您可以将任何物体扁平化成小巧可爱的图标：） psd 源文件 下载 1. 创建新文件，大小 1200×1600 px，油漆桶上色，#20ade1，分辨率 72px 2. 选择圆角矩形工具，勾选”对齐边缘” 宽度：680px 高度：1350px 半径：70px 3.ctrl/cmd a 全选，然后水平居中，垂直居中，然后 ctrl/cmd d 取消选择 4. 双击形状图层缩略图，颜色改为 #d6d6d6 重命名为”外部轮廓” 5. 继续圆角矩形工具，勾选”对齐边缘” 宽度：670px 高度：1340px 半径 70 px 颜色设为 #ffffff，然后水平居中，垂直居中。 当然，如果你用的是 cc，完全可以复制一份图层，然后使用实时形状属性进行修改，如下图。 现在，上下左右各有 5px 的空间了 6. 使用矩形工具 宽度：670px 高度：1150px 颜色 #2d2d2d 水平居中并垂直居中，命名为屏幕 1 7. 使用矩形工具 宽度：640px 高度：1035px 颜色 #646464 栅格化图层，shift …

@他山之眼：首先呢，把你做好的 ui 界面盖印（ctrl alt shift e）       然后选中图层 1,——3d——从所选图层新建 3d， 然后你就会进入 ps 的 3d 界面。 进去之后你会发现，有很多的参数，就这个问题而言，要用到的参数很少。   首先，点击图层一，然后在 凸出深度 这个参数里面修改成 5（根据情况自定） 然后再选择无限光，把投影前面的勾去掉 ——————————————————————分割线———————————————— 以上的前期工作就完成了 接下来就是变换角度了 3d 模式可以选很多变换模式 根据需要 变换角度 就 ok 了     当然，如果你想要做得更精细，那就要学会对 无限光进行变换，让光影更加协调 最后，你可以对 3d 图层 栅格化，然后做阴影 ok，差不多就这样了吧。   原文地址：zhihu