 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
锤子大背景
下载积分：800
内容提示：锤子大背景
文档格式：PDF|
浏览次数：0|
上传日期： 17:26:16|
文档星级：
全文阅读已结束，如果下载本文需要使用
 800 积分
下载此文档
该用户还上传了这些文档
锤子大背景
关注微信公众号Axure原型设计：锤子手机 One Step 操作
这是一个趣味的原型案例：如何使用Axure实现One Step的交互效果。
锤子手机的易用性一向值得称赞，坚果Pro也在上市以来常常被老罗亲自各种曝光，在坚果Pro发布会上的一度哽咽也让老罗自己感动的不行。
是的，我们来看看被推崇的三大功能之一的One Step，看看如何使用Axure来实现这样的交互效果。
这里只演示One Step的选中QQ中的文字内容，然后拖动，再释放到指定App图标上的交互效果。
1.添加头部
为了看起来更真实，我们以截图代替，放在上方。
2. 添加内容区域
内容区域以QQ对话框为例，添加一个矩形，宽度比头部稍微小一点（右侧要空出位置放图标列表），高度470，背景颜色为浅灰色。
3. 添加右侧应用APP列表
添加一个矩形框作为背景，大小50*470，背景和头部背景颜色一致。
4. 添加QQ聊天区域内容
分别添加两个头像，以及对应的文字内容，注意第一个人的文字内容的气泡实现方式，是用一个带有圆角的矩形，和一个三角形的组合，三角形放置一定的角度（为了示意，以红色形状表示）。
组后后的内容里输入文字，文字的左边距设置大一点：20，这样文字就在箭头靠右位置了。
5. 添加右侧App图标列表
因为拖动的目标APP的图标不是这个APP列表，而是切换后的分享快捷方式列表，因此我们还是以截图代替。
选择右侧黑色矩形背景和图标列表截图，右键转换为动态面板，取消动态面板的“自动调整为内容尺寸”勾选，保持动态面板的固定大小，给动态面板命名为app_list。
给动态面板app_list添加一个新的状态，双击新加的状态进入编辑。
从锤子手机One Step的快捷方式列表中截图一下背景，取一小块绿色草地，作为动态面板app_list状态2的背景：
然后设置背景图片的填充方式为“重复图片”，这样背景就会被重复填充：
添加各个快捷方式图标，以小图标图片代替：
分别给图标命名app1~app7，在拖动内容到这些图标上时，图标会被放大，移出后图标大小还原。
6. 文字拖动内容
在鼠标按下QQ聊天中的文字内容时，会弹出一个小窗口，内容为当前的聊天内容文字，蓝色背景白色文字，修改形状为带有下三角形的，有边框，稍微粗一点，调整下方三角形的位置到中间。
然后旋转这个形状180度，但文字角度不变，右键转换为动态面板，命名为tips。
给动态面板tips添加一个状态2，里面什么内容也不用放，并将状态2放在上层，作为tips的初始状态，设置动态面板“自动调整为内容尺寸”为取消勾选状态，然后将tips放在第一个聊天记录内容上方。
这样在初始状态时，这个蓝色提示被拖动的文字处于不可见状态，因为状态2在动态面板的最上层，而且里什么内容也没有，但是支持响应的事件，可以用来处理拖动事件效果。
为了响应元件范围的判断条件，我们在tips的状态箭头上方再添加一个小的三角形，只有当这个小三角形和快捷方式的图标相接触时才响应，命名形状为sanjiao。
界面内容已经准备妥当，现在就开始处理事件了。
事件的处理流程说明：
鼠标在第一条聊天记录处长按，会响应tips的鼠标长按事件。
响应鼠标长按事件后，切换右侧的app_list为第二个状态，配合向左滑动动画。
同时响应动态面板tips的鼠标长按事件，切换tips状态到状态1，即显示文字提示内容。
响应动态面板tips的拖动事件，移动动态面板tips。
移动动态面板tips到app_list的图标1上，图标1放大显示，移出后，图标大小还原。
松开鼠标后，app_list还原到状态1，同时隐藏tips并移动到初始位置。
整个事件流程完成。
1. 动态面板tips的鼠标长按事件
先设置当前动态面板状态为State1，即显示蓝底白字的提示文字
再切换动态面板app_list状态为State2，配合向左滑动的动画效果。
2. 动态面板tips拖动事件
动态面板在响应鼠标长按事件后，同时开始响应拖动事件。
添加判断条件，如果形状sanjiao接触到图标app1（即instagram图标）时，继续移动动态面板tips1，然后设置图标app1的大小为42*42，配合动画效果为从中心以线性放大。
否则，继续移动动态面板tips1，还原图标app1的大小为37*37，同样的动画效果。
3. 动态面板鼠标松开事件
1）鼠标松开时，切换图标列表app_list状态为State1，配合向右滑动动画。
2）设置动态面板tips为状态State2，即空白内容，并将tips移动到初始位置（73，109）。
事件处理完成，F5预览一下效果，拖动tips到图标app1上时，测试一下移入和移出效果，即响应元件范围判断条件。
这是一个趣味的原型案例，总结一下所应用到的知识点如下：
多个形状的组合，实现聊天气泡形状，一些特殊形状的创建技巧
动态面板鼠标长按时间、动态面板拖动事件、松开事件，注意状态1中设置为空白内容+动态面板“自动调整为内容尺寸“也是一个小技巧
条件判断：元件范围接触判断，这是重点哦！
动态面板背景图片的填充效果
动态面板的状态切换
通过图片设置大小，配合动画效果，实现图标的放缩
源文件下载
作者链接: /s/1pK7z5k3 密码: tj85
官方链接：/s/1qYryDly 密码：t6f8
本文由 @Axure原型设计工场 原创发布于人人都是产品经理。未经许可，禁止转载
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点【图文】锤子手机案例分析_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
锤子手机案例分析
大小：606.50KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢毛玻璃背景有个特点你们注意到了吗？【锤子科技吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：713,688贴子：
毛玻璃背景有个特点你们注意到了吗？收藏
锤子科技坚果Pro,搭载骁龙625/626芯片,3500mAh大电池,双卡双待全网通,18W快充漂亮得不像实力派.
请问毛玻璃背景 只能跟随锁屏壁纸的吗？
桌面的图标的字体颜色会自动呈现出与背景图片颜色反差较大的颜色？
这个很赞，
人性化的小细节
过渡动画快多了
更新了，感觉越来越流畅了
【火爆抢购】2017新款多功能录音笔！集合录音录像书写！支持全国货到付款
我习惯不现实程序的名字
不用名字，没发现
不用名字的路过
执着于看得见或看不见的细节
桌面所有字的颜色根据背景变化而变化
为啥我的坚果没有毛玻璃主题呀 更新了
iOS7玩剩下的..
苹果很早就是这样了
隐藏文字的路过。
你不会把字关掉 应用下面有字太难看了
我就想问问毛玻璃怎么设置，选项在哪儿？
之前就有的功能
出现在锤子手机上是感觉新鲜，不过其他手机早有了，也就没感觉了
其他手机也会这样
不显示名字不清楚
看得见和看不见的细节下面有请手拿爱疯的凤姐回答以下问题:1.怎么样车票就能到手？(15分)2.你能比谁提前多少天预约？(25分)3.成功率提高多少倍？(15分)4.春运就靠谁了？(15分)5.要上哪才行？(15分)6.详情在哪里？(15分)请于10秒后楼下回复
楼主只用过锤子手机?
现在新出的哪个手机没这功能？
登录百度帐号推荐应用后使用快捷导航没有帐号？
查看: 3061|回复: 5
求锤子员工访谈背景音乐！
主题帖子积分
第 3 级, 积分 574, 距离下一级还需 9426 积分
逼格爆表的公司员工访谈！
音乐也爆表有没有！
主题帖子积分
主题帖子积分
很淡的音樂。。。應該是自己做的吧。。。
主题帖子积分
主题帖子积分
很淡的音樂。。。應該是自己做的吧。。。
嗯，有可能是他们自己做的，如果能提取出来就好了
主题帖子积分
嗯，有可能是他们自己做的，如果能提取出来就好了
不只是科技论坛}