请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:101| 主题:18426
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Designing Card-Based User Interfaces

[复制链接]
火钳刘明 发表于 2016-10-11 22:55:56
346 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Best Card Design Examples

  Card-style design lies at the intersection of design for desktops and mobile devices, bridging the gap between interaction and usability. But in order to be successful, card-based interface requires both clean aesthetics and direct user engagement with a certain action.
   Cards can appear in a stream, creating a timeline of events. For example, Facebook uses them to present a quick overview of recent events in the news feed. Facebook’s news feed is an endless stream, whereas cards are individual . The point of cards here is disaggregation . They’re taking things out of infinite stream, packetizing them, and making them sharable . This action also encourages users to share the content on social media.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

      Facebook is a great example of content-driven card design.       Cards allow relevant content to naturally reveal itself, making possible for users to dive deep into their interests. Take a look at Behance , an online creative community which showcases creative work. Card-based design is the most suitable way for presenting such type of content.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Behance uses a card layout for maintaining an intuitive user interface. (Large preview)       Tinder is a great example of how utilizing discovery mechanism to present the next option has driven the app to emerge as one of the most popular mobile apps. Tinder has a terrifically simple card swipe interface — you swipe to the left if you’re not interested, to the right if you are. This card-swiping mechanism is curiously addictive, because every single swipe is gathering information — cards connect with users and offer the best possible options based on the made decisions.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Image credit: Tinder. (Large preview)        Cards are easily categorized for a list of tasks. The Trello task management app does a great job of using a card-style interface to create a dashboard for users, where each card represents a separate task.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       A Trello board is a canvas filled with cards. (Large preview)       Since cards are content containers, they’re perfect for representing actions. Consider the AirDrop service on Apple devices. When you have an incoming request for data transfer, a card pops-up with a notification to accept or decline the transfer. Apple’s screenshots focus on photos, but developers can put anything in card — coupons, songs or web links.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Image credit: Apple. (Large preview)       Сard design offers fantastic precision when it comes to organizing content from varying sources. Using cards, you can organize information collections into logical groups, aggregate your content and show it context specific. A selective content from many different content providers can be easily gathered together and redistributed as a “deck” of related information.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Image credit:    Material design . (Large preview)       Card-Based Design Language

  In 2010, Microsoft introduced its Metro design language. A key design principle is better to focus on the content of applications, which is achieved by using flat elements, relying more on typography and cards. A card for Metro design is more than just a design element; it’s an essential functional part which provides an easy interaction.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Microsoft Windows 8. (Large preview)       Creating Card In More Detail

  Cards And Simplicity

   When you think about cards, simplicity should be the number one thing to keep in mind. A great advice from Carrie Cousins is “one piece of information per card”: card can contain multiple elements within a design, but each should focus on only one bit of information or content. This gives users the opportunity to select the parts of your content they want to consume or share.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       ReaLync carries cards over to all of their listings in order to show the most important information about places. Credit:    piperlawson . (Large preview)       Cards and Responsive Design

   We all know how important it is to make your app or site look and work equally well across all devices. When we are designing for different screens, we should take full advantage of target environment and using cards we can adjust content quickly and easily depending on the size of the screen. Cards offer excellent compatibility with responsive frameworks — cards grids can restructure themselves to fit any breakpoint or screen size.
  What’s nice about a digital card is that it can be manipulated in a variety of ways. For example, on mobile devices, cards can be stacked vertically, like an activity stream on a phone:
     

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces
    While for larger screens they can fall into a grid:
     

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces
    Cards can be a fixed or variable height: You can set a fixed-width with variable height for your cards based on the device type.
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Image credit:    Intercom . (Large preview)       Cards and Typography

  Everything about a card design should be easy to read and understand. You should design for maximum readability:
  
       
  • Opt for simple typefaces and easy to read color schemes (text is most legible when placed on a solid color background with a sufficient contrast ratio to the text).   
  • Try to limit the number of typefaces as well. For most card projects a single typeface is enough.  
      

Designing Card-Based User Interfaces

Designing Card-Based User Interfaces

       Image credit: Material Design. (Large preview)       Most of you probably have a better understanding why card-style design is so popular and will continue to increase in popularity. This trend won’t end anytime soon. Cards are here to stay and continue to be an essential part of app design.
  What makes cards work is good design and great usability. Cards are more than just a look, they are one of the most flexible layout formats for creating rich content experiences. Today, people seek out information quickly, and cards serve it up well, regardless of device.
   This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app is made for a fast and fluid UX design process, as it lets you sketch out ideas, create interactive prototypes, test and share them all in one place.
   You can check out more inspiring projects created with Adobe XD on Behance , and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free .
  (ms, yk, il



上一篇:如何成为一头优秀的服(产)务(品)员(汪)
下一篇:第四次公开!免费优质图标哪里找?
hemin 发表于 2016-10-11 23:38:04
你觉得该怎么做呢?
回复 支持 反对

使用道具 举报

xueyufbi 发表于 2016-10-12 06:18:15
青春不在了,青春痘还在!
回复 支持 反对

使用道具 举报

liluo1991 发表于 2016-11-15 23:28:40
看起来不错
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表