“直男”审美?不存在的!来看看 “攻城狮”对一款IoT App的UI改造吧!

举报
涂小航说智能 发表于 2021/06/01 11:29:52 2021/06/01
【摘要】 人们一直会有一种固有思维,认为相对于男生,女生更适合做UI设计师,因为她们对色彩更加敏感、在感性思维上更有优势、在职场沟通中能更加流畅等等等等。更重要的是,相对于男性,女性的审美观更加趋向丰满。       但是,在我们 “涂鸦智能IoT App开发实战营”中,一位开发者针对智能家居App 的UI设计改造,让我们看到了男性对于浪漫和美的追求。因为作品提交时间在12月25号前后,所以整个UI界...

人们一直会有一种固有思维,认为相对于男生,女生更适合做UI设计师,因为她们对色彩更加敏感、在感性思维上更有优势、在职场沟通中能更加流畅等等等等。更重要的是,相对于男性,女性的审美观更加趋向丰满。

       但是,在我们 “涂鸦智能IoT App开发实战营”中,一位开发者针对智能家居App 的UI设计改造,让我们看到了男性对于浪漫和美的追求。因为作品提交时间在12月25号前后,所以整个UI界面的设计都是浓浓的圣诞风。

       话不多说,先上一张对比图(App启动背景图):

 

       试想,在某个节日前后,将自己设计的UI界面图更改成相应的风格,再向女神/男神表白,科学预估,在智慧女神雅典娜和爱情女神阿佛洛狄忒的双重加持下,成功率在99.99%以上!

       来一起看看具体是怎么实现的?

以下内容为涂鸦开发者“@退役熬夜选手创作,经其授权编辑发布:

 

准备工作:

       实战营的开发者们的IoT App制作是基于涂鸦提供的操作指南,先制作了一款基础的智能灯App,然后再加上自己的创意和动手能力,最后完成了一个最后专属于自己的IoT App。

     基于涂鸦 App SDK 开发一款 Android App 并控制智能灯 

     基于涂鸦App SDK 快速地开发一款 iOS IOT App

 

流程说明:

(一)App主题背景设计

1. 启动背景:

通过更改 ty_pre.png文件,修改整个启动界面,素材的主要元素有灯和圣诞花环,暗示整个APP主要为控制灯而生,与整个APP功能相协调。

 

2. APP主题背景

通过将xml文件的背景进行替换,将整个背景采用圣诞元素壁纸。

 

3. 设备界面设计

同主界面背景一样,采用了同一背景设计,将整体突兀程度降低。

 

4. 任务栏元素设计

任务栏图标进行了重新设计,图标主要来源是iconfont图标库,进行相关转换后插入到默认位置。

 

5. 滑动栏元素设计

通过修改相关xml文件,将整个滑动的原点替换为了圣诞帽,体现了圣诞节限定的特点。

 

6. 关灯元素设计

将关灯后的“灯”元素改变为“蜡烛元素”。

 

7. 模式面板元素设计

模式面板如图,也使用了圣诞相关配色。

 

(二)功能设计

       在功能上,主要的改动就是添加了模式面板,主要开发过程如下:

首先是新建了模式面板的xml文件,然后在主程序里通过对不同模式按钮的监听,实现了灯模式的切换。

1. 声明面板

声明面板类。

@BindView(R.id.fl_lamp_mode_operation)//声明一个模式操作面板@
    public View mModeView;

 

2. 注册按键响应函数

主要是按键按下后对应的响应函数。

@OnClick(R.id.ll_lamp_mode_goodnight)  
    public void onClickGoodnight() {//晚安模式@  
        mLampPresenter.LampGoodnightScene();  
    }  
  
    @OnClick(R.id.ll_lamp_mode_work)  
    public void onClickWork() {//晚安模式@  
        mLampPresenter.LampWorkScene();  
    }  
  
    @OnClick(R.id.ll_lamp_mode_read)  
    public void onClickRead() {//晚安模式@  
        mLampPresenter.LampReadScene();  
    }  
  
    @OnClick(R.id.ll_lamp_mode_casual)  
    public void onClickCasual() {//晚安模式@  
        mLampPresenter.LampCasualScene();  
    }  
  
    @OnClick(R.id.ll_lamp_work_white)  
    public void onClickWhite() {//晚安模式@  
        mLampPresenter.LampWhiteMode();  
    }  
  
    @OnClick(R.id.ll_lamp_work_color)  
    public void onClickColor() { mLampPresenter.LampColorMode(); }  
  
    @OnClick(R.id.ll_lamp_work_scene)  
    public void onClickScene() {//晚安模式@  
        mLampPresenter.LampSceneMode();  
    }  

3. 按键函数实现

主要是将对应按键实现的功能进行实现。

 /**
     * 更新灯泡模式状态 @
     */
    public void LampGoodnightScene() {
         mLightDevice.scene(LightScene.SCENE_GOODNIGHT, new IResultCallback(){
             @Override
             public void onError(String code, String error) {
             }

             @Override
             public void onSuccess() {
             }
         });
     }

    public void LampWorkScene() {
        mLightDevice.scene(LightScene.SCENE_WORK, new IResultCallback(){
            @Override
            public void onError(String code, String error) {
            }

            @Override
            public void onSuccess() {
            }
        });
    }

    public void LampReadScene() {
        mLightDevice.scene(LightScene.SCENE_READ, new IResultCallback(){
            @Override
            public void onError(String code, String error) {
            }

            @Override
            public void onSuccess() {
            }
        });
    }

    public void LampCasualScene() {
        mLightDevice.scene(LightScene.SCENE_CASUAL, new IResultCallback(){
            @Override
            public void onError(String code, String error) {
            }

            @Override
            public void onSuccess() {
            }
        });
    }
    /**
    * 灯的工作模式切换@
    */
    public void LampWhiteMode(){
        mLightDevice.workMode(LightMode.MODE_WHITE, new IResultCallback(){
            @Override
            public void onError(String code, String error) {
            }

            @Override
            public void onSuccess() {
            }
        });
    }

    public void LampColorMode(){
        mLightDevice.workMode(LightMode.MODE_COLOUR, new IResultCallback(){
            @Override
            public void onError(String code, String error) {
            }

            @Override
            public void onSuccess() {
            }
        });
    }

    public void LampSceneMode(){
        mLightDevice.workMode(LightMode.MODE_SCENE, new IResultCallback(){
            @Override
            public void onError(String code, String error) {
            }

            @Override
            public void onSuccess() {
            }
        });
    }

4. 面板切换函数

用来实现亮度、冷暖亮度面板和模式面板的切换。

@OnClick(R.id.ll_lamp_up_operation)//@
    public void onVClickArrawDown(){
        AnimationUtil.translateView(mOperationView, Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 1f, 300, false, new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        mModeView.setVisibility(View.GONE);//隐藏模式面板 @
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        mOperationView.setVisibility(View.VISIBLE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
    }

OK,以上就是制作的全流程啦~

(三)实际效果演示

我们来看看实际效果:

【涂鸦智能App SDK开发实战营】优秀作品展示_1

总结

基于安卓App开发系统的开放性,移动端迅速发展,企业开发从传统的PC端开发移动App。涂鸦智能提供的Demo工程提供了智能家居相关的开发工具包和UI业务包,大大便于开发者和相关企业快速开发出定制的智能家居App。

作为一名开发者,我深切感受到了涂鸦智能的巨大潜力,这种提供基础的App SDK开发方式为智能家具行业提供了最优的解决方案,同时将广大开发者从繁杂的劳动中解放出来,能够有更多的时间去专注于业务的开发。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200