app项目经验总结

我写app的10条小经验:

1、关于整体布局:app项目可以不使用bootstrap,不使用jquery mobile等框架,直接当作普通的pc端来写,但是一定要注意响应式布局,因为手机的尺寸实在太多,必须要保证各种分辨率下都要能够正常显示。
     所以,要多用百分比等相对单位,少用浮动,先打好脚手架,保证整体布局在页面放大缩小后不会乱。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

修改:app项目的布局还是用bootstrap,为了提高开发效率和协同开发时样式的一致性(比如按钮,大家都用class=”btn”,样式统一)。

补充:页面整体布局可以使用table,起码可以保证一点,不容易错位!

2、关于文本域的问题:app好多地方是要用到文本域(textarea),但是同时又要求高度可以自适应,这时候就只能通过div(contenteditable)来模拟,js来控制字数。

3、关于文本显示问题:因为app特点是区域很小,静态页面是一个展示完好的样式,但是后台因为业务需要,很可能会添加大量的文字、图片,这时候很可能就都乱掉了。反之,静态页面上的少量数据,在实际业务中也可能删除掉了,也要保证可以正常显示(这是高度不能只靠内容撑起来,还有有heigtht/min-hieght)。
     所以,写静态页面时也要考虑,图片框高度自适应,文本显示框(hight:auto;min-height:xxx;),超出范围处理(text-overflow:ellipsis).

4、所有的app都不要头部(header),因为app有自带的头部,所以不管ui的头部样式设计多好看,不去写它,头部如果存在一些功能按钮(ui未必知道这些),全部移到页面上(为避免影响整体布局,可以改为浮动按钮,或可贴边显示)。

5、关于字体,颜色:各个页面字体样式一定要统一,app字体一般都是微软雅黑,字号14,一些地方大小可做适当调整,一般不用#000黑色,用#333/#666替代,背景边框灰色一般用#ddd/#fefefe,标题加粗,表单元素的placehoder属性统一设置(为了美观,设置比浏览器默认颜色再浅一点):这里写图片描述

 ::-webkit-input-placeholder { /* WebKit browsers */
            color:    #aaa;
            font-weight: normal;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    #aaa;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    #aaa;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color:    #aaa;
        }

6、页面之间的跳转和传值:这个前端最好不要写,因为后端在开发时都要改掉,写这些js功能还不如直接写死传值后的样式。为了不影响a链接的跳转功能和默认样式,统一设置:

href="###"
或href="javascript:;"
或href="javascript:void(0)"

7、下拉框和弹出菜单:下拉框可以统一使用slideToggle(),弹出框样式风格要统一,切换按钮统一使用witch toggle,input输入框的日历图片,和input位置的其他缩略图统一设为背景图(注意:必须给个高度,否则一旦input输入框的值被清除,背景图只能显示一部分,而且在电脑上面还显示不了,只有app能见到问题)

8、按钮的居中显示:全部用margin:0 auto;不要使用position:absolute/relative配合left/right偏移,否则各分辨率的手机下显示位置有问题。

9、关于插件:上传图片带预览效果、名单通讯录、点击查看大图、操作失败提示框(art.dialog)….这些不要自己写,因为自己写了很烦琐,样式可能也不够完美,而且可能会存在很多bug,这些功能最好使用成熟的插件(app日历若只需显示年月日,则用html5自带的type=“date”就行,pc端要用日历插件,注意功能,是否需要显示时分秒)。

10、考虑手机的特殊性,界面小,一些小按钮是不方便点击的,所以要设置成点击某一大块区域都可以触发该单击事件,比如改成点击该整行都可以选中按钮。有些弹出框,要能够实现点击屏幕任意地方都能被关闭。

其他,用户体验:自己写完静态页面,发到手机上测试,看看还有哪些需要完善的地方(从各种角度找问题,务必追求样式细节做到极致,完美在完美!)

补充:如果可能,使用jQuery mobile来实现ui,用zeptoJs来实现功能逻辑,也许会使得app更加完美。

一句话来结尾,做出来的页面是一个让人赏心悦目的艺术品,而不是让人吐槽的残次品!

app所有页面通用css样式:

@CHARSET "UTF-8";
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
fieldset,img{ border: 0; }
:focus{ outline: 0; }
address,caption,cite,code,dfn,em,th,var,optgroup{ font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; }
abbr,acronym{ border: 0; font-variant: normal; }
code,kbd,samp,tt{ font-size: 100%; }
input,button,textarea,select{ *font-size: 100%; border:none;}
body{ background:#fff; color:#5e5e5e; font: 14px/2em Microsoft YaHei,SimSun,Arial;}
ol,ul{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th{ text-align: left; }
sup,sub{ font-size: 100%; vertical-align: baseline; }
:link, :visited, ins{ text-decoration: none; }
blockquote,q{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
a:link, a:visited{color:#5e5e5e;}
a:hover { color:#4399b4;text-decoration:none;}
a:active { color: #666;}
.clearfix:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.l{float:left;}
.r{float:right;}
.clear{ height:0; overflow:hidden; clear:both}
.hide{display:none;}
.btn.hide{display:none;}
a.hidefocus { outline: none; }
button.hidefocus::-moz-focus-inner { border:none; }
a:focus {outline:none;-moz-outline:none;}
input,textarea {outline:none;}
h2 { font-size: 20px; }
h3 { font-size: 16px; line-height: 32px; }
h5 { font-size: 14px; line-height: 28px; }
select,select option{cursor:pointer;}
td{word-break:break-all; word-wrap:break-word;}
.l{float:left;}
.r{float:right;}
.inline{display:inline-block;}
.gray{background:#ebebeb;}
input.checkbox, input.radio{cursor:pointer;}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #aaa;
    font-weight: normal;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #aaa;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #aaa;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #aaa;
}
input[type="radio"]{cursor:pointer;}
input[type="checkbox"]{cursor:pointer;margin-top:8px;}
.table-border{border:1px solid #ddd;}
.table-noborder>tbody>tr>td, .table-noborder>tbody>tr>th, .table-noborder>tfoot>tr>td, .table-noborder>tfoot>tr>th, .table-noborder>thead>tr>td, .table-noborder>thead>tr>th{border:0;}
a.btn-blue{background:#18b7fa;color:#fff;}
a.btn-yellow{background:#ff9624;color:#fff;}
a.btn-blue:hover, a.btn-yellow:hover,a.btn-red:hover{color:#fff;}







小白写的不对或者不全,欢迎您的斧正和补充。


谢谢阅读!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值