首页 > 代码库 > Arcgis apis for flex项目实例—谋局篇(2):界面设计

Arcgis apis for flex项目实例—谋局篇(2):界面设计

      界面设计是谋局当中第二个任务,也是很重要的,这个和概念设计排名不分先后。合理的界面布局会给用户带来非常舒心的体验,在项目之处就能把界面风格和布局确定下来,更是可以让后面的开发事半功倍。

      First:基本布局。我们不是艺术家,不是激进派,四平八稳符合我们的风格,也符合快速开发的要求,布局就采用上天下地,左表右图的经典百度地图式布局,下面开始。

      基本元素:三个border、一个是主窗口,也就是map,一个border是网站的头部,也就是展示个名字放点图片当好看的;一个border是左侧栏,用于查询输入、结果列表显示;map不废话了。

    <s:BorderContainer id="b_left" left="0" top="80" bottom="0" width="200" backgroundColor="#98E3FF" borderWeight="2">    </s:BorderContainer>    <s:BorderContainer id="b_head" left="0" right="0" top="0" height="80" backgroundColor="#376FFC"    </s:BorderContainer>    <s:BorderContainer id="b_map" left="200" right="0" top="80" bottom="0">        <esri:Map left="200" right="0" top="84" bottom="-4"/>    </s:BorderContainer>

     头部没啥好说的,下面处理一下左侧,已经设计了是要有两种查询,关键字和行政区,两种查询需要切换的吧。上一个tab吧。

     关键字就叫景点查询吧,里面一个输入框,一个搜索按钮;行政区就叫政区导航吧,里面就是安徽省所有地级市的导航。GO~!

<mx:TabNavigator id="b_left" left="5" right="5" top="5" height="200">            <s:NavigatorContent width="100%" height="100%" label="景点查询">                <s:TextInput left="5" top="5" width="120" height="22"/>                <s:Button x="130" top="5" width="50" height="22" label="查询"/>            </s:NavigatorContent>            <s:NavigatorContent width="100%" height="100%" label="政区导航">                <s:TileGroup left="5" right="5" top="5" bottom="0">                    <mx:LinkButton width="50" label="合肥市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="蚌埠市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="淮北市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="宿州市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="淮南市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="阜阳市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="亳州市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="六安市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="滁州市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="池州市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="芜湖市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="铜陵市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="宣城市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="黄山市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="安庆市" paddingLeft="0" paddingRight="0"/>                    <mx:LinkButton width="50" label="马鞍山市" paddingLeft="0" paddingRight="0"/>                </s:TileGroup>            </s:NavigatorContent>        </mx:TabNavigator>    </s:BorderContainer>

      下面看一下地图窗口,放一个map,放一个级别控制器,放一个地图类型切换,再放一个鹰眼,这样就差不多了。级别控制器设计阶段暂时用map控件自带的,地图类型切换就是地图和影像两个按钮,鹰眼在右下角。GO~!

    <s:BorderContainer id="b_map" left="200" right="0" top="80" bottom="0">        <esri:Map left="0" right="0" top="0" bottom="0" logoVisible="false" scaleBarVisible="false"/>        <s:HGroup right="10" top="10" height="22" gap="0" verticalAlign="middle">            <s:ToggleButton width="60" label="地图" cornerRadius="0" selected="true"/>            <s:ToggleButton width="60" label="影像" cornerRadius="0"/>        </s:HGroup>        <s:BorderContainer right="0" bottom="0" width="240" height="180" backgroundAlpha="0.5"                           backgroundColor="#FF8B45" borderWeight="2">        </s:BorderContainer>    </s:BorderContainer>

       这样就好了么?没有没有,别忘了地图查询之后界面会有变化,查询结果出来的样子也设计一下吧。主要是左侧内容会变成一个列表,而右边地图要有一个infowindow,GO~!

        <!--左边-->        <s:BorderContainer left="5" right="5" top="5" bottom="5">            <s:layout>                <s:VerticalLayout/>            </s:layout>            <s:Group width="100%" height="30">                <s:Label x="10" text="查询结果" verticalCenter="0"/>                <s:Button right="5" width="50" label="返回" verticalCenter="0"/>            </s:Group>            <s:List width="100%" height="100%">                <s:ArrayList>                    <fx:String>结果一</fx:String>                    <fx:String>结果二</fx:String>                    <fx:String>结果三</fx:String>                </s:ArrayList>            </s:List>            <s:HGroup width="100%" height="30" paddingLeft="60" verticalAlign="middle">                <s:Image source="image/StartArrow.png"/>                <s:Image source="image/LeftArrow.png"/>                <s:Label text="1/10"/>                <s:Image source="image/RightArrow.png"/>                <s:Image source="image/EndArrow.png"/>                        </s:HGroup>        </s:BorderContainer>

      地图上放的那个infowindow是自己随手画的代码无所谓了,后面开发时可以先使用arcgis自带的,有时间的话再做一个自己玩儿的。这样界面设计差不多了。下面给两张截图,这就是设计效果。

 

 

       不要觉得难看,这只是原型设计,表达出意思就可以了。谋局到此结束,接下来的文字就是开发了。最后我提两个我的经验作为谋局篇的结尾。

     (1)概念设计中的Third也就是高级篇不是必须的,但是多考虑一些,在未来需求变化或者你个人想要精益求精的时候,这个意义就体现出来了。

     (2)界面设计不一定要像我一样到IDE里去做,在纸上画草图也是不错的选择,形式可以简略,设计还是要尽量面面俱到,不然后面有好果子吃。

     (3)flex的布局尽量使用top、bottom、left、right去锚定你的组件,而不要使用x、y,界面中要活用横向、纵向布局来保持一些排列式的组件形式上整齐,这两种布局引申的HGroup和VGroup还有一些更为有趣的作用,有机会在后面秀一下。

Arcgis apis for flex项目实例—谋局篇(2):界面设计