基于IOS唯美之家设计与实现方案.docx
- 文档编号:12016710
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:29
- 大小:1.58MB
基于IOS唯美之家设计与实现方案.docx
《基于IOS唯美之家设计与实现方案.docx》由会员分享,可在线阅读,更多相关《基于IOS唯美之家设计与实现方案.docx(29页珍藏版)》请在冰豆网上搜索。
基于IOS唯美之家设计与实现方案
基于IOS唯美之家设计与实现
—装修画册、消息推送、拍照、相册设计
摘要
本文讲述了IOS唯美之家APP的主要研究内容。
这款APP所设计包含的主要内容有装修画册风格设计;装修画册空间设计;消息推送设计;拍照及相册设计。
装修画册风格设计主要内容是向用户展现不同的装修风格,例如田园,欧美,复古等。
装修画册空间设计则主要针对不同的空间进行设计,如厨房,卧室,客厅等。
消息推送则是向用户推荐可能感兴趣的装修风格或图片。
拍照及相册设计是可以使用户通过自己的手机拍摄相片并上传,或直接通过自己的相册选择相片,也可以把相片保存至相册。
关键词:
IOS;唯美之家;装修画册;消息推送;拍照;相册
1引 言
触屏手机的发展引领了手机APP应用的快速成长。
在未来几年,移动互联网的发展越来越成熟,这个天然的环境为手机APP应用软件的开发与推广提供了非常大的优势。
APP应用软件即将成为移动互联网市场中的一支潜力股。
智能手机凭借着携带方便和高端智能化的特点赢得了广大用户的好评,并且正在慢慢地影响和改变这传统企业的商务模式。
这使得原本只有功能化的手机逐渐高端智能化,并且逐渐应用于商务领域,从而使到很多企业级软件生产商将项目的研发重心转移到移动APP应用软件上面。
很多企业都开始与APP开发公司建立起长期的合作业务,定制企业专属的APP应用软件,并将APP作为其提供推广企业的品牌、挖掘开发新的消费者,甚至销售内容的渠道。
APP应用的开发与推广成为了移动互联网行业的一个巨大的市场。
唯美之家APP是家居装饰与移动互联网的一次完美结合,唯美之家APP打造了家居装饰的新概念,带给客户不同以往的家居装饰体验。
更值得一提的是相比于传统的营销模式,唯美之家APP能够更确切的了解用户的需求,而商家也会为用户提供专业的客服来帮助用户解决问题,这与传统的家居装饰完全不同。
在专业团队的帮助下,用户会装饰出更贴近自己理想的家居风格。
本文在第二章介绍相关开发技术,第三章对客户端进行需求分析,第四章详细介绍客户端的总体设计,第五章介绍客户端的详细设计与实现,第六章对本文进行总结。
2客户端需求分析
2.1总体需求分析
生活节奏的加快,今天的手机已不再是单纯的通讯工具,已经成了集通讯、音乐、电影、游戏娱乐为一体的个人便携终端。
然而科技不仅仅只是止步于此,手机的通信娱乐功能渐渐地不能够满足人们的需求。
人们希望可以在手机上完成自己所需要的事情,其中一大热门便是室内的设计及装修。
现如今我国的现状是房子等同于家,这个想法已深深地印在每个国人的思想中,买完房之后总是要装修的,但面对各种各样的设计装修公司已眼花缭乱,不知该如何选择,所以,手机室内设计装修APP就此出现。
唯美之家APP具有互联网的优势,能够将信息快速的传递给用户,在下载了客户端后,想要了解什么样的产品信息,客户只要用手轻轻一点就可以获得最新的产品信息,非常的方便快捷。
手机客户端不仅会将产品的信息传递给客户,同时也会将客户的意见或想法反馈给商家,让商家更好的了解并解决客户的需要。
唯美之家APP实现了商家与客户的零距离交流,更有利于商家提供给客户满意的商品和装修方案。
唯美之家APP不仅方便的客户,也对商家的发展更加有利。
2.2课题研究领域的发展现状
1.国外发展现状
触屏手机的发展引领了手机APP应用的快速成长。
在未来几年,移动互联网的发展越来越成熟,这个天然的环境为手机APP应用软件的开发与推广提供了非常大的优势。
APP应用软件即将成为移动互联网市场中的一支潜力股。
智能手机凭借着携带方便和高端智能化的特点赢得了广大用户的好评,并且正在慢慢地影响和改变这传统企业的商务模式。
这使得原本只有功能化的手机逐渐高端智能化,并且逐渐应用于商务领域,从而使到很多企业级软件生产商将项目的研发重心转移到移动APP应用软件上面。
很多企业都开始与APP开发公司建立起长期的合作业务,定制企业专属的APP应用软件,并将APP作为其提供推广企业的品牌、挖掘开发新的消费者,甚至销售内容的渠道。
APP应用的开发与推广成为了移动互联网行业的一个巨大的市场。
2.国内发展现状
国内的APP应用软件起步比美国等西方国家慢了一两年,但是目前其发展速度飞快,处于高速增长阶段。
现今已涌现大量优秀的APP开发公司,无论是老牌的还是创业型的,他们对APP应用软件的渴望程度十分强烈。
比较优秀的如“互联在线”,其专注于手机APP的开发与推广,移动互联网应用开发涉及苹果IOS和安卓等系统平台,智能手机APP开发的服务已涉及、酒店、美容、汽车、医疗、旅游、地产、服装、商场、娱乐、传媒等产业,致力于为企业提供一站式的移动互联网应用解决方案。
3相关开发技术
3.1iOS
iOS是iPad、iPhone、iPodtouch以及AppleTV的操作系统,iOS的界面简单易用,其功能令人惊叹,也具有极强的稳定性,这些特点是iPhone、iPad和iPodtouch的强大基础,Apple设备凭借iOS内置的众多技术和功能始终遥遥领先,保持着自己的地位,使其他对手只能望其项背。
iOS所拥有的应用程序是所有移动操作系统里面最多的,iOS平台拥有数量庞大的移动App,几乎每类App都有数千款。
3.2XCode
TheXcodesuite包含有GNUCompilerCollection自由软件(GCC、apple-darwin9-gcc-4.0.1以及apple-darwin9-gcc-4.2.1,默认的是第一个),并支持C语言、C++、Fortran、Objective-C、Objective-C++、Java、AppleScript、Python以及Ruby,还提供Cocoa、Carbon以及Java等编程模式。
协力厂商更提供了GNUPascal,FreePascal,Ada,C#,Perl,Haskell和D语言。
Xcode套件使用GDB作为其后台调试工具。
3.3OC
OC语言是一种简单的面向对象的编程语言,它的面向对象特性参考了SmallTalk-80语言。
跟C++是在同一时间段诞生的,没有借鉴C++。
用于嵌入式开发,网络服务器端开发。
它扩展了ANSI C编程语言,将SmallTalk式的消息传递机制加入到ANSI C中。
它是苹果的OS X(X表示第十代)和IOS操作系统,及其相关的API、Cocoa和Cocoa Touch的主要编程语言。
3.4MVC设计模式
MVC本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器。
使用MVC是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。
比如一批统计数据你可以分别用柱状图、饼图来表示。
C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新,MVC就是Observer设计模式的一个特例。
它强制性的使应用程序的输入、处理和输出分开。
使用MVC应用程序被分成三个核心部件:
模型、视图、控制器。
它们各自处理自己的任务。
4客户端总体设计
4.1总体设计
图4-1展示了客户端的总体架构,在设计客户端的时候,保持了MVC三层架构和MVC的设计原则。
客户端View层包括各种UI界面,包括Cocoa框架提供的一些View,如表视图UITableView等,还包括了自定义的视图,比如网格视图、列表单元格视图等等。
在Controller层主要是以ViewController为父类的多种控制类,ViewController是iOS应用程序中非常重要的部分,是应用程序和视图之间的重要桥梁,既要管理应用中的众多视图,又需要和数据模型做交互。
在model层,主要包括了一些实体类、propertylist文件、本地数据库以及本地文件等。
图4-1客户端构架图
4.2客户端UI设计
一款应用UI界面的作用不仅仅是给用户提供一个易操作的界面,更重要的是,好的UI可以给用户留下一个好的第一印象。
在界面的设计过程中,要尽量站在用户的角度来考虑,要遵循简单原则、友善原则、容错原则、习惯原则、把握行为以及心理因素原则等等,要尽量使UI设计的很自然,让用户用起来得心应手,并在保证美观性的同时,也要保证设计的安全性、可靠性等等[17]。
如图4-2所示,在进行UI设计时,需要符合UI设计的一些通用性规范,主要使用了侧边菜单栏和navigation导航栏结合的方式进行导航。
图4-2客户端总体设计图
4.2.1主界面
用户在进入主界面之后,主要包括了三个组成部分:
(1)底边菜单栏,分别有浏览、灵感、社区、设计师、我五个按钮,点击不同的按钮就可以进入不同的页面,浏览自己想要的信息。
(2)顶部导航栏,根据点击底边菜单栏的按钮,则会转换为不同的导航栏按钮,随之产生不同的的信息。
(3)中间部分则是展示的地方,当点击不同的按钮时,中间展示部分则会展示出不同的图片和文字信息,用户可以浏览精美装修的图片或者是其他用户上传的装修图片。
4.2.2浏览界面
浏览界面一级页面的标签按钮在页面顶部,点击精选按钮,跳转到主界面。
点击作品按钮则进入各种设计的作品的界面,在此页面的右上角有一个四格按钮,点击后进入按需求选择类型的界面,用户可以通过选择面积、户型来浏览自己所需要的作品,点击左上角Back按钮返回上一级页面。
点击晒家按钮,进入用户自己上传的家居装修的界面,用户可以选择自己喜欢的装修点击进去进行详细的浏览,也可以评论和分享。
右上角的四格按钮点击进入分类浏览界面。
4.2.3灵感界面
该界面是用户或设计师上传的局部详细设计的照片,用户可以在此界面浏览各个环境或角落的精彩设计。
右上角的四格按钮点击后进入分类筛选的界面,在此界面,用户可以按照空间、主题、局部、装饰、家具关键词进行选择性浏览。
点击左上角灵感画册的按钮则可以返回上一级页面。
4.2.4社区界面
该界面的顶部有三个按钮,分别是房主日记,讨讨论区以及选择排序按钮。
点击房主日记的按钮后,出现的界面是其他用户上传的自己在装修时的每天的记录,用户可以浏览其他用户在装修时的各种情况。
当点击某一个日记的时候,则会进入此日记的详细内容的界面,用户可以在此界面浏览上传用户在不同时间的装修情况及想法,用户也可以对每篇日记进行评论。
左上角的Back点击后返回上一级页面,右上角的是分享按钮,用户可以分享该日记。
点击讨论区按钮,进入讨论界面,在该页面,用户可以上传自己的装修情况和问题与其他用户进行讨论。
4.2.5设计师界面
用户在点击设计师按钮后进入到设计师界面,在该页面用户可以浏览设计师和设计师的作品。
页面左上角的城市按钮点击后可以选择所属城市的设计师。
当用户选择某一个设计师后,点击进入该设计师的详细介绍页面,在详细介绍页面,用户可以欣赏设计师的做品画册。
在页面顶部有设计师的头像和其以验证过的作品,预约人数以及客户评价数量。
在设计师头像下方则有服务介绍和关于设计师,点击任何一个则会进入设计师的信息介绍及收费情况页面。
点击左上角的按钮便会返回上一级页面。
4.2.6我界面
在我界面,分为三个部分:
清理缓存、关于我们、退出登录。
(1)清理缓存,用来清理图片缓存。
(2)关于我们,用来展示客户端版权、版本号以及开发者的信息。
(3)退出登录,用来退出当前登录的账号。
5客户端详细设计与实现
5.1装修画册的设计与实现
如图5-2所示,这里用的是tableView,中间的单元格是一系列UITableViewCell对象,表中的每一行内容都是在UITableView中放置的。
每个单元格是一个自定义的imageItem,用来展示受欢迎的设计的照片,每个照片的下方是一个Label,展示每个画册的介绍和名称。
点击单元格进入更详细的二级分类页面,用于浏览该画册的更详细的信息。
图5-1装修画册
主要代码:
- (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];
ViewController根视图控制器,其他视图控制器都是在这个rootviewcontroller的基础上push。
最下面只能放一块积木,至于这个积木是什么颜色,你需要自己定制,这就是下面的mainViewController了。
在在这之上进行下一步的搭建,在里面进行填充。
5.2风格画册选择的设计与实现
当点击左上角的风格按钮后,将会出现一个风格选择的界面,用户可以根据自己的需求和喜好来选择风格画册,如图5-2所示。
图5-2风格画册选择
主要代码:
- (UITableViewCell *)tableView:
(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath
{
UserCell *cell = [tableView dequeueReusableCellWithIdentifier:
userCell];
NSDictionary * dic = [self.userArray objectAtIndex:
indexPath.row];
[cell.image sd_setImageWithURL:
[NSURL URLWithString:
[dic objectForKey:
@"user_face"]]];
cell.image.ID = [dic objectForKey:
@"user_id"];
cell.text = [dic objectForKey:
@"user_nick"];
return cell;
}
- (void)tableView:
(UITableView *)tableView didSelectRowAtIndexPath:
(NSIndexPath *)indexPath
{
NSDictionary * dic = [self.userArray objectAtIndex:
indexPath.row];
UserController * user = [[UserController alloc] init];
user.user_id = [dic objectForKey:
@"user_id"];
[self.navigationController pushViewController:
user animated:
YES];
[user release];
}
- (CGFloat)tableView:
(UITableView *)tableView heightForFooterInSection:
(NSInteger)section
{
return 1;
}
这里用的是UITableView,中间的单元格是一系列UITableViewCell对象,表中的每一行内容都是在UITableView中放置的。
一次只能点击一个按钮,当点击后界面将会随之产生变化,进入到所选择的界面。
5.3装修画册选择的设计与实现
装修画册的选择是为了让用户能够更准确的查看画册,左侧是一个菜单栏,用户可以通过选择空间、主题、局部、装饰、家具来进行选择性的浏览自己所需要的画册。
页面采用UISearchDisplayController实现,点击关键词则直接进入搜索结果列表界面,界面如图5-3所示。
点击自己所需要的关键词后,进入二级界面,界面会自动弹出,用户可以浏览自己选择的关键词的画册,点击右上角四格按钮返回一级搜索界面,如图5-4所示。
图5-3选择界面
图5-4关键词画册界面
主要代码:
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"画册列表";
[self.tableView registerClass:
[IdeaPhotoListCell class] forCellReuseIdentifier:
cellIdentifier];
self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithImage:
[UIImage imageNamed:
@"筛选icon.png"] style:
UIBarButtonItemStyleBordered target:
self action:
@selector(doActionSheet:
)] autorelease];
self.ideaPhotolistArray = [NSMutableArray arrayWithCapacity:
1];
__block IdeaPhotoListController * ideaPhotoList = self;
[self.tableView addHeaderWithCallback:
^{
ideaPhotoList.ideaList_Page = 0;
[ideaPhotoList getData];
}];
[ideaPhotoList.tableView addFooterWithCallback:
^{
[ideaPhotoList getData];
}];
UIKit中有一些类可以用来操纵单个图像,还有一个图像类可以用来显示图像。
Apple还提供了一种特殊的导航控制器,用于从图像库中选择图像。
如果图像存储在内存中,你可以创建一个NSData对象作为initWithData方法的原始输入,来初始化一个UIImage对象。
如果图像是一张网络图片,可以使用NSData来进行预载,然后用它来初始化UIImage对象。
UITableViewController是系统提供的一个便利类,主要是为了方便我们使用UITableView,该类生成的时候就将自身设置成了其包含的tableView的dataSource和delegate,并创建了很多代理函数的框架,为我们大大的节省了时间,我们可以通过其tableView属性获取该controller内部维护的tableView对象。
默认情况下使用UITableViewController创建的tableView是充满全屏的,如果需要用到tableView是不充满全屏的话,我们应该使用UIViewController自己创建和维护tableView。
5.4收藏画册,网友评论,赞过的画册的设计与实现
在用户选中某风格的装修图册,可以展示具体装修图片,文字及网友评论等。
页面顶部用的是一个自定义的imageItem,展示该画册的封面tableView,下面是一UITableViewCell对象,是在UITableView中放置的,用户点击后可以查看该画册的具体设计灵感和局部图片,页面下面是Label,展示收入画册的用户及评论。
如图5-4所示。
图5-4收藏画册等界面
主要代码:
#pragma mark - UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:
(UITableView *)tableView
{
return 3;
}
- (NSString *)tableView:
(UITableView *)tableView titleForHeaderInSection:
(NSInteger)section
{
if (section == 0) {
return @"晒家画册";
}else if (section == 1){
return @"灵感画册";
}
return @"赞过的画册";
}
uicontrol创建用户界面控件对象。
在窗体上创建各种组建(比如、按钮、静态文本框、弹出式菜单等)。
并指定这些组件的回调函数。
如果设计了一个自定义控件类,可以使sendActionsForControlEvent方法,为基本的UIControl事件或自己的自定义事件发送通知。
5.5我界面的设计与实现
我界面分为三个模块,如图5-6所示。
图5-6我界面图
清理缓存是用第三方框架实现的,点击清理缓存单元格,会弹出一个alertView,用户点击OK后,开始清理图片缓存。
关于我们主要展示客户端版本及开发者的信息,用imageView来实现。
主要代码:
-(void)tableView:
(UITableView*)tableViewdidSelectRowAtIndexPath:
(NSIndexPath*)indexPath
{
if(indexPath.section==0)
{
[UMFeedbackshowFeedback:
[[[UIApplicationsharedApplication].delegatewindow]rootViewController]withAppkey:
UMENG_APPKEY];
}
if(indexPath.section==1)
{
NSLog(@"3区0号");
UIAlertView*alertView=[[[UIAlertViewalloc]initWithTitle:
@"温馨提示"message:
@"是否要清理图片缓存?
"delegate:
selfcancelButtonTitle:
@"OK"otherButtonTitles:
@"Cancel",nil]autorelease];
[alertViewshow];
[[SDImageCachesharedImageCache]clearDisk];
}
if(indexPath.section==2)
{
TheDevelopersVC*theDevelopers
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 IOS 唯美 设计 实现 方案
![提示](https://static.bdocx.com/images/bang_tan.gif)