药品服务许可证(京)-经营- 请使用者仔细阅读优酷、、、、和Copyright(C)2018 优酷 youku.com 版权所有不良信息举报电话:照片放大、缩小效果（类头像选择） | JmFans
742 次浏览
实现效果：为方便演示，实际手机操作中的双指滑开（放大），双指并拢（缩小）改为点击“+”（放大），“-”（缩小）；
照片放大、缩小
实现主要思路：
1、把背景图放到一个动态面板中，动态面板垂直、水平滚动都设为自动，等图片放大后，可以移动图片；
2、放大、缩小需要用的动作就是—调整大小，那如何调整，简单的，你可以直接从一个大小过渡到另一个大小，那这种效果不符合我们想要的，所以，我们才需要通过变量来实现；
3、添加三个变量：width(宽)、height(高)、coe(我把它定义为系数)；
4、width、height默认值为当前图片得宽高（320*568），coe默认为1，设置点击事件，宽度、高度调整到大小为width×coe，height×coe，设置值coe+0.1（放大的设置，缩小的-0.1），这样意味着每点击一次，宽度和高度都会按照原大小的10%递增（或递减）。
演示地址：
演示和原型下载请加QQ交流分享群：，欢迎关注微信公众号（justinmind）。
JmFans站长
提问人 大宝提问人 大宝提问人 巴啦啦小魔仙提问人 锂氩氢提问人 〆丶泛滥の尐青春﹌
150 三十而立
150 Ba七七
105 活,该快乐
90 onedesigners
414 51 47 41 37 36 36 35 33 32
25157 15373 11146 8291 7895 6860 6697 6694 5162 4718查看Justinmind的原型来自本地谷歌Chrome浏览器。 这个扩展可以让你从谷歌的Chrome浏览和模拟由Justinmind原型建立（ 5.6版本及以上）产生的移动和桌面应用程序原型本地。
注意这个扩展需要通过文件访问本地文件： //协议。因此，选择“允许访问文件网址”必须在扩展页面启用。文件访问仅限于原型文件，它永远不会访问或使用任何私人数据。
如果您有任何关于该扩展的任何问题或疑问，请与我们联系https://getsatisfaction.com / justinmind 。View",1,[["查看",1000,false,false],["视图",0,false,false],["鉴于",0,false,false],["观点",0,false,false],["浏览",0,false,false]],[[0,4]],"View Justinmind's prototypes locally from Google Chrome.This extension allows you to view and simulate mobile and desktop application prototypes generated by Justinmind Prototyper (version 5.6 and above) locally from Google Chrome.Notice that",0,1],["Justinmind",2,[["Justinmind",1000,false,false]],[[5,15]],,1,2],["'s",3,[["的",1000,false,false],["公司",0,false,false]],[[15,17]],,2,3],["prototypes",4,[["原型",917,false,false],["的原型",0,false,false],["样机",0,false,false],["原型机",0,false,false]],[[18,28]],,3,4],["from",5,[["来自",787,false,false],["从",82,false,false],["由",0,false,false],["距离",0,false,false]],[[37,41]],,4,5],["locally",6,[["本地",639,false,false],["当地",147,false,false],["局部",0,false,false],["在本地",0,false,false],["地方",0,false,false]],[[29,36]],,5,6],["Google",7,[["谷歌",597,false,false]],[[42,48]],,6,8],["Chrome",8,[["Chrome浏览器",706,false,false],["的Chrome",61,false,false],["铬",0,false,false],["浏览器",0,false,false],["镀铬",0,false,false]],[[49,55]],,8,11],[".",9,[["。",814,false,false]],[[55,56]],,11,12],["",10,[["",814,false,false]],[[56,61]],,12,13],["This extension",11,[["这个扩展",743,false,false],["该扩展",107,false,false],["此扩展",0,false,false],["本扩展",0,false,false],["此扩展程序",0,false,false]],[[61,75]],,13,15],["allows you to",12,[["可以让你",369,false,false],["允许您",0,false,false],["允许你",0,false,false],["让您",0,false,false],["使您可以",0,false,false]],[[76,89]],,15,18],["from",13,[["从",488,false,false],["来自",0,false,false],["由",0,false,false],["距离",0,false,false],["的",0,false,false]],[[217,221]],,18,19],["Google",14,[["谷歌",456,false,false]],[[222,228]],,19,21],["Chrome",15,[["的Chrome",556,false,false],["Chrome浏览器",246,false,false],["浏览器",9,false,false],["铬",0,false,false],["镀铬",0,false,false]],[[229,235]],,21,23],["view and",16,[["浏览和",449,false,false],["查看和",223,false,false],["查看并",0,false,false],["观看和",0,false,false]],[[90,98]],,23,25],["simulate by",17,[["模拟由",379,false,false],["模拟出",0,false,false]],[[99,107],[160,162]],,25,27],["Justinmind",18,[["Justinmind",781,false,false]],[[163,173]],,27,28],["Prototyper",19,[["原型建立",700,false,false],["原型建立者",299,false,false]],[[174,184]],,28,30],["(",20,[["（",523,false,false]],[[185,186]],,30,31],["5.6",21,[["5.6",523,false,false]],[[194,197]],,31,32],["version",22,[["版本",509,false,false],["版",0,false,false],["的版本",0,false,false],["版本的",0,false,false]],[[186,193]],,32,33],["and above )",23,[["及以上）",636,false,false]],[[198,208]],,33,36],["generated",24,[["产生的",215,false,false],["所产生",289,false,false],["产生",59,false,false],["生成的",58,false,false],["中产生",14,false,false]],[[150,159]],,36,38],["mobile and desktop",25,[["移动和桌面",261,false,false],["移动和台式",0,false,false],["移动与桌面",0,false,false],["笔记本和台式",0,false,false]],[[108,126]],,38,41],["application prototypes",26,[["应用程序原型",209,false,false]],[[127,149]],,41,44],["locally .",27,[["本地。",141,false,false]],[[209,216],[235,236]],,44,46],["",28,[["",299,false,false]],[[236,241]],,46,47],["",29,[["",1000,false,false]],[[241,246]],,47,48],["Notice that",30,[["注意",739,false,false],["请注意",0,false,false]],[[246,257]],,48,49],["this extension",32,[["这个扩展",432,false,false],["此扩展",0,false,false],["本扩展",0,false,false],["该扩展",0,false,false],["此扩展名",0,false,false]],[[0,14]],"this extension requires access to your local files through the file:// protocol.",0,2],["requires",33,[["需要",432,false,false],["要求",0,false,false],["规定",0,false,false],["必须",0,false,false]],[[15,23]],,2,3],["through the file",34,[["通过文件",364,false,false],["在文件",0,false,false],["整个文件",0,false,false],["在文件中",0,false,false],["完成文件",0,false,false]],[[51,67]],,3,5],["access to your local",35,[["访问本地",530,false,false]],[[24,44]],,5,7],["files :",36,[["文件：",310,false,false]],[[45,50],[67,68]],,7,9],["// protocol",37,[["//协议",244,false,false],["//协议访问",0,false,false]],[[68,79]],,9,11],[".",38,[["。",423,false,false]],[[79,80]],,11,12],["Hence , the",79,[["因此，",622,false,false]],[[0,10]],"Hence, the option 'Allow access to file URLs' must be enabled in the extensions page.",0,2],["option",80,[["选择",622,false,false],["选项",0,false,false],["选件",0,false,false],["的选择",0,false,false]],[[11,17]],,2,3],["' Allow",81,[["“允许",433,false,false]],[[18,24]],,3,5],["access to file URLs",82,[["访问文件网址",659,false,false]],[[25,44]],,5,8],["' must be",83,[["”必须",467,false,false]],[[44,53]],,8,10],["in the",84,[["在",456,false,false],["的",0,false,false],["中",0,false,false],["于",0,false,false]],[[62,68]],,10,11],["extensions",85,[["扩展",556,false,false],["扩展名",0,false,false],["的扩展",0,false,false],["延伸",0,false,false],["分机",0,false,false]],[[69,79]],,11,12],["page",86,[["页面",632,false,false],["页",86,false,false],["网页",0,false,false],["第",0,false,false],["页的",0,false,false]],[[80,84]],,12,13],["enabled .",87,[["启用。",508,false,false]],[[54,61],[84,85]],,13,15],["File access",138,[["文件访问",821,false,false],["文件存取",0,false,false],["的文件访问",0,false,false],["档案存取",0,false,false],["文件的访问",0,false,false]],[[0,11]],"File access is only limited to the prototype files and it will never access or use any private data.If you have any issues or questions regarding this extension, please contact us at https://getsatisfaction.com",0,2],["is only limited to",139,[["仅限于",693,false,false],["只限于",97,false,false],["仅仅限于",0,false,false],["仅局限",0,false,false],["仅局限在",0,false,false]],[[12,30]],,2,4],["the prototype",140,[["原型",721,false,false],["样机",6,false,false],["原形",0,false,false],["的雏形",0,false,false],["雏形",0,false,false]],[[31,44]],,4,5],["files and it",141,[["文件，它",305,false,false]],[[45,57]],,5,8],["will never",142,[["永远不会",278,false,false],["绝不会",81,false,false],["永远",0,false,false],["将永远不会",0,false,false],["绝不",0,false,false]],[[58,68]],,8,10],["access or",143,[["访问或",142,false,false],["存取或",0,false,false],["进入或",0,false,false],["接入或",0,false,false],["访问和",0,false,false]],[[69,78]],,10,12],["use any",144,[["使用任何",208,false,false],["使用任意",0,false,false],["用任何",0,false,false],["使用的任何",0,false,false]],[[79,86]],,12,14],["private data .",145,[["私人数据。",175,false,false]],[[87,100]],,14,17],["",146,[["",456,false,false]],[[100,105]],,17,18],["",147,[["",839,false,false]],[[105,110]],,18,19],["If you",148,[["如果您",501,false,false],["如果",0,false,false],["如果你",0,false,false]],[[110,116]],,19,21],["have regarding",149,[["有任何关于",438,false,false],["有关于",62,false,false],["具有关于",0,false,false]],[[117,121],[146,155]],,21,24],["this extension",150,[["该扩展",290,false,false],["这个扩展",287,false,false],["此扩展",63,false,false],["本扩展",0,false,false],["此扩展名",0,false,false]],[[156,170]],,24,26],["any issues",151,[["的任何问题",323,false,false],["所有问题",0,false,false],["什么问题",0,false,false],["的所有问题",0,false,false]],[[122,132]],,26,29],["or questions",152,[["或疑问",514,false,false],["或问题",29,false,false],["和问题",0,false,false],["或者疑问",0,false,false]],[[133,145]],,29,31],[
注：中文翻译来自GOOGLE
View Justinmind's prototypes locally from Google Chrome.This extension allows you to view and simulate mobile and desktop application prototypes generated by Justinmind Prototyper (version 5.6 and above) locally from Google Chrome.Notice that this extension requires access to your local files through the file:// protocol. Hence, the option 'Allow access to file URLs' must be enabled in the extensions page. File access is only limited to the prototype files and it will never access or use any private data.If you have any issues or questions regarding this extension, please contact us at https://getsatisfaction.com/justinmind.
Justinmind Extension插件LOGO图片
Justinmind Extension Chrome插件相关插件推荐【图片】用户界面设计的一些方法和原则【justinmind吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：278贴子：
用户界面设计的一些方法和原则收藏
什么是用户界面？用户界面（UI，User Interface）也称人机界面，是人机交互、操作逻辑和界面表现的整体设计。每一种设计都有其对应的职业角色，其中，人机交互的设计人员叫做用户研究工程师，操作逻辑设计人员叫做交互设计师，界面表现设计人员叫做视觉设计师。本篇我们所指的用户界面设计，特指界面表现部分的设计，仅此一点，设觉设计师就不应该是“美工”那么简单。因为用户界面的表现质量与用户体验直接相关，是产品最接近用户的的部分，是产品的“脸”。既然跟用户体验相关，就必须要有用户思维，要想设计出打动人心的用户界面，就要站在用户的角度思考设计。换个角度，我们说计算机（电脑）的构成，硬件和软件。硬件为计算机提供信息处理的环境支持，软件为计算机提供信息处理的方案，帮助用户解决问题。也就是说，用户使用电脑，实际是在使用软件，本质就是与软件的用户界面打交道的过程。用户界面设计的基础知识有哪些？设计的基础，一定和“美”有关。Smartisan的设计总监方迟曾在一次分享会上问到一个问题，说人类很容易辨别“美”和“丑”，回答为什么“丑”也很容易，但面对“美”的东西却常常说不出为什么美，美在哪里。是的，其他人都可以回答不出，但是作为产品经理的你，是有必要对“美”有一定的认知。有本书值得推荐，《写给大家看的设计书》，作者Robin Williams给出了“美”的设计原则，我深以为是，并渐渐的应用在了自己的产品工作中。CRAP设计原则Contrast（对比）“如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。这就是关键，Robin Williams对比原则：”如果两个项不完全相同，就应当使之不同，而且应当是截然不同（强烈）的。””对比的目的有两个，一是增强页面的表现效果，二是有助于界面信息的组织。Repetition（重复）“Robin Williams重复原则：“设计的某些方面（元素）需要在整个作品中重复”。重复的元素可能是一条粗线、一种粗字体，某个项目符号、颜色、设计要素、某种格式、空间关系等。总之，读者（用户）能够看到的任何方面都可以作为重复元素。“重复的目的就是统一，并增强视觉效果。Alignment（对齐）“Robin Williams对齐原则：“任何元素都不能在界面上随意安放。每一项都应当与界面上的某个内容存在某种视觉联系。””试着在界面上只使用一种文本对齐方式：所有文本都左对齐，或右对齐，或者全部居中。当然，前提是你要找一条明确的对齐线，并坚持以它为基准进行界面的设计。对齐的目的是使界面统一而有条理（教养）。Proximity（亲密性）“Robin Williams亲密性原则：“将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近。“”在人们的意识里，物理位置的接近就意味着存在联系。亲密性的目的是实现界面信息的组织化，形成视觉的模块化。在你将界面中的相关元素放在一起展示的同时，也使界面的空白区域（留白）更加整洁、美观。我们的眼睛喜欢看到有序的事物，这会给人一种平静、安全的感觉。用户界面设计有什么原则吗？置界面与用户的控制之下（高效）界面设计的目的是满足用户完成任务的需求，也就是说是能够表达出功能的含意，让用户快速理解界面内容和功能。如360安全卫士PC客户端的界面设计，凸显其核心功能“体检”。减少用户的记忆负担（简单）减少用户的记忆负担的核心有两个：界面简单和设计逻辑清晰。界面简单，是指元素和内容的清晰直观的表达效果。设计逻辑清晰，是指界面元素位置的放置是有逻辑的（常规逻辑，保证用户可理解），而不是随意的。其实，这里追求的是，界面能够引导用户的视觉流，跟随着设计逻辑（与界面角色和功能相关）进行。界面风格统一（自然）界面风格的统一有三方面内容：产品目标、硬件（设备）、用户习惯。与产品目标、核心功能的传达一致。产品目标决定了界面中的元素和元素间的主次关系，理解了产品目标、核心功能，再开始用户界面的设计。与硬件（设备）的设计风格一致。如iOS6、iOS7、WP10平台，不同平台手机、平板、PC的界面，都是要分别进行设计的（功能实现、手势操作等都有区别），这个是基础。与用户习惯（印象）的风格一致。主要指用户元素的设计，如用户印象里“齿轮”表示“设置”功能，“头像”表示个人中心功能，用户界面设计时应当充分考虑这点。如果你觉得有更好的表意，也不妨尝试。不过，有句话说的好，打破规则前要清楚规则是什么。用户界面设计的流程是怎样的？用户界面设计的流程，其实就是设计原则中的任务项的倒叙排列。如下：“理解产品目标及核心功能→根据不同硬件设备分别设计→根据用户习惯选择元素→优化界面逻辑→精简界面元素→突出核心功能→初稿→用户测试→修改初稿→确定用户界面→提交设计”。1、理解产品目标及核心功能（与产品经理沟通）2、根据不同硬件设备分别设计（平台属性、支持手势等）3、根据用户习惯选择元素（与用研工程师沟通）4、优化界面逻辑5、精简界面元素6、突出核心功能7、用户测试8、修改初稿9、提交设计综上，和产品经理一样，视觉设计师也应该要有较强的沟通能力，最好也有瞬间变用户的能力。好的用户界面是什么样子？雅虎天气网易云音乐我们试着总结，优秀的用户界面设计，通常有以下特征：1、引导用户视觉2、配色合理（与产品功能相符、色彩搭配科学）3、考虑用户场景用户界面的好坏，最终还是要用产品说话，要让用户评价的。所以，如果你要问好的用户界面在哪里？其实，它们就在App Store排行榜上，就在你的手机和电脑上。美无止境，用户界面设计也是如此；源于生活，归于自然，去发现吧！
登录百度帐号推荐应用}