当前位置: >
设计细节：Android Lollipop（1）
The Design Details Podcast is coming!
I'm excited to announce the Design Details Podcast is coming in early 2015!
Each show will be a 30-60 minute conversation with design leaders in the community. Twenty-three guests have already accepted an invitation to chat, including
(Dropbox),
(Palantir) and
(Twitter).
Drop your email below to receive new episodes and show updates in your inbox. Thank you!
I missed some of the awkward “coming-of-age” years on the Android platform with Honeycomb (3.0), Ice Cream Sandwich (4.0) and Jelly Bean (4.1 – 4.3). My first true experience with Android was earlier this year on KitKat 4.4. The OS was nice, and not too jarring of a change from iOS 7 (at the time), but several quirks in the software made it impossible for me to fully abandon the Apple ecosystem.This month’s release of Android 5.0 Lollipop, however, feels like it could be the tipping point. There are a lot of really amazing features that Android brings to the table now, and has in many way surpassed my expectations of what a mobile OS should be. I’ve been a long-time believer in iOS and Apple, but damn if Lollipop isn’t making the switch to Android oh-so tempting. This videos in this post were recorded on a Nexus 5, which might differ in some ways from other Motorola/Samsung devices, but ideally things will be fairly consistent for all Lollipop users!As I was writing this Design Details it became clear that there was too much content for one post. I’ve decided to break the fe part one is focused on the high-level design details of the OS as a whole, while part two will look deeper into some of the stock Android applications.Also, a huge shoutout to
for proofing and improving this post – thank you!The following details are best-viewed on a Mac or PC in Chrome or Safari. I’m working on iPad + Firefox support as soon as possible!Follow me at
for tweets about design, startups and technologyGet emailed with future Design Details posts: Want to sponsor these posts? I have to address up front how challenging it was to record the videos for this post. I scoured the Play store for good mirroring apps, I Googled my way down a dozen rabbit holes and eventually had to resort to Twitter to find the right answer – shoutout to
for the help! The solution: I had to download the Android SDK and platform tools in order to record the videos via command line prompts. I’m a bit shocked that we still haven’t seen a better solution here for screen recording on Android – devs, I would have paid $5-10 for an easy-to-use solution here. Wink wink.These quirks aside, I’ve totally fallen for Lollipop’s aesthetic. Material Design has found its away across more apps and OS-level tools, making the entire experience consistent and comfortable. This lock screen (aside from the pesky debugging notification) is really slick – I love the slowly glowing ring around the lock icon.From a usability perspective, I still feel like Apple wins the first-user-experience battle. Slide to unlock is more clear, and iOS’s gesture hints (right-facing arrow + animation on the text) provides users with more context about what to do.
Hover + hold to play and loop the video Share this Detail: Here’s what happens if you tap the lock icon:
Hover + hold to play and loop the video Share this Detail: Circles everywhere. If you’re not familiar with Material Design, or Android in general, this post will surprise you with how versatile the circle can be in a software world dominated by rounded rectangles. The shapes provide an interesting contrast and a breath of fresh air to software design.The Material Design spec provides some more information about this design decision in : “Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted.
The interaction is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. It encourages deeper exploration of an app.”In this video, you can quickly access the camera or phone by swiping the bottom icons inwards (again, the usability here is questionable). I do, however, like the way the interface adjusts to your actions by fading out the other two calls-to-action along the bottom bar.
Hover + hold to play and loop the video Share this Detail: One thing I really want to highlight in this post is how powerful the notifications are on Android. This video highlights just one minor example (with more later in this post), but tapping + holding on a notification from the lock screen will unveil the settings for that parent application. Tapping the information icon will open the settings for that specific app, providing a faster way to manage your notifications.
Hover + hold to play and loop the video Share this Detail: The soft keys along the bottom of the screen – back, home and multi-tasking – are one of Androids biggest differentiators from iOS. Where iOS apps are adopting the swipe-to-go-back interaction, Android relies more heavily on the ‘back’ soft key that persists along the bottom of the screen. As a long-time iOS user, it’s hard for me to remember that this functionality even exists. But when I do remember, it’s a wonderful way to navigate through applications and it provides a beautifully-consistent navigation pattern across the entire system. This lack of consistency is a glaring usability issue on iOS. This video just highlights some of the slick animations that accompany soft key taps. Pressing and holding the ‘home’ icon brings up the Google Now button – flicking your finger up will take you to Google Now.
Hover + hold to play and loop the video Share this Detail: If you swipe right on the home screen, Google Now starts to fade into view. Notice the menu icon slide into place in the search bar once you reach the halfway point. That icon, when pressed from the Google Now view, brings up your user settings and Google Now preferences.
Hover + hold to play and loop the video Share this Detail: It’s worth mentioning that Lollipop still has a few small consistency issues that are lingering, but will no doubt be cleaned up in future releases. For example, here’s the slideout menus in the Play Store versus Google Now:Circles all around! I had to rewatch this video several times to pick up all the subtle movements and animations that happen when you activate voice search. Things move quickly, so pay close attention! This video perfectly captures the intense attention to detail across Lollipop. Elements respond gracefully to your touch, movements are quick and snappy with the perfect amount of easing, and a brilliant use of color breathes life into the OS.
Hover + hold to play and loop the video Share this Detail: While I originally hoped to prevent this post from turning into an Android vs. iOS analysis, I can’t help but bring up the lock switch design pattern and how things have evolved this year. I use the Nexus 5 which is devoid of a physical lock switch. To mute the phone, you have to just keep pressing volume down until the phone is silenced. On all version of the iPhone and iPad, there has been a physical mute switch above the volume controls – until now When the iPad Air 2 was unveiled last month, one of the most peculiar physical changes on the device was the removal of the mute/orientation lock switch. I haven’t heard an official reason for the removal, but one can presume that it’s because Apple believes their software solution is now as effective, if not more effective, than the hardware feature. Removing more physical bits and pieces makes manufacturing and maintenance easier. The question remains whether this design decision will migrate to the iPhone lineup in the coming years, a device much more suited for muting/unmuting.Regardless, I find it fascinating how Android interprets the meaning of volume buttons. With Lollipop there is an inferred intent when a user presses the volume buttons: not only are users trying to control how loud the phone’s notifications will be, but they are also implicitly trying to adjust the phone to a new set of situational circumstances. This is hard to describe, but I’ll try: iOS believes that if a user is pressing the volume up/down buttons they are simply trying to do that – change the volume. Android, however, recognizes that there is an underlying reason a user would do this i most likely due to a change in their physical environment (i.e. going to a movie theatre). For this reason, the OS pairs physical volume changes with notification preferences: None, Priority or All.In my mind, I can see this level of granularity being confusing to non-technical folks or people who might be new to smartphones. I think that’s why Apple’s Do Not Disturb function is so basic and purposefully dumbed-down. Android, on the other hand, tries to find balance between a slightly more confusing user experience and more powerful customization tools. Technical folks and power users can now control their experience in their own way, which feels liberating on many levels.I hope I haven’t bored you with this one detail about volume buttons and mute switches, but it really was fun to try and think high-level about physical controls vs. software solutions and customizability vs. ease-of-use. I’d love to hear your thoughts and hopefully point out some ideas that I’ve overlooked!
Hover + hold to play and loop the video Share this Detail: Lollipop’s multitasking is slick. It feels snappy and responsive, and creating a sense of depth adds character to the OS. I don’t have a preference either way on the iOS or Android multitasking menus – they both feel great and work well within their respective ecosystems.
Hover + hold to play and loop the video Share this Detail: Scrolling through the multitasking menu feels so nice – movements are fluid and the physics here have just the right amount of friction. Because Android only shows a portion of each app’s screen at a time, more cards can be stacked at once in the multitasking view (remember that iOS only shows 3 apps at a time!).
Hover + hold to play and loop the video Share this Detail: When it comes to closing apps from the multitasking view, you can either swipe-to-close or tap the ‘x’ in the upper-right corner. It’s amazing how even the close icon here incorporates circular animations and movements to maintain consistent interaction design.
Hover + hold to play and loop the video Share this Detail: Lollipop’s notification center is stunning. Seriously – it’s insanely useful, easy to read and quick to navigate. I love some of the animations and transitions here as I open up my settings view. Check out the cog that rolls into place or the way the divider line draws itself out from the center of the screen. I love the way the notification modules stack on top of one another when there’s no more space left on the screen – design details, indeed.
Hover + hold to play and loop the video Share this Detail: Android provides a way to create multiple users on one device, allowing multiple people to keep their apps and content separate. This isn’t really a privacy thing – switching between accounts isn’t locked down by default – but more of a way to give power back to users. In my mind this feature makes the most sense for tablets which are more likely to be shared among family members.In terms of the design here, I found it odd that I could tap my user profile to open the user preferences, but couldn’t tap it again to close. You’ll see me try it in the video below. While Material Design brings consistency and life to the OS, the ‘More Settings’ and ‘Done’ buttons are not obvious ways to navigate within this view.
Hover + hold to play and loop the video Share this Detail: If you tap the cog from the notification center it opens up the device settings view. There’s an insane amount of whitespace here, which depending on your preferences is either a good thing or a frustrating waste of screen real estate. But still, the text is clear, the segmentation of controls makes sense and the navigation is easy. It’s interesting that iOS doesn’t have a quick way to access the settings like this from their control center – it really is quite useful and saves users from having to dig folders or pages of apps.
Hover + hold to play and loop the video Share this Detail: I love this little detail: when you adjust the brightness of your phone, the settings view fades out of sight to reveal your content underneath. This helps gives users a more accurate understanding of what their content will actually look like once the brightness has been changed.
Hover + hold to play and loop the video Share this Detail: I didn’t get the best recording here, so my apologies if it’s confusing! The key thing I wanted to highlight was that this settings view is really powerful. I can quickly toggle networking services on or off, turn on the flashlight or lock the screen orientation. What is not obvious, however, is that ‘Bluetooth’ and the wifi network name (Wu-Tang Lan, in my case) are separate labels which can open their own respective settings view. This isn’t really clear until you start tapping around.
Hover + hold to play and loop the video Share this Detail: One other cool thing that
pointed out to me was how different apps can secure a place in the settings pulldown. In this case, a screen capture app and a mobile hotspot automatically get added to this settings view. It’s still not quite clear how to customize these icons here, or delete them if I’d rather not have them shown, but I love this flexibility of the OS to accommodate each individual user:
16 Clear all notifications Clear. All. Notifications. Thank you, Android, for this wonderful little touch. The icon to perform the action is not quite obvious, but the feature itself is so useful. I will be patiently awaiting this feature on iOS!
Hover + hold to play and loop the video Share this Detail: This video captures a simple preferences toggle. The motion and color here are really nice touches. One thing about Lollipop, or Android in general, is that you can long-press on an option to move things in slow motion. I’m not sure what the practical reason for this could be, but it makes for an easy way to showcase everything going on with Material Design in this post!
Hover + hold to play and loop the video Share this Detail: Camera app design must be insanely fun, but impossibly challenging. Giving people easy access to controls and configurations without obscuring the view itself can be a tricky balance. I thought I’d share a comparison shot of Lollipop vs. iOS 8 below – of course, Android on the left and iOS on the right:I suppose there’s no right answer to which design is better. Both make it easy to access settings and provide a clear that’s the most important thing. But for me iOS has built the interface in such a way that I feel in control while using my camera, but not bogged down in the configuration. That’s really important to casuals like myself. The video below captures the camera app opening on Lollipop. The icon animations give context to users and helps them to know where more settings can be found. I thought that it could have been a nice touch to have the camera icon in the center of the screen during the loading transition move down to become the actual camera button rather than flying up and out of view.
Hover + hold to play and loop the video Share this Detail: There are some quick options available within the camera app that let you toggle timers, gridlines, HDR images and flash. The icon on the right is to switch between the front and rear camera, which wasn’t immediately obvious. That icon seems like it could be a tricky one to design, and I’m not quite sure this one makes the most sense – in many ways it looks like an ‘exit’ icon: a door with an arrow to close the options panel.
Hover + hold to play and loop the video Share this Detail:
20 Expanded notifications
I’ll end this post by looking more at Lollipop’s notification design. I have a hunch that I’ve only scratched the surface here on what developers are doing with interactive notifications, so if you know of any other cool ones give me a shout on ! In this video, I have a few Twitter notifications stacked up. If I tap, it expands the notification giving me a complete at-a-glance view of what I missed in that specific app. The motion here is gorgeous and the way the notifications react to one another feels right.
Hover + hold to play and loop the video Share this Detail: If you have more notifications than can fit on the lock screen, Lollipop begins to group and stack them to save space and prevent notification overload. A double tap expands everything at once which is a great way to manage information on the lock screen.
Hover + hold to play and loop the video Share this Detail: That’s it for part one of this Lollipop Design Details! I hope you’ve enjoyed the videos and thoughts here – give a shout on
if I’ve missed anything at all! Part 2 will be coming soon to take a closer look at some of the stock Android apps – if you’d like to be emailed about future posts, sign up for the !
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）YOU ARE HERE:After updating the Google Search app to version 4.1 last week, the search giant has started updated the Google Now Launcher for
with the latest Material Design elements.Now users with devices running Android 4.1 Jelly Bean to Android 4.4 KitKat can download the updated Google Now Launcher, allowing them to experience some of the elements of Google's latest
- though these elements are very few and don't even include the Lollipop onscreen navigation bar.The updated Google Now Launcher includes changes such as the Search bar on the home screen and app drawer now has a white theme like Lollipop. The
swipe-side menu has also been added, and few animations are also similar to Lollipop OS. , Google updated the Google aka
app to version 4.1, bringing the all new 'Now cards' settings page, improved 'Ok Google' Detection settings, slightly revamped Material Design-like elements, and support for nine new Indian languages., the app teardown by Android Police revealed new findings speculating possible integrations in the future such as audible notifications, Project Hera, third-party integration and more.One feature that that went live silently was noted in the report. In the updated app,
tweaked the Google Now launcher ability to interact with users. The launcher has been improved to work as an overlay representing interactions, regardless of which launcher or application is active. This is different from the older version, where speaking the key phrase 'Ok Google' with any other app in the foreground would immediately launch Search, sending the current app into the background.
Hitesh is an engineering graduate and a tech enthusiast who is passionate about the latest trends in mobile technology. He's a master at finding deals, a TV buff, who
Fields marked with * are mandatory
2000 characters left22 Replies, Latest Post by36 Replies, Latest Post by13 Replies, Latest Post by8 Replies, Latest Post by6 Replies, Latest Post by查看: 540|回复: 1
领略 Material Design 之美：Android Lollipop 多角度图赏
该用户从未签到
距离 Android 5.0 Lollipop 正式版已经不远了，相信很多人都听过全新的 Material Design。新设计效果惊艳在哪里？不妨通过系统应用的新设计一起感受一下。Android 5.0 Lollipop 包含了众多的改进，最明显的就是全新的 Material Design 的全面使用。你可能很多次听到 Material Design，也看到过几张图片，那么不妨跟随笔者更细致的看看全新的 Android Lollipop 和 Material Design。手机▼ Android 5.0 Lollipop 内置了全新的壁纸，你可以根据你的喜好选择一款。全套壁纸下载：
▼ 相机应用&引导页面
▼ 新的初始设定向导，初次设置需连接到 Google 服务器，请耐心等候。
▼ 全新的通知中心，支持快捷开关和多用户账户切换。▼ Google Now Launcher，感受一下贴合 Material Design 的新动画效果吧！
▼ 全新的联系人界面
▼ 横屏状态下的计算器，用色相当大胆。
▼ 全新的通知中心，长按消息可单独设置某一应用的消息推送权限。
▼ 超级好看的「扁平化」键盘，可惜不支持中文输入。
▼ 横屏状态下的时钟应用，它会根据时间的变化而改变颜色。
▼ 全新的锁屏界面，重要信息可以直接在锁屏中处理。
▼ 全新的文件夹设计、Google Now、拨号器和多任务切换界面
▼ 卡片式的 Google Now，温馨提示：中国大陆是没法使用「姑姑闹」的。
▼ 桌面小部件设置/添加界面
▼ 全新的动画效果，左为多任务切换，右为内置时钟演示。
针对平板的设计▼ Google Now 和多任务切换
▼ 充分利用平板特性的设置界面说实话，由于笔者的 Nexus 4 每天使用，并且新系统尚在测试中，没有直接上手 Android Lollipop 的体验。在看过如此多的截图后，不得不承认 Material Design 让 Android 的设计上了一个台阶。Material Design 设计风格不仅面向 Android 手机/平板，更包括 Chrome、智能手表、电视和汽车，这让多平台的整体设计风格更加一致美观。
TA的每日心情怒 23:47签到天数: 1 天[LV.1]初来乍到
很不错的样子，期待索尼的版本