浅谈按钮分组和位置

《浅谈按钮分组和位置》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、按钮分组按钮的分组可以让一个界面变得具有自我描述能力.在复杂的布局中，组织良好的各组按钮用以选择，而且因为很明显，这样可以很快告诉用户有哪些功能可以使用。几个按钮放在一起，因为它们可能完成类似的功能。我们可以看范例iTunes的主窗口，四个角分别放置了一组按钮，界面中间的歌曲也有很多的行动点。加上滚动条，该界面只有有14个按钮。确实有很多的功能，不过因为视觉上和语言上的巧妙组合，并不会给用户很乱的感觉。制定“阿里助手”视觉规范的吋候运用的就是视觉相似性归类，假若这组按钮大小都一致，那么看起来就是一个整体，合适的大小和对齐可

2、以帮助一组按钮组成一个大一些的组合图形。分组按照按钮的功能来分，设计上以颜色，大小来区分，为了页面的整体性，质感我们都保持一致的。用简短而又含义明确的动词或者动词短语作为标签，如果用八不需要的时候不要使用高深的专门用语。以后台页面的按钮为例，一级按钮和二级按钮尺寸大小规格都是一致的，只要就是以颜色來区分（整张页面中橙色的按钮至多出现一个）。下面红框部分的为表单列表中的按钮。标准标题栏按钮订unesFileEditControlsVisuaiizerAdvancedHelpImporting*SendYourLove"Tim

3、eArtistH.▲Name一SearchAlbumImportCDGenreB

4、/

5、LibraryfPodcastsVVideos鲁PartyShuffle牙RadioQ/iMusicStore@SacredLove对节目列表的撫作8910108px岁Inside餌SendYourLov(弓WheneverISaame色DeadMan'sRo岁NeverComingI弓StolenCar仃alncing)ForgetAboutTe号ThisWar0TheBookOfM-岁SacredLoveESendYourLovAud

6、ere...ooooooooooo4:474:385:275:434:593:585:125:306:166:023:15StingOSacredLoveStingFeat.Vicent...OSacredLoveStingFeat•Mary…OSacredLoveStingOSacredLoveStingOSacredLoveStingOSacredLoveStingOSacredLoveStingOSacredLoveStingFeat.Anous…QSacredLoveStingOSacredLoveStingOSa

7、credLove11songs,55.7minutes,564MBRockRockRockRockRockRockRockRockRockRockRock苴他操作二敦览并发布］坯次匚JJr"F"16px16px•—字体：14px宋体加粗硕色：#934002每张页面不能多于3个一级按钮具有导航性贯次级按钮用灰色表示•—字体:12px宋体55色：#0066cc一般运用在表单里面的撫作按钮＞特殊IS况下用蓝色色区分32px32px正常状态鼠标经过状态预览并发布预览并发布发布信息发布信息22px22px22px置灰状态进入商铺新建

8、报价单新逹报价单按钮的位置1.视觉流向用户浏览页面的视觉流向通常是从左上至右下的一条弧线，我们可以看到通常浏览器的操作都是在右侧，关闭I缩小I滚动条等等。符合视觉流向通常情况下，我们会将按钮安排在相同的对象右边，或者是下面，但是复杂界面元素的底部一般是用户的“盲点”。我们将影响整个页面或者对话框的按钮，确认I収消I下一页I保存这样类按钮设置在弹出框的右侧有很好的扩展性，左侧可以添加帮助按钮，这样有助于功能的区域划分。如果按钮都有自己的小图标，类似用于表单，列表中，可以将它们放在工具条或者类似工具条狭长的区域上，通常在页面的

9、顶部。FileEditViewFavoritesToolsHelp5O?CJMicrosoftCorporationDeletebrowsinghistory...Diagnoseconnectionproblems...Pop-upblocker►Phishingfilter►Manageadd-ons►WorkofflineWindowsupdateFullscreenFll7Menubar4厨▼岭Page▼£：•Tools▼z/A/r>ToolbarsU«pr<;anGroupsUsersandgroupssett

10、ingsUsethistoolforconfiguringusersandgroupssettingstnyoursystemUsersGroups♦AddUser...Showallusersandgroups^PropertiesQeleteXcancel出QK=tTEA：在这个示例中＞选项按钮与确