怎样设计UI界面

用户界面，是系统和用户之间进行交互和信息交换的媒介。界面的好坏决定用户对软件的第一印象。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏 惧与放弃中付诸东流。因此，用户界面的设计是软件开发中十分重要的一环。

用户界面的设计需要遵循以下原则：（http://www.cocoachina.com/bbs/read.php?tid-19297.html）

1. 易用性：界面显示名称应该易懂，用词准确，屏弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
2. 规范性：界面设计按照软件用户界面的设计标准来设计。界面遵循规范化的程度越高，则易用性相应的就越好。
3. 帮助设施：系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。
4. 合理性：屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。
5. 美学与协调性：界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。
6. 独特性：如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。

我们小组因工作需要，要对微软的学术搜索中的学术地图功能（http://academic.research.microsoft.com/AcademicMap）进行改进和界面设计。增加如下功能：

1. 显示会议的功能
2. 让用户可以改变作者显示的次序——发表数或引用数
3. 搜索功能：允许用户搜索作者或地理位置（城市、街道等）
4. 支持“后退”按钮，让用户查看曾经选择过的组织
5. 根据IP地址显示用户的位置

需要对这些功能进行整合。整体界面设计如下草图所示：

 

 

主界面功能简介明了，进入应用时，自动根据用户IP定位到用户所在位置，将用户所在位置定位到地图中心。在地图图层之上，有以下几个部分：

1. 导航按钮：可以进行地图的上下左右、缩放操作，位于界面的左侧偏上位置，比较醒目，方便用户操作。界面设计仿照了谷歌地图，直接浮动于地图之上，没有面板的束缚。
2. 搜索框：位于界面的正上方，包含一个自动补全的文本框和一个搜索按钮。此搜索功能整合了机构名、作者名和地名的搜索，当输入一串文字时，将出现自动补全的结果，按照机构、作者、地理位置归类。用户可通过上下按键选择补全框中的每一项。针对重名的情况，补全框里会通过额外的信息来区分两个重名的项。输入完毕之后，用户可以通过回车或鼠标点击使地图定位到选中的位置，如果搜索的是机构名，要保证这个机构在地图上显示出来；如果输入的是作者名，要将作者所在机构连同作者显示在地图上；
   
3. 机构/会议切换按钮：位于界面右上角，与复选框功能相同，为了美观，设计成立体的两个半按钮形式，凹进表示选中。在选中组织或会议的状态下，地图上会用不同大小和颜色的圆圈在相应的地理位置显示各个组织/会议；
4. 设置按钮：位于界面左下角不太醒目的位置，设计成齿轮的形状。点击之后可以弹出一个选择学科领域的对话框。以过滤显示特定学科的组织/会议。这个按钮这样设计的原因，是考虑到用户使用这个功能的频率不高，只需要一开始时让用户设置一次即可，不要太多地分散用户的注意力。

在显示组织的模式下，地图上的圆圈可能代表一个或多个组织（如果一个地区有多个同等且较大规模的组织，会合并在一起，点击圆圈的时候分散成几个圆圈）。点击一个组织的圆圈后，应用会切换到组织详情的视图，此视图叠加在地图之上，加上一个半透明的纯色背景，弱化背景地图的颜色，突出画面的中心。正中心显示组织的图片和名称，以螺旋状显示组织中的各个作者的照片和名字。

 

此外，该界面中还含有以下两个功能：

1. 左上角有一个大大的后退按钮，可以返回上一次浏览的组织，切换可以有一个动画效果：当前组织向屏幕右方飞出，旧组织从左侧进入。进入旧组织之后，后退按钮的右边还会增加一个前进按钮，返回后退前的组织；
2. 右上角有一个与排序的选择按钮，风格和主界面上组织的选择按钮风格完全相同。点击之后，每个作者的圆圈下方的名字会消失，圆圈之间的连线也会消失，之后这些圆圈发生移动重排（不在需要的圆圈移动到中心的组织处，新增加的圆圈从中间移动出来），最后重新显示这些作者的名字以及连线。

转载于:https://www.cnblogs.com/OMG-Team/archive/2011/11/07/2239018.html