基于IOS的唯美之家设计与实现社区设计师设计.docx
- 文档编号:25993775
- 上传时间:2023-06-17
- 格式:DOCX
- 页数:28
- 大小:1.31MB
基于IOS的唯美之家设计与实现社区设计师设计.docx
《基于IOS的唯美之家设计与实现社区设计师设计.docx》由会员分享,可在线阅读,更多相关《基于IOS的唯美之家设计与实现社区设计师设计.docx(28页珍藏版)》请在冰豆网上搜索。
基于IOS的唯美之家设计与实现社区设计师设计
基于IOS的唯美之家设计与实现
—社区、设计师设计
摘要
论文设计并实现了一个基于iOS平台的手机装修设计软件。
论文对基于iOS的手机APP客户端进行了需求分析,主要介绍了IOS唯美之家的社区设计、设计师等设计的设计内容,并对系统可能存在的问题及解决方案进行了探讨。
系统可对设计师风格、设计师作品、装修社区的多方位交流等进行综合展示及沟通。
关键词:
iOS;唯美之家;社区;设计师设计
目录
摘要I
AbstractII
1绪论1
1.1开发背景和意义1
1.2国内外研究现状1
1.3研究的主要目的和意义1
2系统开发技术概述3
2.1iOS系统3
2.2iOS层次结构3
2.3iOS框架结构4
2.4OC语言5
2.5MVC设计模式6
3客户端总体设计8
3.1总体设计8
3.2客户端UI设计8
3.2.1主界面9
3.2.2浏览界面9
3.2.3灵感界面10
3.2.4社区界面10
3.2.5设计师界面10
3.2.6我界面11
4客户端详细设计与实现12
4.1主界面的设计与实现12
4.2灵感画册的设计与实现13
4.3社区的设计与实现14
4.4设计师的设计与实现16
4.5软件设置界面的设计与实现17
5系统测试19
5.1不同版本的苹果手机兼容性测试19
5.2系统功能测试19
5.2.1社区界面展示测试19
5.2.2设计师界面展示测试21
5.3小结22
6结论23
参考文献25
1绪论
1.1开发背景和意义
app迅速发展是一个全球现象,而作为未来增长的重点区域,中国将表现出更加强大的潜力,尤其是在部分传统装修公司逐渐“觉醒后”,装修公司手机APP开发将水涨船高,成为装修公司抢占移动市场先机的重要手段。
正是基于这样的市场环境,装修APP应用。
“作为一种有效的营销工具,App已成为企业在移动终端的竞争平台,并与微博、微信构成新媒体营销的‘三驾马车’。
每个装修公司都应该看到企业App的巨大营销价值,实现装修公司与业主的零距离绑定,抢夺移动互联营销的先机。
”装修公司App包括装修公司介绍、装修公司案例展示、团队风采、装修公司企业新闻、招聘等内容,以其完善、便捷、多样、高效的移动营销新方式,不仅提升了装修公司品牌形象,实现公司广告展示、客户服务等诉求,其提供的服务通道更以流程化的操作,轻松实现企业移动电商,直接促进了销售。
1.2国内外研究现状
在国外的年轻人中,APP的家装软件十分流行,他们可以通过APP的模块,直接拼接出自己想要的装修效果图,然后发给装修公司直接施工。
这种傻瓜式的装修模式,尽管选择不多,却减少了用户在选择中的耗费,因为在快节奏的当下极受欢迎。
我国网民上网设备中,手机使用率达83.4%,首次超越传统PC整体使用率(80.9%),手机作为第一大上网终端设备的地位更加巩固。
同时网民在手机电子商务类、休闲娱乐类、信息获取类、交通沟流类等应用的使用率都在快速增长,移动互联网带动整体互联网各类应用发展。
移动互联网的稳定快速发展,带动APP移动应用行业的迅速崛起
1.3研究的主要目的和意义
唯美之家打造了家居装饰APP的新概念,带给客户不同以往的家居装饰体验。
更值得一提的是相比于传统的营销模式,唯美之家能够更确切的了解用户的需求,而商家也会为用户提供专业的客服来帮助用户解决问题,这与传统的家居装饰完全不同。
在专业团队的帮助下,用户会装饰出更贴近自己理想的家居风格。
现在装修类APP也渐渐多了,这有什么好处?
就是把设计师搬到了APP上,因此,使用APP交流家装问题是设计师与用户共同的诉求,而借助于微信、qq交流,又不便于展示设计作品。
加入了讨论区设计,用户交流平台展示;用于展示交流心得,展示装修图片等等,按城市选择设计师;按热门、活跃度查找设计师。
2系统开发技术概述
2.1iOS系统
iOS是运行于iPhone、iPodtouch以及iPad设备的操作系统,它管理设备硬件并为手机本地应用程序的实现提供基础技术。
根据设备不同,操作系统具有不同的系统应用程序,例如Phone、Mail以及Safari,这些应用程序可以为用户提供标准系统服务。
iPhoneSDK包含开发、安装及运行本地应用程序所需的工具和接口。
本地应用程序使用iOS系统框架和Objective-C语言进行构建,并且直接运行于iOS设备。
它与web应用程序不同,一是它位于所安装的设备上,二是不管是否有网络连接它都能运行。
可以说本地应用程序和其他系统应用程序具有相同地位。
本地应用程序和用户数据都可以通过iTunes同步到用户计算机。
2.2iOS层次结构
iOS层次结构如图2-1所示。
图2-1iOS层次结构图
(1)CoreOS核心层
包含AccelerateFramework、ExternalAccessoryFramework、SecurityFramework、System等几个框架,基本都是基于c语言的接口。
(2)CoreServices核心服务层
包含AddressBookFramework、CFNetworkFramework、CoreDataFramework、CoreFoundationFramework、CoreLocationFramework、CoreMediaFramework、CoreTelephonyFramework、EventKitFramework、FoundationFramework、MobileCoreServicesFramework、QuickLookFramework、StoreKitFramework、SystemConfigurationFramework、BlockObjects、GrandCentralDispatch 、InAppPurchase、LocationServices、SQLite、XMLSupport等一些框架,也基本都是基于c语言的接口。
(3)Mediah媒体层
包含CoreGraphics、CoreAnimation、OpenGLES、CoreText、ImageI/O、AssetsLibraryFramework、MediaPlayerFramework、AVFoundation、OpenAL、CoreAudioFrameworks、CoreMedia等等。
(4)CocoaTouch触摸层
包括AddressBookUIFramework、EventKitUIFramework、GameKitFramework、iAdFramework、MapKitFramework、MessageUIFramework、UIKitFramework等等,这一层基本都是基于Objective-c的接口。
2.3iOS框架结构
图2-2显示了iOS主要的分层结构。
iOS应用程序主要基于Foundation和UDCit框架。
下面具体介绍iOS提供的主要框架。
图2-2iOS分层结构图
(1)Foundation框架
所有的应用程序的基本系统服务由Foundation框架提供,包括UIKit在内的其它的框架都是建立在Foundation框架上面的;利用Object-C对CoreFoundation框架里许多特性的封装,形成了Foundation框架。
(2)UIKit框架
UIKit框架(UIKit.framework)的Objective-C编程接口为实现iOS应用程序的图形及事件驱动提供关键基础。
iOS系统所有程序都需要通过该框架实现下述核心功能:
应用程序管理、用户界面管理、图形和窗口支持多任务支持处理触摸及移动事件。
代表标准系统视图和控件的对象文本和web内容相关操作剪切、复制以及粘贴使用动画显示用户界面内容,通过URL方式将其他应用程序整合到系统苹果推送通知服务支持,请查看“苹果推送通知服务”为残疾用户提供辅助功能,本地通知的调度和发送创建PDF使用定制输入视图(其行为类似系统键盘)
创建和系统键盘进行交互的定制文本视图除了链编至应用程序的基础代码,UIKit还为下述和设备紧密相连的功能提供支持:
加速器数据内置相机(存在相机的设备)用户的图片库设备名称和模型信息电池状态信息、距离感应器信息来自绑定听筒的远程控制信息。
(3)CoreData框架
CoreData框架负责管理应用程序的数据模型,它提供对象的管理,使用CoreData可以创建模型对象,并管理这些对象,管理这些对象间的联系并修改数据[12]。
通过CoreData提供的内建SQLlite技术可以高效的管理数据。
(4)CoreGraphics框架
高质量的图形对于所有的iOS应用程序都是很重要的,CoreGraphics框架就是负责帮助创建图形,在iOS中,使用UIKit框架提供的基于预渲染图形的视图和控件,然后让UIKit和iOS完成绘制是最简单且最快捷的创建图形的方式。
不过当需要创建复杂的图形时,CoreGraphics则提供了更底层的库来帮助实现。
(5)CoreAnimation框架
CoreAnimation允许创建高级的动画和虚拟效果,UIKit提供建立在CoreAnimation之上的动画,如果需要比UIKit能力更高级的功能,可以直接使用Core“Animation,CoreAnimation接口包含在QuartzCore框架里。
使用CoreAnimation可以创建嵌套的对象,并且可以对它们操作、旋转、缩放和转换,使用Coreanimation,可以创建动态的用户界面而不用使用更底层的图形API,iuOpenGLES。
(6)OpenGLES框架
OpenGLES框架提供2D和3D绘图工具,支持2D和3D绘图,Apple的OpenGLES实现通过硬件提供了高速的全屏游戏式的应用程序。
2.4OC语言
OC是一种通用的面向对象的编程语言,它扩展了ANSI C编程语言,将SmallTalk式的消息传递机制加入到ANSI C中。
它是苹果的OS X(X表示第十代)和IOS操作系统,及其相关的API、Cocoa和Cocoa Touch的主要编程语言。
这两款开源的世界著名数据库管理系统来讲,它的处理速度比他们都快。
2.5MVC设计模式
模型-视图-控制器(Model-View-Controller,MVC)是XeroxPARC在20世纪80年代为编程语言Smalltalk-80发明的一种软件设计模式,至今已广泛应用于用户交互应用程序中。
图2-3MVC关系图
●模型对象
模型对象封装了应用程序的数据,并定义操控和处理该数据的逻辑和运算。
例如,模型对象可能是表示游戏中的角色或地址簿中的联系人。
用户在视图层中所进行的创建或修改数据的操作,通过控制器对象传达出去,最终会创建或更新模型对象。
模型对象更改时(例如通过网络连接接收到新数据),它通知控制器对象,控制器对象更新相应的视图对象。
●视图对象
视图对象是应用程序中用户可以看见的对象。
视图对象知道如何将自己绘制出来,并可能对用户的操作作出响应。
视图对象的主要目的,就是显示来自应用程序模型对象的数据,并使该数据可被编辑。
尽管如此,在MVC应用程序中,视图对象通常与模型对象分离。
在iOS应用程序开发中,所有的控件、窗口等都继承自UIView,对应MVC中的V。
UIView及其子类主要负责UI的实现,而UIView所产生的事件都可以采用委托的方式,交给UIViewController实现。
●控制器对象
在应用程序的一个或多个视图对象和一个或多个模型对象之间,控制器对象充当媒介。
控制器对象因此是同步管道程序,通过它,视图对象了解模型对象的更改,反之亦然。
控制器对象还可以为应用程序执行设置和协调任务,并管理其他对象的生命周期。
控制器对象解释在视图对象中进行的用户操作,并将新的或更改过的数据传达给模型对象。
模型对象更改时,一个控制器对象会将新的模型数据传达给视图对象,以便视图对象可以显示它。
对于不同的UIView,有相应的UIViewController,对应MVC中的C。
例如在iOS上常用的UITableView,它所对应的Controller就是UITableViewController。
Model和View永远不能相互通信,只能通过Controller传递。
Controller可以直接与Model对话(读写调用Model),Model通过Notification和KVO机制与Controller间接通信。
Controller可以直接与View对话,通过outlet,直接操作View,outlet直接对应到View中的控件,View通过action向Controller报告事件的发生(如用户Touch我了)。
Controller是View的直接数据源(数据很可能是Controller从Model中取得并经过加工了)。
Controller是View的代理(delegate),以同步View与Controller。
3客户端总体设计
3.1总体设计
图4-1展示了客户端的总体架构,在设计客户端的时候,保持了MVC三层架构和MVC的设计原则。
客户端View层包括各种UI界面,包括Cocoa框架提供的一些View,如表视图UITableView等,还包括了自定义的视图,比如网格视图、列表单元格视图等等。
在Controller层主要是以ViewController为父类的多种控制类,ViewController是iOS应用程序中非常重要的部分,是应用程序和视图之间的重要桥梁,既要管理应用中的众多视图,又需要和数据模型做交互。
在model层,主要包括了一些实体类、propertylist文件、本地数据库以及本地文件等。
图3-1客户端构架图
3.2客户端UI设计
一款应用UI界面的作用不仅仅是给用户提供一个易操作的界面,更重要的是,好的UI可以给用户留下一个好的第一印象。
在界面的设计过程中,要尽量站在用户的角度来考虑,要遵循简单原则、友善原则、容错原则、习惯原则、把握行为以及心理因素原则等等,要尽量使UI设计的很自然,让用户用起来得心应手,并在保证美观性的同时,也要保证设计的安全性、可靠性等等。
如图3-2所示,在进行UI设计时,需要符合UI设计的一些通用性规范,主要使用了侧边菜单栏和navigation导航栏结合的方式进行导航。
图3-2客户端设计图
3.2.1主界面
用户在进入主界面之后,主要包括了三个组成部分:
(1)底边菜单栏,分别有浏览、灵感、社区、设计师、我五个按钮,点击不同的按钮就可以进入不同的页面,浏览自己想要的信息。
(2)顶部导航栏,根据点击底边菜单栏的按钮,则会转换为不同的导航栏按钮,随之产生不同的的信息。
(3)中间部分则是展示的地方,当点击不同的按钮时,中间展示部分则会展示出不同的图片和文字信息,用户可以浏览精美装修的图片或者是其他用户上传的装修图片。
3.2.2浏览界面
浏览界面一级页面的标签按钮在页面顶部,点击精选按钮,跳转到主界面。
点击作品按钮则进入各种设计的作品的界面,在此页面的右上角有一个四格按钮,点击后进入按需求选择类型的界面,用户可以通过选择面积、户型来浏览自己所需要的作品,点击左上角Back按钮返回上一级页面。
点击晒家按钮,进入用户自己上传的家居装修的界面,用户可以选择自己喜欢的装修点击进去进行详细的浏览,也可以评论和分享。
右上角的四格按钮点击进入分类浏览界面。
3.2.3灵感界面
该界面是用户或设计师上传的局部详细设计的照片,用户可以在此界面浏览各个环境或角落的精彩设计。
右上角的四格按钮点击后进入分类筛选的界面,在此界面,用户可以按照空间、主题、局部、装饰、家具关键词进行选择性浏览。
点击左上角灵感画册的按钮则可以返回上一级页面。
3.2.4社区界面
该界面的顶部有三个按钮,分别是房主日记,讨讨论区以及选择排序按钮。
点击房主日记的按钮后,出现的界面是其他用户上传的自己在装修时的每天的记录,用户可以浏览其他用户在装修时的各种情况。
当点击某一个日记的时候,则会进入此日记的详细内容的界面,用户可以在此界面浏览上传用户在不同时间的装修情况及想法,用户也可以对每篇日记进行评论。
左上角的Back点击后返回上一级页面,右上角的是分享按钮,用户可以分享该日记。
点击讨论区按钮,进入讨论界面,在该页面,用户可以上传自己的装修情况和问题与其他用户进行讨论。
3.2.5设计师界面
用户在点击设计师按钮后进入到设计师界面,在该页面用户可以浏览设计师和设计师的作品。
页面左上角的城市按钮点击后可以选择所属城市的设计师。
当用户选择某一个设计师后,点击进入该设计师的详细介绍页面,在详细介绍页面,用户可以欣赏设计师的做品画册。
在页面顶部有设计师的头像和其以验证过的作品,预约人数以及客户评价数量。
在设计师头像下方则有服务介绍和关于设计师,点击任何一个则会进入设计师的信息介绍及收费情况页面。
点击左上角的按钮便会返回上一级页面。
3.2.6我界面
在我界面,分为三个部分:
清理缓存、关于我们、退出登录。
(1)清理缓存,用来清理图片缓存。
(2)关于我们,用来展示客户端版权、版本号以及开发者的信息。
(3)退出登录,用来退出当前登录的账号。
4客户端详细设计与实现
4.1主界面的设计与实现
打开客户端,首先进入的是主界面,主界面如图4-1所示。
图4-1主界面视图
正上方是一个segmentControl,一次只能激活其中一个按钮,屏幕上显示的内容会根据激活的按钮发生变化,分别展示精选、作品、晒家。
界面的主要部分是一个collectionView,用来展示装修作品,点击单元格进装修详情页。
主要代码:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
HomeGoodController * good = [[HomeGoodController alloc] init];
good.title = @"精选";
HomeWorkController * work = [[HomeWorkController alloc] init];
work.title = @"作品";
HomeShowController * show = [[HomeShowController alloc] init];
show.title = @"晒家";
4.2灵感画册的设计与实现
如图4-2所示,这里用的是tableView,中间的单元格是一系列UITableViewCell对象,表中的每一行内容都是在UITableView中放置的。
每个单元格是一个自定义的imageItem,用来展示受欢迎的设计的照片,每个照片的下方是一个Label,展示每个画册的介绍和名称。
点击单元格进入更详细的二级分类页面,用于浏览该画册的更详细的信息。
图4-2灵感画册风格视图
主要代码:
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"画册";
self.photoList = [NSMutableArray array];
// Do any additional setup after loading the view.
UICollectionViewFlowLayout * layout = (UICollectionViewFlowLayout *)self.collectionViewLayout;
layout.sectionInset = UIEdgeInsetsMake(K_LEFT_MARGIN, K_LEFT_MARGIN, K_LEFT_MARGIN, K_LEFT_MARGIN);
layout.itemSize = CGSizeMake((self.view.width - 3 * K_LEFT_MARGIN) / 2, (self.collectionView.width - 3 * K_LEFT_MARGIN) / 2);
layout.minimumInteritemSpacing = K_LEFT_MARGIN;
layout.minimumLineSpacing = K_LEFT_MARGIN;
[self.collectionView registerClass:
[PhotoListCell class] forCellWithReuseIdentifier:
collectionAlbum];
__block PhotoAlbumController * album = self;
[self.collectionView addFooterWithCallback:
^{
album.page += 1;
[album getURL];
}];
}
- (void)setUser_id:
(NSString *)user_id
{
if (_user_id !
= user_id) {
[_user_id release];
_user_id = [user_id retain];
if (_user_id) {
[self getURL];
}
}
}
- (void)setTag:
(NSString *)tag
{
if (_tag !
= tag) {
[_tag release];
_tag = [tag retain];
if (_tag) {
[self getNewDataFromURLWithString:
[NSString stringWithFormat:
@"%@?
page=%ld&tags=%@", self.urlString, (long)self.page, self.tag]];
}
}
}
4.3社区的设计与实现
户主日记设计,展示所有登陆合住的完工照、日记、装修清单;展示浏览数、点赞的人数以及评论内容等等;按本周最热,最近更新对户主日记进行排序展示;
讨论区设计,用户交流平台展示;用于展示交流心得,展示装修图片等等;按本周最热,最近更新对讨论区进行排序展示;展示对某个帖子浏览量和平评论界面如图4-3所示。
图4-3社区界面
主要代码:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
Community
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 IOS 唯美 设计 实现 社区 设计师