淘宝手机网站区域选择交互优化
淘宝手机网站的区域选择效果，属于那种“看起来简单，用起来舒服，做起来不省心”的功能。你别看它只是个下拉列表或者滑动面板，背后可有不少门道，是定位、数据结构这些，不好用户体验就割裂。用到了HTML5 地理定位、异步加载、响应式布局，还有交互设计和性能优化这几块都挺关键。
地理位置的默认定位，基本都是调设备 GPS 或 IP 来的，前端要和地图服务对接，像高德、百度这些都比较常见。你写的时候记得加个容错兜底，比如定位失败的时候给个手动选择的选项，用户体验好不少。
交互上就更讲究了，别只想着用草草了事，像搜索框加联想、滑动选择这种也挺流行的。操作反馈要明确，比如选择了某市，区县马上刷出来，响应也快，用户才不烦。
地区数据嘛，一般按省市区三级结构走，树形数据搞起来最顺手。加载的时候建议用懒加载，就点开哪个才加载哪个，省内存、快响应，尤其移动端资源紧张。
前端实现上，核心用JavaScript来监听和事件，Ajax拉数据，不刷新就能换城市。再配上Flexbox或者Grid，响应式布局一下，手机屏幕上表现也不错。
哦对了，还有安全，别忘了地理位置属于敏感信息，一定记得用HTTPS，接口也做好权限控制。上线前多测几轮，是 iOS 和安卓的兼容性，坑还挺多的。
如果你最近在搞移动电商相关项目，这个效果还挺值得拆解学习一下的。有几个相关文章也蛮有用，像geolocation 地理定位和H5 版交互设计规范，可以顺便看看。
下载地址
用户评论
