1 00:00:00,000 --> 00:00:08,830 2 00:00:08,830 --> 00:00:13,190 >> JORDAN Jozwiak: Així que avui anem per parlar sobre el disseny d'Android elegant. 3 00:00:13,190 --> 00:00:17,560 Així que abans de començar, només vull Qualifico que fa un any jo diria 4 00:00:17,560 --> 00:00:23,920 No tenia cap experiència amb el disseny, i jo preocupava pel bon disseny, però no ho vaig fer 5 00:00:23,920 --> 00:00:25,010 realment saben el que això significava. 6 00:00:25,010 --> 00:00:28,580 I m'agradaria provar, però no ho vaig fer sempre saber el que ha de buscar i el que faria 7 00:00:28,580 --> 00:00:29,740 fer un bon producte. 8 00:00:29,740 --> 00:00:33,910 Així que ara, he après una mica més, i Només vull compartir alguns dels 9 00:00:33,910 --> 00:00:37,150 experiències amb vosaltres, i especialment en el context d'androide 10 00:00:37,150 --> 00:00:41,050 sistema operatiu en el qual hi ha una gran quantitat de problemes amb la fragmentació, i alguns 11 00:00:41,050 --> 00:00:42,580 nous patrons de disseny que estan sorgint. 12 00:00:42,580 --> 00:00:47,110 I si vostè està interessat en prendre en una Aplicació per Android, d'aquesta manera espere 13 00:00:47,110 --> 00:00:49,800 tenir una mica de perspectiva sobre el que l'experiència de l'usuari i l'usuari 14 00:00:49,800 --> 00:00:52,120 interfície pot ser similar. 15 00:00:52,120 --> 00:00:54,172 >> També fa uns moments, ens volgut Joseph [? Ang?] 16 00:00:54,172 --> 00:00:56,790 seva 21 aniversari feliç. 17 00:00:56,790 --> 00:01:04,550 Així que per a tots els que van estar aquí avui en dia, només breu recapitulació. 18 00:01:04,550 --> 00:01:07,890 Així que aquesta és la realitat detallada explicació del que podríem repassar 19 00:01:07,890 --> 00:01:12,000 avui en dia, un munt de bons i dolents exemples de disseny, alt nivell 20 00:01:12,000 --> 00:01:16,050 vista general, les preguntes de la fragmentació en Android, i després un munt de 21 00:01:16,050 --> 00:01:18,630 diferents patrons de disseny, que parlarem. 22 00:01:18,630 --> 00:01:23,810 Però per realment trencar cap avall, en en general, jo volia parlar de 23 00:01:23,810 --> 00:01:28,390 disseny d'experimentar, el que simplifica la interfície d'usuari, i en realitat 24 00:01:28,390 --> 00:01:31,640 delectant a l'usuari i crear cosa que és agradable. 25 00:01:31,640 --> 00:01:34,930 Així que anem a anar a través d'alguns generals conceptes de disseny, introduir 26 00:01:34,930 --> 00:01:38,870 Preocupacions específiques Android-com, incloent la fragmentació, un parell 27 00:01:38,870 --> 00:01:42,100 exemples, alguns patrons de disseny d'Android, i després alguns consells de tancament 28 00:01:42,100 --> 00:01:46,600 per la qual cosa ha de buscar si estàs interessats en la millora de la 29 00:01:46,600 --> 00:01:48,075 disseny de les seves aplicacions. 30 00:01:48,075 --> 00:01:51,260 31 00:01:51,260 --> 00:01:54,390 >> Així, la por. 32 00:01:54,390 --> 00:01:57,710 Potser no sempre associar tecnologia de por, però per alguna 33 00:01:57,710 --> 00:01:58,740 persones que poden ser. 34 00:01:58,740 --> 00:02:04,520 Jo sé que la meva àvia en realitat decideix no utilitzar un ordinador, ja que 35 00:02:04,520 --> 00:02:06,910 Seria aclaparador per a ella. 36 00:02:06,910 --> 00:02:14,900 Però fins i tot sobre una base molt més al dia, hi ha molts de nosaltres que quan estem 37 00:02:14,900 --> 00:02:16,940 utilitzant una aplicació, no sempre ho fem saber on anar. 38 00:02:16,940 --> 00:02:21,050 Saps el que vols fer, però no es pot trobar que 39 00:02:21,050 --> 00:02:22,570 característica o aquest botó. 40 00:02:22,570 --> 00:02:30,140 >> I tots ens hem trobat malament disseny en un moment o altre, i de vegades 41 00:02:30,140 --> 00:02:34,920 aquesta frustració és com la por al desconegut. 42 00:02:34,920 --> 00:02:41,320 I quan tenim aquesta por, en general - com la psicologia ens ha dit 43 00:02:41,320 --> 00:02:45,500 que tenim el processament primer en profunditat en lloc de primer en amplitud Així que si el seu 44 00:02:45,500 --> 00:02:48,940 usuari ja està frustrat amb una mala experiència de l'usuari, només ho van a 45 00:02:48,940 --> 00:02:52,010 centrar-se cada vegada més en el que volen fer i com no poden fer basar 46 00:02:52,010 --> 00:02:53,990 en el que ells estan buscant. 47 00:02:53,990 --> 00:02:57,790 Així que realment volem centrar-nos en intentar per crear una bona experiència per al 48 00:02:57,790 --> 00:03:03,110 usuari, ja que farà d'ells més capaç d'interactuar d'una manera positiva. 49 00:03:03,110 --> 00:03:04,690 >> Així que per l'altre costat tenim delit. 50 00:03:04,690 --> 00:03:14,315 I no és un estudi de la psicologia - i alguns d'aquests conceptes generals de disseny 51 00:03:14,315 --> 00:03:17,560 que estic parlant són basat en una xerrada de Dan 52 00:03:17,560 --> 00:03:20,190 De Harmon Ted Talk al disseny. 53 00:03:20,190 --> 00:03:25,260 I ell va parlar d'Alice Isen, que tenia aquest experiment en el qual dues cordes 54 00:03:25,260 --> 00:03:29,370 la gent venia en un laboratori, i hi ha van ser dues cadenes penjant, i 55 00:03:29,370 --> 00:03:34,110 no hi havia manera que poguessin arribar a tant de les cordes a la vegada. 56 00:03:34,110 --> 00:03:39,150 >> Així que per a alguns dels participants que eren entrant, li va dir: aquest és un CI 57 00:03:39,150 --> 00:03:43,790 prova, i anem a esbrinar si o no es pot arribar als dos 58 00:03:43,790 --> 00:03:44,180 les cordes. 59 00:03:44,180 --> 00:03:47,230 Així que molts d'ells agafava un i intentar per arribar a l'altra, 60 00:03:47,230 --> 00:03:48,920 i que no seria capaç de fer-ho. 61 00:03:48,920 --> 00:03:54,960 I pel que una gran quantitat de persones no aquesta prova, la prova de CI. 62 00:03:54,960 --> 00:03:58,050 Però quan van entrar al laboratori i que es van presentar amb un plat de 63 00:03:58,050 --> 00:04:01,040 dolços, només dic, hey, tenim algunes caramels extra, vols una mica? 64 00:04:01,040 --> 00:04:05,340 I a continuació, es va procedir amb l'examen i era només una mena de diversió, feliç, 65 00:04:05,340 --> 00:04:09,610 trobada, molta més gent podia que, de manera creativa, pensar en els seus peus 66 00:04:09,610 --> 00:04:12,260 i dic, bé potser si el swing aquesta cadena, llavors jo puc 67 00:04:12,260 --> 00:04:13,510 agafar l'altra. 68 00:04:13,510 --> 00:04:16,620 69 00:04:16,620 --> 00:04:20,620 >> Suposo que el punt aquí és que si vostè tenir una experiència positiva, i la seva 70 00:04:20,620 --> 00:04:24,470 usuari és divertir-se, són més probable que sigui capaç de continuar 71 00:04:24,470 --> 00:04:26,720 interactuar d'una manera positiva. 72 00:04:26,720 --> 00:04:30,860 He sentit una altra versió d'aquest on es pot veure a la gent de primera línia amb 73 00:04:30,860 --> 00:04:35,100 una mena de balanceig cadena abans de arriben al laboratori o 74 00:04:35,100 --> 00:04:36,650 en algun altre context. 75 00:04:36,650 --> 00:04:40,810 I això és una altra cosa a considerar en un nivell menys emocional, que 76 00:04:40,810 --> 00:04:47,260 d'alguna manera podria provocar que l'usuari tingui una certa reacció o conduir per una 77 00:04:47,260 --> 00:04:50,580 camí que vostè vol que ells segueixin. 78 00:04:50,580 --> 00:04:55,680 >> Aquesta no és la millor gràfica pel que estic anar a parar, però és una altra idea 79 00:04:55,680 --> 00:05:05,560 que dins de disseny, vostè pot tenir una inherent, visceral o de baix nivell 80 00:05:05,560 --> 00:05:06,780 reacció a les coses. 81 00:05:06,780 --> 00:05:12,090 Així que Jurassic Park aquí, aquí hi ha el il · lustracions per al cartell de la pel · lícula. 82 00:05:12,090 --> 00:05:14,660 I hi ha alguns simples coses que succeeixen. 83 00:05:14,660 --> 00:05:20,210 Igual que el vermell i el groc, són colors d'advertència prudent que podia 84 00:05:20,210 --> 00:05:23,720 alertar de perill, i trobar una mica de por. 85 00:05:23,720 --> 00:05:27,880 Alhora, les lletres és una espècie de medieval, 86 00:05:27,880 --> 00:05:32,500 i sembla sense refinar. 87 00:05:32,500 --> 00:05:40,350 Així que en aquests sentits bàsics, podem tenen baix nivell i primal 88 00:05:40,350 --> 00:05:42,630 reaccions de dissenyar. 89 00:05:42,630 --> 00:05:45,060 >> També hi ha disseny reflexiu. 90 00:05:45,060 --> 00:05:46,340 Aquest és el Chevy Volt. 91 00:05:46,340 --> 00:05:49,550 I es veu en molts aspectes com una normal, cotxe, vull dir que aquest és un bon 92 00:05:49,550 --> 00:05:50,060 gràfic de la mateixa. 93 00:05:50,060 --> 00:05:53,650 Sembla una mena de fresc, el vermell i el llums blaus són realment sobresurten, 94 00:05:53,650 --> 00:06:01,260 però en la seva major part no hi ha res massa espectacular sobre aquest disseny. 95 00:06:01,260 --> 00:06:03,490 D'altra banda, es és un cotxe elèctric. 96 00:06:03,490 --> 00:06:08,120 Va a conduir les primeres 40 milles de tot el electricitat i després, eventualment iniciar 97 00:06:08,120 --> 00:06:09,680 amb el vostre motor de gas. 98 00:06:09,680 --> 00:06:12,940 I aquest és el tipus de disseny en el qual potser quan vostè ho està utilitzant no ho fa 99 00:06:12,940 --> 00:06:18,330 sentir-se molt emocionada per això, però quan es pensa en això en un nivell superior 100 00:06:18,330 --> 00:06:25,830 i el que podríem anomenar el superjò, et sents molt positiva al respecte, i 101 00:06:25,830 --> 00:06:28,010 que és una bona experiència. 102 00:06:28,010 --> 00:06:34,430 >> Una vegada més, es tracta principalment de diapositives Dan De Harmon Ted Talk, i aquests últims 103 00:06:34,430 --> 00:06:35,890 2 són realment convincents. 104 00:06:35,890 --> 00:06:41,770 Aquest és un exemple d'una tetera que a inclinar cap a un costat, 105 00:06:41,770 --> 00:06:42,670 originalment - 106 00:06:42,670 --> 00:06:46,880 això és quan es posa el te en - pel que si partim de la dreta, anem 107 00:06:46,880 --> 00:06:53,290 per posar el te en aquest compartiment superior a l'extrem dret, i llavors va a empinada 108 00:06:53,290 --> 00:06:56,750 amb l'aigua al llarg de la part inferior de la mateixa. 109 00:06:56,750 --> 00:07:02,230 I després, després que ha estat preparant per a un mentre, podem angle fins a la meitat i 110 00:07:02,230 --> 00:07:05,030 que seguirà una mica empinada, perquè algunes de les fulles de te es 111 00:07:05,030 --> 00:07:09,050 encara estar tocant l'aigua, sinó que va a definitivament s'alentirà el procés. 112 00:07:09,050 --> 00:07:14,040 >> I llavors estem completament preparats, ens inclinem és completament vertical, i l'aigua de 113 00:07:14,040 --> 00:07:18,140 a la part inferior i les fulles de te són a la part superior, i que ja no és 114 00:07:18,140 --> 00:07:20,860 remull, ja està llest per servir. 115 00:07:20,860 --> 00:07:27,880 I això és una bonica i tan senzilla exemple de gran disseny que és - 116 00:07:27,880 --> 00:07:32,390 en aquest cas, només estem pensant sobre l'ús de la tetera a més 117 00:07:32,390 --> 00:07:36,230 dimensions, realitat que gira, i és al seu costat, i com podríem utilitzar 118 00:07:36,230 --> 00:07:38,430 això al nostre favor. 119 00:07:38,430 --> 00:07:42,710 És realment meravellós i divertit. 120 00:07:42,710 --> 00:07:46,400 >> I l'última part és, vostè pot explicar una història en el disseny. 121 00:07:46,400 --> 00:07:50,810 Aquesta cadira en la qual sens dubte podria seure, però també és particularment divertit 122 00:07:50,810 --> 00:07:51,810 només per mirar. 123 00:07:51,810 --> 00:07:54,530 La pilota no està ancorada a res, però et donen - 124 00:07:54,530 --> 00:07:58,850 Òbviament vostè té aquesta sensació de com cadira està interactuant i desapareguts 125 00:07:58,850 --> 00:08:03,130 l'última part de la seva cama, tractant per arribar i aconseguir-ho. 126 00:08:03,130 --> 00:08:06,570 I dins de les seves pròpies aplicacions és - 127 00:08:06,570 --> 00:08:12,880 quan es parla de la creació d'usuari l'experiència i la marca, es tracta de 128 00:08:12,880 --> 00:08:17,780 explicar una història i un despreniment d'un general ambient perquè l'usuari sap a sentir 129 00:08:17,780 --> 00:08:22,230 de certa manera, i se senten bé per sentir-se d'aquesta manera. 130 00:08:22,230 --> 00:08:22,920 >> I sorpresa. 131 00:08:22,920 --> 00:08:29,950 Així que això es pren de part de Google de I / O parlo des de l'estiu passat. 132 00:08:29,950 --> 00:08:36,080 Estaven parlant de com, al llarg d'aquests mateixa línia, volen encantar 133 00:08:36,080 --> 00:08:40,220 usuari i que, de nou, van entrar en la psicologia de tot això. 134 00:08:40,220 --> 00:08:47,830 I ells van dir: tots els dies experimentem al voltant de 20 mil moments de positiu i 135 00:08:47,830 --> 00:08:53,510 emocions negatives, i que, en general, es triga aproximadament tres 136 00:08:53,510 --> 00:08:58,260 emocions positives que superen o per equilibrar una negativa. 137 00:08:58,260 --> 00:09:01,180 >> I així, en el context de tecnologia, aquí estan 138 00:09:01,180 --> 00:09:02,430 parlant de com - 139 00:09:02,430 --> 00:09:05,410 140 00:09:05,410 --> 00:09:10,960 que van crear Google Now, que és la seva nova interfície de cerca en Android. 141 00:09:10,960 --> 00:09:16,340 I aquesta part superior aquí que a l' moment té una muntanya i diu Google, 142 00:09:16,340 --> 00:09:19,480 en realitat canviar depenent de la seva ubicació i l'hora del dia. 143 00:09:19,480 --> 00:09:26,215 Així que no importa on es trobi, muntanya, finalment, tindrà una nit 144 00:09:26,215 --> 00:09:28,310 tema quan és de nit. 145 00:09:28,310 --> 00:09:33,160 >> I la primera vegada que vaig volar de tornada a Boston de ser la llar a Michigan, es 146 00:09:33,160 --> 00:09:35,250 canviat a la Boston Horitzó per un temps. 147 00:09:35,250 --> 00:09:39,280 I de nou, la ciutat de Boston durant la dia, de nit, de vegades era un 148 00:09:39,280 --> 00:09:43,220 imatge real, i de vegades era només una espècie d'art gràfic. 149 00:09:43,220 --> 00:09:47,680 I és sorprenent i encantador. 150 00:09:47,680 --> 00:09:49,560 Ells fan el mateix tipus de cosa amb la seva - 151 00:09:49,560 --> 00:09:55,340 Google fa - amb la forma en què escriuen la paraula Google a la seva pàgina principal i 152 00:09:55,340 --> 00:09:59,560 tenir algun tipus de joc o un altre obres d'art que celebra una 153 00:09:59,560 --> 00:10:00,810 cert dia de l'any. 154 00:10:00,810 --> 00:10:03,770 155 00:10:03,770 --> 00:10:08,550 >> Acceptar, pel que es mou ara en endavant per Android específica qüestions. 156 00:10:08,550 --> 00:10:12,730 Hi ha una gran quantitat d'obstacles que cal fer front a l'hora de dissenyar per Android. 157 00:10:12,730 --> 00:10:19,020 El primer que de vegades la gent tractar de descartar com no molt d'un 158 00:10:19,020 --> 00:10:21,610 problema, però definitivament és una cosa vostè ha de considerar, és la fragmentació 159 00:10:21,610 --> 00:10:22,760 en Android. 160 00:10:22,760 --> 00:10:24,820 Òbviament, si vostè està dissenyant per iOS, vostè està dissenyant 161 00:10:24,820 --> 00:10:27,290 per als iPhones i iPads. 162 00:10:27,290 --> 00:10:31,840 I hi ha alguna variació ara, sobretot després de tots els anys entre 163 00:10:31,840 --> 00:10:33,860 els diferents dispositius i el diferent resolucions, però per a la 164 00:10:33,860 --> 00:10:35,610 major part, vostè sap què esperar. 165 00:10:35,610 --> 00:10:40,410 I definitivament es pot obtenir alguns diferents dispositius i de prova en què, 166 00:10:40,410 --> 00:10:43,030 i vostè sap que vostè està cobrint la major part del mercat. 167 00:10:43,030 --> 00:10:46,440 >> Amb Android, que són sens dubte els telèfons més populars. 168 00:10:46,440 --> 00:10:51,540 Això no és un gràfic recent, però és que representa la distribució de tots els 169 00:10:51,540 --> 00:10:54,880 els diferents telèfons d'Android. 170 00:10:54,880 --> 00:10:58,230 Hi ha alguns principals que vostè pot dissenyar per i espero que vostè és 171 00:10:58,230 --> 00:11:00,420 capturant la major part - 172 00:11:00,420 --> 00:11:03,680 no la majoria, però una gran part de seu públic, i pel qual 173 00:11:03,680 --> 00:11:06,580 Vull dir potser un 20%. 174 00:11:06,580 --> 00:11:09,940 Però sens dubte cal considerar sobre tots aquests diferents pantalla 175 00:11:09,940 --> 00:11:12,980 , Hi ha tres mides Android polzades telèfons, i hi ha cinc polzades 176 00:11:12,980 --> 00:11:13,970 Els telèfons Android. 177 00:11:13,970 --> 00:11:17,000 I hi ha un munt de diferents densitats de píxels, i hi ha 178 00:11:17,000 --> 00:11:18,800 hi ha un munt de diferents versions d'Android. 179 00:11:18,800 --> 00:11:22,695 >> Així que hem de dissenyar les coses perquè que estan ben abstracta i que 180 00:11:22,695 --> 00:11:24,140 tenen un disseny sensible. 181 00:11:24,140 --> 00:11:27,930 No vol dissenyar una cosa tan es tracta d'utilitzar tota la pantalla en un cinc 182 00:11:27,930 --> 00:11:31,000 polzades de pantalla i, a continuació, quan es canvia l'escala es redueix a una pantalla de tres polzades, 183 00:11:31,000 --> 00:11:35,060 De sobte tot el text es talla i les caixes són mesures dels estranys. 184 00:11:35,060 --> 00:11:39,680 Així que definitivament hem de tenir això en la ment i pensar en la creació d'un disseny 185 00:11:39,680 --> 00:11:42,800 que pot escalar fàcilment. 186 00:11:42,800 --> 00:11:45,680 >> Així que de nou, parlant de els diferents dispositius. 187 00:11:45,680 --> 00:11:49,460 Aquests són alguns dels diferents mides de pantalla i densitats. 188 00:11:49,460 --> 00:11:53,290 Així que la mida mínima de la pantalla aquí - 189 00:11:53,290 --> 00:11:56,170 aquest és el gràfic de sectors de l'esquerra - 190 00:11:56,170 --> 00:11:59,680 Suposo que no cal molta variació, diem, en general, són 191 00:11:59,680 --> 00:12:03,370 tot la mida de pantalla normal, el que cau a baix Android 192 00:12:03,370 --> 00:12:04,140 directrius. 193 00:12:04,140 --> 00:12:08,220 No obstant això, per a les densitats de píxels, de nou, pot veure que hi ha una àmplia gamma 194 00:12:08,220 --> 00:12:13,110 a partir de més píxels d'alta densitat a les pantalles dels píxels de baixa densitat. 195 00:12:13,110 --> 00:12:16,150 >> I el que això significa és que els gràfics que utilitzi, vostè ha de fer 196 00:12:16,150 --> 00:12:20,780 Segur que estàs pensant en el que són anar a l'escala, perquè van a prendre 197 00:12:20,780 --> 00:12:24,130 fins a diferents quantitats d'espai si no ajust en conseqüència. 198 00:12:24,130 --> 00:12:26,970 En un nivell més tècnic, això significa que si està desenvolupant per 199 00:12:26,970 --> 00:12:30,660 Android, que sens dubte ha de pensar sobre l'ús d'imatges de 9 de pegat, que 200 00:12:30,660 --> 00:12:37,420 vol dir que volem determinats aspectes de la aquest botó o imatge per mostrar i una altra 201 00:12:37,420 --> 00:12:41,540 parts escalaran, només per aquesta color es redueix l'escala tan gran 202 00:12:41,540 --> 00:12:43,920 ja que hem d'anar. 203 00:12:43,920 --> 00:12:48,190 I, en general, que vol assegurar-se que vostè està dissenyant amb el píxel 204 00:12:48,190 --> 00:12:50,580 independència en ment. 205 00:12:50,580 --> 00:12:53,640 >> I, de nou, en termes de l'API versió, aquesta realitat ha millorat 206 00:12:53,640 --> 00:12:57,190 molt en el transcurs dels anys, la últim any o dos, sobretot. 207 00:12:57,190 --> 00:13:02,590 Solia ser que una quarta part de les persones tingut la nova versió d'Android, 208 00:13:02,590 --> 00:13:06,710 que era una espècie de gelat Sandwich o 4.0 iteració, i hi ha 209 00:13:06,710 --> 00:13:11,960 eren la majoria de la gent amb un any vell sistema operatiu que té un 210 00:13:11,960 --> 00:13:13,980 completament diferent interfície d'usuari. 211 00:13:13,980 --> 00:13:24,530 Ara bé, com es pot veure, al voltant del 75% té algun versió de la línia 4.0, que 212 00:13:24,530 --> 00:13:28,750 bàsicament vol dir que tots ells tenen la mateixa interfície d'usuari tot i una lleugera 213 00:13:28,750 --> 00:13:34,180 canvis en el curs de la últim any i mig més o menys. 214 00:13:34,180 --> 00:13:36,710 Però encara cal quart de les persones que estan utilitzant Gingerbread, 215 00:13:36,710 --> 00:13:43,260 que és Android 2.3, i volem disseny de manera que no són completament 216 00:13:43,260 --> 00:13:48,150 va deixar enrere, i sobretot des que és No és tan difícil per a nosaltres fer una mica de 217 00:13:48,150 --> 00:13:51,250 modificacions de disseny perquè puguin tenir la mateixa experiència d'usuari a tots 218 00:13:51,250 --> 00:13:52,640 més pot tenir. 219 00:13:52,640 --> 00:13:57,390 >> Així que és bo per a nosaltres com a desenvolupadors d'aplicacions i dissenyadors, i llavors també és bo per 220 00:13:57,390 --> 00:14:01,380 l'usuari, ja que obtenir alguna cosa que hi ha de nou, encara que 221 00:14:01,380 --> 00:14:03,750 tenir un telèfon més. 222 00:14:03,750 --> 00:14:10,370 Així que per anar a través d'un exemple aquí, això és un exemple de la iteratiu Android 223 00:14:10,370 --> 00:14:12,350 dissenyar el canal de YouTube - 224 00:14:12,350 --> 00:14:15,600 o el seu [? introduir?] disseny Canal de YouTube - 225 00:14:15,600 --> 00:14:19,920 i aquesta va ser una d'aquestes converses a partir d'una setmana durant l'estiu. 226 00:14:19,920 --> 00:14:24,110 I podem brisa a través d'aquests. 227 00:14:24,110 --> 00:14:29,130 Òbviament, aquest punt de partida no és un gran exemple de disseny. 228 00:14:29,130 --> 00:14:30,720 Es pot veure que - 229 00:14:30,720 --> 00:14:32,260 si esteu familiaritzats amb Android - 230 00:14:32,260 --> 00:14:37,230 que hauria de tenir aquesta barra d'acció en el A dalt, alguns colors agradables, i es pot veure 231 00:14:37,230 --> 00:14:44,180 les miniatures són diferents mides, el text és una espècie d'estranya 232 00:14:44,180 --> 00:14:51,790 formatat, i simplement no ho fa sent bé, no ho fa 233 00:14:51,790 --> 00:14:53,500 delectar o sentir la diversió. 234 00:14:53,500 --> 00:14:56,420 >> Així que el primer que podem fer és, de nou, tenint en compte que aquest és un vell 235 00:14:56,420 --> 00:14:59,570 versió d'Android, hi ha una realitat manera fàcil de posar-se al dia amb 236 00:14:59,570 --> 00:15:00,990 nous patrons de disseny. 237 00:15:00,990 --> 00:15:05,390 I això significa que només incloem la Biblioteca d'ajuda que allibera Android 238 00:15:05,390 --> 00:15:06,520 de la barra d'acció. 239 00:15:06,520 --> 00:15:10,610 El que això significa és que si vostè és a partir d'una aplicació, que acaba d'incloure aquesta 240 00:15:10,610 --> 00:15:13,560 i de realitzar tots aquells disseny necessari 241 00:15:13,560 --> 00:15:15,260 Consideracions al principi. 242 00:15:15,260 --> 00:15:18,340 Si vostè tracta d'integrar aquesta tarda vostè encara pot fer-ho, i fer-ho 243 00:15:18,340 --> 00:15:21,450 bastant fàcil, però només serà un poc més d'una molèstia. 244 00:15:21,450 --> 00:15:27,000 Llavors només ha d'anar en el pensament sobre com ets donarà suport bàsicament 100% 245 00:15:27,000 --> 00:15:31,910 dels usuaris d'Android en lloc de només el 75% que tenen els nous telèfons. 246 00:15:31,910 --> 00:15:36,310 >> Així que si sumem aquesta barra d'acció en el part superior, es pot veure que vam ser d'aquest 247 00:15:36,310 --> 00:15:42,995 línia grisa a una línia agradable que té diferents elements d'acció i els botons que 248 00:15:42,995 --> 00:15:47,042 pot prémer per fer coses diferents en el pàgina i un logo, en diuen XYZ 249 00:15:47,042 --> 00:15:52,700 Reader, i ja se sent una mica més modern. 250 00:15:52,700 --> 00:16:01,330 Podem continuar amb aquest estil, fent es marca amb una combinació de colors, de manera que en 251 00:16:01,330 --> 00:16:02,600 aquest cas, només ho va fer de taronja. 252 00:16:02,600 --> 00:16:05,170 I ja que estem donant a la APP una mica més d'identitat. 253 00:16:05,170 --> 00:16:10,560 Té el seu propi caràcter, i se sent com que no només està utilitzant algun 254 00:16:10,560 --> 00:16:16,820 plantilla genèrica, sinó que està utilitzant una aplicació que té algun tipus de veu. 255 00:16:16,820 --> 00:16:21,390 >> Així que va d'aquests dos és una mica diferència més subtil, però el espaiament, 256 00:16:21,390 --> 00:16:28,230 espai en blanc, és una cosa molt simple que crec que és fàcil passar per alt per 257 00:16:28,230 --> 00:16:30,780 les persones que estan rebent en el disseny. 258 00:16:30,780 --> 00:16:33,630 L'espai en blanc, blanc sobretot coherent espai al voltant de la frontera, el que pot 259 00:16:33,630 --> 00:16:37,280 Fer que les coses se senten molt menys claustrofòbica. 260 00:16:37,280 --> 00:16:45,740 Només que el farcit al voltant de la cara, es fa les coses més fàcils de llegir i 261 00:16:45,740 --> 00:16:50,750 tot encaixa millor, especialment si vostè ha alineat coses 262 00:16:50,750 --> 00:16:51,930 dreta al llarg del costat esquerre. 263 00:16:51,930 --> 00:16:59,690 Llavors és especialment difícil d' de vegades fins i tot llegir aquests caràcters 264 00:16:59,690 --> 00:17:02,390 dreta al llarg de la línia. 265 00:17:02,390 --> 00:17:04,579 >> I llavors també podem canviar el miniatures per fer-les més 266 00:17:04,579 --> 00:17:05,930 consistent en aquest cas. 267 00:17:05,930 --> 00:17:11,700 Les vistes de llistes que ja són una mica molest per fullejar, i tenir 268 00:17:11,700 --> 00:17:14,430 fotografies o imatges en miniatura d'un munt de diferents mides només poden fer 269 00:17:14,430 --> 00:17:15,490 coses pitjors. 270 00:17:15,490 --> 00:17:19,380 Així que el millor que podem fer és simplement prendre totes les miniatures de la mateixa. 271 00:17:19,380 --> 00:17:22,460 I en termes de la codificació real aquí, de nou, això és molt fàcil. 272 00:17:22,460 --> 00:17:29,670 Vostè acaba d'afegir aquest atribut extra anomenat android: scaleType = "centerCrop", 273 00:17:29,670 --> 00:17:32,820 i significa que vostè dóna la imatge de certa dimensions, i va només un 274 00:17:32,820 --> 00:17:39,350 escalar pel que cap tota la grandària, tota l'àrea, sense 275 00:17:39,350 --> 00:17:42,950 distorsionar la imatge. 276 00:17:42,950 --> 00:17:43,800 >> I la tipografia. 277 00:17:43,800 --> 00:17:49,500 Així que aquest és, sobretot si ets familiaritzats amb iOS7, un gran canvi 278 00:17:49,500 --> 00:17:56,020 passant a, sobretot en l'últim any més o menys amb el disseny de CS. 279 00:17:56,020 --> 00:17:58,347 Hi ha un moviment cap a la fonts primes i, definitivament, un 280 00:17:58,347 --> 00:17:59,720 variació en les fonts. 281 00:17:59,720 --> 00:18:04,030 I Android té aquesta gran font construïda en, Roboto, i té un munt 282 00:18:04,030 --> 00:18:04,720 de diferents estils. 283 00:18:04,720 --> 00:18:12,730 Òbviament, tens negreta i cursiva, però també tens prima i una espècie 284 00:18:12,730 --> 00:18:14,750 de text ultra prim. 285 00:18:14,750 --> 00:18:20,340 I hi ha maneres de crear una varietat d'estils i donar-li una mica de 286 00:18:20,340 --> 00:18:26,840 context dels diferents significats del text sense l'ús d'algun 287 00:18:26,840 --> 00:18:30,640 fonts discontínua. 288 00:18:30,640 --> 00:18:38,210 >> Així que una bona idea en general, és que vostè pot utilitzar fonts primes per a grans capçaleres, 289 00:18:38,210 --> 00:18:40,990 i després potser si vostè té un munt de text, es pot utilitzar una condensada 290 00:18:40,990 --> 00:18:46,090 font, la qual cosa significa que és el mateixa mida verticalment, però una mica 291 00:18:46,090 --> 00:18:48,550 més curta horitzontalment, cada personatge. 292 00:18:48,550 --> 00:18:51,850 Així que vostè pot cabre més paraules en una menor quantitat d'espai. 293 00:18:51,850 --> 00:18:56,460 Això és especialment útil en aquest cas, per a la vista de llista, perquè si 294 00:18:56,460 --> 00:19:00,110 el que desitja és un fragment, o la vista prèvia, del text, en aquest cas vostè està 295 00:19:00,110 --> 00:19:02,076 probablement no la lectura de la totalitat cosa, pel que els seus ulls no són 296 00:19:02,076 --> 00:19:03,030 va a cansar. 297 00:19:03,030 --> 00:19:05,560 Però tu què vols tant informació en com 298 00:19:05,560 --> 00:19:08,480 poc espai com sigui possible. 299 00:19:08,480 --> 00:19:15,180 >> I després una altra vegada altre disseny consideració és que, quan fem clic en un 300 00:19:15,180 --> 00:19:19,410 d'aquests articles aquí a la vista de llista i obrim aquesta altra pàgina, no ho fem 301 00:19:19,410 --> 00:19:23,040 vull dir, OK, he acabat de llegir això, vaig a tornar i vaig a 302 00:19:23,040 --> 00:19:24,390 feu clic a una cosa nova. 303 00:19:24,390 --> 00:19:26,800 Què passa si només vull llegir tot els articles per al dia? 304 00:19:26,800 --> 00:19:31,970 A continuació, un molt millor disseny molt, és per ser capaç de lliscar entre les coses al 305 00:19:31,970 --> 00:19:34,240 mateixa jerarquia horitzontal. 306 00:19:34,240 --> 00:19:39,430 I això probablement no és intuïtiu en la primera, però una vegada que la gent comença a 307 00:19:39,430 --> 00:19:43,840 adonar-se'n, no té gaire sentit, especialment que vostè està lliscant 308 00:19:43,840 --> 00:19:44,430 esquerra i dreta. 309 00:19:44,430 --> 00:19:48,500 Perquè encara que no estan pensant sobre l'estructura de l'aplicació com un 310 00:19:48,500 --> 00:19:52,190 jerarquia, té sentit lògic, si vostè comença a un nivell superior 311 00:19:52,190 --> 00:19:56,920 vista de llista i després es desplaça a un pàgina de detall que té algun tipus de 312 00:19:56,920 --> 00:20:00,460 article, que ho faria lliscar entre ells. 313 00:20:00,460 --> 00:20:03,960 >> I així al llarg de tots aquests diferents canvis, veure com aquests 314 00:20:03,960 --> 00:20:08,450 van ser els canvis de disseny només estètiques, i no obstant això, ara al final de la mateixa, 315 00:20:08,450 --> 00:20:10,260 això sembla com una aplicació per al Que potser voleu utilitzar. 316 00:20:10,260 --> 00:20:22,530 Sobretot a partir del camí de tornada aquí Quan semblava vell i maldestre i li agrada 317 00:20:22,530 --> 00:20:24,280 ningú realment es preocupava per ella. 318 00:20:24,280 --> 00:20:32,640 I amb no massa canvis, només començant per la barra d'acció, llavors el 319 00:20:32,640 --> 00:20:38,000 combinació de colors i espais en blanc, miniatures, tipografia, i poder 320 00:20:38,000 --> 00:20:41,910 de passar el dit entre els punts de vista, que és de sobte una experiència molt immersiva. 321 00:20:41,910 --> 00:20:44,850 I fins i tot per a alguna cosa tan simple com això. 322 00:20:44,850 --> 00:20:49,390 >> Però encara hi ha alguna altra consideracions, i això és pastilles. 323 00:20:49,390 --> 00:20:55,400 Això també seria la consideració a la iOS, però hi ha encara més forma 324 00:20:55,400 --> 00:20:56,310 factors sobre Android. 325 00:20:56,310 --> 00:21:01,700 Vostè té les seves pastilles de deu polzades, i la seva 07:00 comprimits polzades, i alguns 326 00:21:01,700 --> 00:21:03,880 per tot arreu allà. 327 00:21:03,880 --> 00:21:10,640 I en aquest cas, no vol realment tenir el mateix tipus de llista 328 00:21:10,640 --> 00:21:16,240 veure i experiència de la lectura de l'article, perquè hi ha molt més espai, 329 00:21:16,240 --> 00:21:20,070 i volem utilitzar un molt més eficient. 330 00:21:20,070 --> 00:21:25,820 Així que el millor que pot fer per una tauleta interfície és tenir aquest punt de vista principal 331 00:21:25,820 --> 00:21:29,920 o mestre detall establert, on s'ha la llista en un costat, i després 332 00:21:29,920 --> 00:21:32,710 article sobre l'altra part de la pantalla. 333 00:21:32,710 --> 00:21:38,070 >> I això és una cosa que, de nou, que és molt important a considerar en 334 00:21:38,070 --> 00:21:39,700 vas a començar l'aplicació des del principi. 335 00:21:39,700 --> 00:21:45,010 Perquè en cas contrari, hauràs tota aquesta estructura implementat, 336 00:21:45,010 --> 00:21:47,720 i llavors vostè va a voler tirar és aquí, i que serà 337 00:21:47,720 --> 00:21:48,630 bastant difícil. 338 00:21:48,630 --> 00:21:53,470 Així que el millor és pensar en aquestes coses quan vas a començar l'aplicació. 339 00:21:53,470 --> 00:21:57,290 I un cop més, és increïble el que un diferència una mica d'espai en blanc 340 00:21:57,290 --> 00:22:00,020 pot fer que, en passar d'això a això. 341 00:22:00,020 --> 00:22:06,560 És molt més bonic, afegint una mica encoixinat addicional en pastilles. 342 00:22:06,560 --> 00:22:12,960 >> Així que això va ser pas a pas iteratiu disseny en una aplicació exemple. 343 00:22:12,960 --> 00:22:19,020 Ara, jo et vaig a mostrar una aplicació que Que he fet i ha canviat una mica 344 00:22:19,020 --> 00:22:24,560 poc, i després una aplicació que crec que és molt millor que ell, i aquells de disseny 345 00:22:24,560 --> 00:22:25,230 consideracions. 346 00:22:25,230 --> 00:22:30,110 Així que aquí hi ha una aplicació que he fet, aquest Convertidor d'aplicació, i això és bàsicament 347 00:22:30,110 --> 00:22:35,660 el que semblava, no fa gaire, però sens dubte que va ser fa un any. 348 00:22:35,660 --> 00:22:40,060 >> I es pot veure que en realitat no hi ha marges a l'esquerra ia la dreta 349 00:22:40,060 --> 00:22:48,910 banda, no hi ha cap marca o el tema a que, a la part superior que és només el valor predeterminat, 350 00:22:48,910 --> 00:22:50,300 Estil Android. 351 00:22:50,300 --> 00:22:55,150 Aquestes pestanyes probablement de l'època, tenia sentit per a mi que ells 352 00:22:55,150 --> 00:22:56,080 es farà - 353 00:22:56,080 --> 00:22:58,640 tot seria més simple, però si va a convertir entre 354 00:22:58,640 --> 00:23:02,400 diferents tipus d'unitats, la distància, massa, volum, i llavors qualsevol 355 00:23:02,400 --> 00:23:06,890 això no és un fàcil - 356 00:23:06,890 --> 00:23:07,750 no sempre és intuïtiva. 357 00:23:07,750 --> 00:23:11,680 Sobretot perquè, què passa si sóc usuari que vol convertir a algun tipus de 358 00:23:11,680 --> 00:23:15,730 unitat de distància, i la distància és tant sota qualsevol i la distància? 359 00:23:15,730 --> 00:23:17,700 Em sento com, és una millor que l'altre? 360 00:23:17,700 --> 00:23:20,320 És confús i no és genial. 361 00:23:20,320 --> 00:23:27,330 >> Així que una simple millora que he fet des de llavors, però certament es podria 362 00:23:27,330 --> 00:23:31,250 millorat més, és només per tirar una gran quantitat d'aquesta brossa. 363 00:23:31,250 --> 00:23:36,170 I això és en molts sentits, una vegada més, molt similar al disseny de 364 00:23:36,170 --> 00:23:37,460 aquesta diapositiva anterior. 365 00:23:37,460 --> 00:23:41,180 Però aquí només hi ha una pàgina, es va desfer de totes aquestes diferents pestanyes, això 366 00:23:41,180 --> 00:23:44,460 és just on vostè té tot aquestes diferents opcions. 367 00:23:44,460 --> 00:23:50,000 I els marges i el farciment en el costat són una mica millor. 368 00:23:50,000 --> 00:23:51,240 I és que, en general, més net. 369 00:23:51,240 --> 00:23:55,170 I després hi ha aquest blau branding de la barra d'acció en la part superior, i 370 00:23:55,170 --> 00:23:59,940 a continuació, un calaix de navegació, que anem a parlar una mica, al lateral. 371 00:23:59,940 --> 00:24:04,210 >> I es pot veure com això és només una senzill pas cap endavant, però al mateix 372 00:24:04,210 --> 00:24:08,690 temps, no s'ocupa d'una gran part del consideracions de disseny que vam estar 373 00:24:08,690 --> 00:24:09,460 parlant abans. 374 00:24:09,460 --> 00:24:14,840 Se sent com que no m'està sorprenent, no m'està encantant, i és només 375 00:24:14,840 --> 00:24:18,590 fent el que ha de fer d'una manera que, almenys en aquest cas, és 376 00:24:18,590 --> 00:24:20,700 lleugerament menys confús. 377 00:24:20,700 --> 00:24:24,290 >> Ara bé, aquesta és una altra aplicació de convertidor que Em vaig trobar a la botiga d'Android que jo 378 00:24:24,290 --> 00:24:28,200 pensar és molt, molt gran. 379 00:24:28,200 --> 00:24:29,450 És. - 380 00:24:29,450 --> 00:24:31,820 381 00:24:31,820 --> 00:24:37,130 No recordo el seu nom - però té que la marca amb els dos diferents 382 00:24:37,130 --> 00:24:41,350 fletxes, que la fletxa blava que puja i l'altre a la baixa. 383 00:24:41,350 --> 00:24:46,380 Però la pàgina d'inici, aquí, vostè té quina unitat que vol fer la conversió, 384 00:24:46,380 --> 00:24:48,790 i després hi ha aquests - 385 00:24:48,790 --> 00:24:51,000 té més sentit quan el fas servir, al principi és una mica confús. 386 00:24:51,000 --> 00:24:55,860 >> Però són coses simples com el de unitat, hi ha un botó de cerca 387 00:24:55,860 --> 00:24:58,260 just al costat d'ella, que és el mateix tipus del que estava a la meva aplicació, però 388 00:24:58,260 --> 00:25:02,760 en la meva aplicació, es va obrir un altre diàleg que caldria buscar entre i 389 00:25:02,760 --> 00:25:03,950 llavors et tornes a l'altra part. 390 00:25:03,950 --> 00:25:09,260 Aquest només substitueix la ruleta, o al menú desplegable, amb un 391 00:25:09,260 --> 00:25:11,410 quadre de cerca, i vostè acaba de començar a escriure i després seleccioneu 392 00:25:11,410 --> 00:25:12,260 alguna cosa bé. 393 00:25:12,260 --> 00:25:14,680 >> Així que vostè no ha d'anar enlloc una altra cosa, totes les cerques 394 00:25:14,680 --> 00:25:15,770 que passa en el mateix lloc. 395 00:25:15,770 --> 00:25:18,360 I té molt més sentit d'aquesta manera, perquè fins i tot si per un moment que ets 396 00:25:18,360 --> 00:25:21,210 redireccionat a un altre lloc, vostè qüestionar, per què? 397 00:25:21,210 --> 00:25:22,320 Per què em vaig? 398 00:25:22,320 --> 00:25:23,680 I llavors, on vaig a tornar? 399 00:25:23,680 --> 00:25:26,320 I això manté tot molt organitzat. 400 00:25:26,320 --> 00:25:31,250 >> I després hi ha altres característiques com en aquesta diapositiva anterior he mostrat. 401 00:25:31,250 --> 00:25:35,890 Aquí, igual que diferents llocs de la conversió entre dues unitats diferents 402 00:25:35,890 --> 00:25:41,090 i després convertir entre aquesta unitat i qualsevol altra possible 403 00:25:41,090 --> 00:25:42,600 unitat en aquesta categoria. 404 00:25:42,600 --> 00:25:46,990 En aquest cas, només hi ha aquesta petita fletxa, que és un dels tres botons de la 405 00:25:46,990 --> 00:25:48,280 costat dret. 406 00:25:48,280 --> 00:25:51,000 És una fletxa que decidirà si o no voleu convertir entre dues 407 00:25:51,000 --> 00:25:51,920 unitats o tot. 408 00:25:51,920 --> 00:25:54,490 Una vegada més, es tracta d'utilitzar l'espai molt més eficient. 409 00:25:54,490 --> 00:25:58,420 >> I podria portar a l'usuari una mica temps per aprendre el que significa aquest fletxes, 410 00:25:58,420 --> 00:26:01,960 el que potser no és molt gran, però tan aviat com ho fan, s'adonen que poden 411 00:26:01,960 --> 00:26:03,170 fer molt allà. 412 00:26:03,170 --> 00:26:08,730 I poden canviar fàcilment entre diferents tipus de tasques. 413 00:26:08,730 --> 00:26:12,280 I el que més m'agrada de això, de moment, és que si fa clic a 414 00:26:12,280 --> 00:26:15,640 aquest botó de cerca a la part superior, és una recerca global per a qualsevol tipus de 415 00:26:15,640 --> 00:26:16,960 unitat a la que voleu cercar. 416 00:26:16,960 --> 00:26:20,790 Obre el calaix de la navegació en el a l'esquerra i vostè pot començar a buscar 417 00:26:20,790 --> 00:26:24,980 en aquest quadre de text, i que va a començar a recollir qualsevol unitat 418 00:26:24,980 --> 00:26:26,470 de qualsevol tipus d'unitat. 419 00:26:26,470 --> 00:26:30,240 >> I és un principi que mostra tota la diferents tipus d'unitats amb bon 420 00:26:30,240 --> 00:26:35,210 gràfics al costat d'ells i, a continuació, com buscar, el vaig a mostrar bon 421 00:26:35,210 --> 00:26:39,890 sagnia per, com aquests són la zona unitats que vostè està buscant, 422 00:26:39,890 --> 00:26:42,610 i tot el que es troba encara en una jerarquia que vostè busca. 423 00:26:42,610 --> 00:26:47,820 Així que és molt intuïtiu, i molt ben organitzat. 424 00:26:47,820 --> 00:26:51,640 I sempre es pot lliscar entre aquests diferents punts de vista en la pàgina. 425 00:26:51,640 --> 00:26:54,930 També té un gran tauleta optimització, de manera que valdria la pena 426 00:26:54,930 --> 00:26:56,290 fer-li un cop d'ull. 427 00:26:56,290 --> 00:27:00,960 >> Saltant de nou a la marca i el color intrigant, de manera que aquest és un treball que vaig fer 428 00:27:00,960 --> 00:27:05,850 durant l'estiu amb aquesta empresa anomenada V1 Sports. 429 00:27:05,850 --> 00:27:11,450 I no he canviat molt en aquesta pàgina, En realitat l'única cosa que he canviat és 430 00:27:11,450 --> 00:27:12,450 la barra d'acció. 431 00:27:12,450 --> 00:27:16,170 I aquesta és la pantalla de casa, i eren bastant inflexibles en mantenir 432 00:27:16,170 --> 00:27:22,360 la forma en què va ser, però originalment tot les barres d'acció eren negre. 433 00:27:22,360 --> 00:27:24,440 Era només el valor per defecte Estil Android. 434 00:27:24,440 --> 00:27:29,690 >> I realment hi havia, a banda de la imatge principal en aquesta pantalla d'inici, 435 00:27:29,690 --> 00:27:31,450 no hi ha manera de dir les aplicacions a part. 436 00:27:31,450 --> 00:27:35,600 I això significava que, si ho ha fet en el navegació o la jerarquia més endavant en 437 00:27:35,600 --> 00:27:40,270 l'aplicació, especialment pel que un desenvolupador que és provar les diferents aplicacions, I 438 00:27:40,270 --> 00:27:43,640 personalment, es va confondre i es va oblidar l'aplicació que estava usant. 439 00:27:43,640 --> 00:27:48,170 Però amb només col · locar una mica de color a la barra d'accions, es crea de sobte 440 00:27:48,170 --> 00:27:52,580 algun tipus de marca i estil per a aquesta aplicació que va ser contínua 441 00:27:52,580 --> 00:27:55,970 al llarg de l'experiència de l'usuari. 442 00:27:55,970 --> 00:27:59,080 >> De manera que la barra d'acció que segueixo parlant tracta, aquí, de nou, pot tenir 443 00:27:59,080 --> 00:27:59,690 diferents colors. 444 00:27:59,690 --> 00:28:01,890 Això no ho fa. 445 00:28:01,890 --> 00:28:04,780 Però té el botó d'inici, i això és molt bonic. 446 00:28:04,780 --> 00:28:08,380 Bàsicament a la part superior esquerra de qualsevol lloc web, en general pot fer clic 447 00:28:08,380 --> 00:28:10,000 aquesta icona i tornar a casa. 448 00:28:10,000 --> 00:28:13,420 La mateixa classe de cosa és veritat aquí, tenir la icona de l'aplicació, sempre pot 449 00:28:13,420 --> 00:28:14,290 feu clic en això. 450 00:28:14,290 --> 00:28:17,310 I llavors vostè pot tenir un munt de diferents punts d'acció en aquest sobre 451 00:28:17,310 --> 00:28:21,860 fluir part de la barra d'accions, que són els elements segon i tercer aquí. 452 00:28:21,860 --> 00:28:27,480 I els punts d'acció són les coses que a vostè li vull fer sobre la base de la pàgina, que són 453 00:28:27,480 --> 00:28:32,550 No prendrà qualsevol altre lloc, no ho són la navegació, però ho faran 454 00:28:32,550 --> 00:28:36,450 servir algun tipus de propòsit per seleccionar potser les coses o 455 00:28:36,450 --> 00:28:40,110 la recerca i així successivament. 456 00:28:40,110 --> 00:28:41,290 >> I llavors aquest altre - 457 00:28:41,290 --> 00:28:45,560 Acceptar el que ara estem parlant d'aquests Consideracions de disseny d'Android reals 458 00:28:45,560 --> 00:28:47,070 i els diferents patrons. 459 00:28:47,070 --> 00:28:53,340 El calaix de navegació és una que Android acaba de llançar la seva pròpia 460 00:28:53,340 --> 00:28:57,125 biblioteca perquè durant l'estiu, tot i s'ha utilitzat per probablement 01:00 461 00:28:57,125 --> 00:28:58,300 anys o més ara. 462 00:28:58,300 --> 00:29:02,480 Però la idea és que feu clic al mateix botó d'inici a la part superior esquerra, però 463 00:29:02,480 --> 00:29:05,980 Ara es pot veure tots els llocs als quals podria anar, o els llocs que vostè està 464 00:29:05,980 --> 00:29:07,280 més probabilitats d'anar. 465 00:29:07,280 --> 00:29:11,830 >> I de sobte, és bàsicament com el Amazon o molts d'aquests llocs web 466 00:29:11,830 --> 00:29:14,980 on vostè ha de barra lateral que li permet ves en qualsevol lloc en qualsevol moment. 467 00:29:14,980 --> 00:29:17,960 Va ser molt difícil amb el mòbil aplicacions, ja que no teníem 468 00:29:17,960 --> 00:29:19,010 l'espai per això. 469 00:29:19,010 --> 00:29:24,520 Però ara, si s'utilitza l'espai diferent d'on vostè està, bàsicament, 470 00:29:24,520 --> 00:29:29,560 de passar el dit pel costat, vostè pot aconseguir molt més - 471 00:29:29,560 --> 00:29:33,280 és més fàcil d'aconseguir que l'usuari on volen anar, més ràpid. 472 00:29:33,280 --> 00:29:36,160 Així que només poden fer clic en això, triar on volen anar, i després anar 473 00:29:36,160 --> 00:29:38,170 en algun lloc totalment diferent en l'aplicació. 474 00:29:38,170 --> 00:29:41,440 >> I heus aquí alguns exemples que amb diferents aplicacions, algunes de pantalla 475 00:29:41,440 --> 00:29:42,990 tirs que vaig prendre. 476 00:29:42,990 --> 00:29:48,150 Amb Amazon, bé amb Kindle, aquí pot veure vostè pot buscar i després anar 477 00:29:48,150 --> 00:29:50,900 a un munt de diferents llocs de l'aplicació. 478 00:29:50,900 --> 00:29:54,280 Amb l'aplicació de YouTube, mateix tipus de cosa, veig al meu perfil i em puc anar 479 00:29:54,280 --> 00:29:58,170 als canals subscric, o puc buscar coses noves. 480 00:29:58,170 --> 00:30:02,040 Em porta als llocs que probablement sóc més probabilitats d'anar com un usuari de YouTube. 481 00:30:02,040 --> 00:30:04,300 >> I amb Evernote, que tenen un pren interessant en aquest on es veu 482 00:30:04,300 --> 00:30:10,560 vostè no ha de només tenen elements de la llista aquí al calaix de navegació. 483 00:30:10,560 --> 00:30:14,550 S'obrirà, i puc optar per fer un nova nota de diferents tipus amb un 484 00:30:14,550 --> 00:30:19,240 càmera o gravació d'alguna cosa, i que em pot donar un munt de 485 00:30:19,240 --> 00:30:19,710 interacció. 486 00:30:19,710 --> 00:30:23,300 Vostè pot veure que hi ha miniatures en alguns d'aquests i els números amb la 487 00:30:23,300 --> 00:30:26,540 Llista de punts de vista que li permet saber quants les coses estan en cada un d'aquests llocs. 488 00:30:26,540 --> 00:30:30,940 I realment és una d'aquestes coses on el que estem fent amb aquest tipus 489 00:30:30,940 --> 00:30:34,510 de patró de disseny és que ens estem adonant on està, i 490 00:30:34,510 --> 00:30:36,000 el que espera l'usuari. 491 00:30:36,000 --> 00:30:42,760 Però també és important tractar de fer alguna cosa nova i es ramifiquen des 492 00:30:42,760 --> 00:30:47,420 fent les vistes de llista per a una navegació senzilla i potser posar el seu propi 493 00:30:47,420 --> 00:30:50,180 personatge en ella. 494 00:30:50,180 --> 00:30:53,440 >> Així que una última cosa Android és que, de nou, estem parlant d'assegurar 495 00:30:53,440 --> 00:30:59,330 no mantenim els usuaris en la foscor, per la menys els vells usuaris que tinguin anterior 496 00:30:59,330 --> 00:31:00,340 versions d'Android. 497 00:31:00,340 --> 00:31:06,380 Així que si estan utilitzant Gingerbread, quan hem afegit el suport de la barra d'acció 498 00:31:06,380 --> 00:31:09,920 biblioteca i el calaix de navegació Biblioteca d'ajuda, llavors poden obtenir 499 00:31:09,920 --> 00:31:12,800 aquestes característiques en l'aplicació, simplement com qualsevol altre usuari ho faria. 500 00:31:12,800 --> 00:31:17,840 Però si afegim també aquesta tercera part biblioteca diu un HoloEverywhere després 501 00:31:17,840 --> 00:31:23,250 que és una bona manera de, una vegada més, assegureu-vos que els usuaris tenen la mateixa 502 00:31:23,250 --> 00:31:25,580 experiència a través de tots versions d'Android. 503 00:31:25,580 --> 00:31:30,230 Això només significa que estem prenent aquesta moderna Android usuari 4.0 i superior 504 00:31:30,230 --> 00:31:33,700 interfície i estem aplicant amb caràcter general a tots els 505 00:31:33,700 --> 00:31:34,970 aplicacions que usen aquesta. 506 00:31:34,970 --> 00:31:38,300 >> I potser aquest no és tant d'un preocupació, que sens dubte va a prendre una mica de 507 00:31:38,300 --> 00:31:41,280 més la implementació, però és una cosa tenir en compte que si vostè 508 00:31:41,280 --> 00:31:45,510 realment que vostè ha de buscar la mateixa tot el temps, potser consideri això. 509 00:31:45,510 --> 00:31:52,670 O bé, sempre pot crear la seva pròpia botons d'encàrrec i camps d'entrada personalitzats 510 00:31:52,670 --> 00:31:53,480 i tot. 511 00:31:53,480 --> 00:31:55,735 I llavors, d'aquesta manera, tenir la mateixa experiència d'usuari. 512 00:31:55,735 --> 00:31:58,750 513 00:31:58,750 --> 00:32:02,770 >> Així que de nou, parlant només de la marca, que això és una cosa que Google 514 00:32:02,770 --> 00:32:04,820 ho fa en termes del seu - 515 00:32:04,820 --> 00:32:08,070 com aquí és el seu Google Play Store, i coses simples com tenir un 516 00:32:08,070 --> 00:32:11,480 color associat amb una certa aplicació. 517 00:32:11,480 --> 00:32:15,280 I ho han fet un treball realment bo la creació d'aquest tipus de continuïtat. 518 00:32:15,280 --> 00:32:19,520 I crec que, ara, gairebé he associat música amb el color groc 519 00:32:19,520 --> 00:32:24,290 causa de Google Play música, o el sento, el color taronja. 520 00:32:24,290 --> 00:32:29,305 Però les coses tan simples com colors poden donar una gran quantitat d'aplicacions d'identitat. 521 00:32:29,305 --> 00:32:31,990 522 00:32:31,990 --> 00:32:39,100 >> Així consells per al disseny en general, i en concret, el disseny d'aplicacions mòbils. 523 00:32:39,100 --> 00:32:42,540 En realitat, això no és Android, però es tracta d'una aplicació mòbil. 524 00:32:42,540 --> 00:32:44,930 I la idea és només això - 525 00:32:44,930 --> 00:32:47,040 això és una cosa que vaig venir a través d'Internet. 526 00:32:47,040 --> 00:32:52,850 I és una presa molt interessant en una pantalla d'inici de sessió, no és terriblement 527 00:32:52,850 --> 00:33:02,100 diferent, i podria dir-se que potser una mica massa auster però és diferent. 528 00:33:02,100 --> 00:33:08,810 >> Així que suposo que el consell que tinc per al pensament sobre el disseny, i quan vostè està creant 529 00:33:08,810 --> 00:33:12,890 una cosa tan simple com una pàgina d'accés o Realment qualsevol part de la seva aplicació, és només 530 00:33:12,890 --> 00:33:15,920 sortir i mirar un munt de diferents aplicacions per aquí, prendre la pantalla 531 00:33:15,920 --> 00:33:19,880 fotos d'ells, i crear una carpeta completa en el seu equip que pugui 532 00:33:19,880 --> 00:33:23,340 simplement desplaçar-s'hi i mirar tot el diferents versions de exactament el 533 00:33:23,340 --> 00:33:24,340 vostè està tractant de fer. 534 00:33:24,340 --> 00:33:27,960 Mireu el que s'ha fet, veure el que com i no els agrada, i després pensar 535 00:33:27,960 --> 00:33:33,490 sobre com es pot utilitzar la personalitat si la seva pròpia aplicació i el que està 536 00:33:33,490 --> 00:33:35,290 decisions i tractar d'integrar aquests. 537 00:33:35,290 --> 00:33:39,900 538 00:33:39,900 --> 00:33:47,640 >> Amb això, l'objectiu és veure el que és bo dissenyar i deconstruir en 539 00:33:47,640 --> 00:33:49,180 components que podem parlar. 540 00:33:49,180 --> 00:33:53,870 541 00:33:53,870 --> 00:33:59,250 Així que en aquest exemple, oa les pantalles d'inici de sessió en general, es tracta de prendre aquest 542 00:33:59,250 --> 00:34:06,840 nou enfocament, donant la imatge de marca de l'aplicació d'una mica de caràcter més. 543 00:34:06,840 --> 00:34:10,310 És normalment aquest tipus de com smiley cara blava i després quan arribi el 544 00:34:10,310 --> 00:34:16,540 contrasenya incorrecta, el que realment canvia la logotip de l'aplicació, o que les grans 545 00:34:16,540 --> 00:34:21,909 imatge, i fa una cara enutjada que és vermell. 546 00:34:21,909 --> 00:34:25,210 >> I és només coses simples com això, en aquest cas, suposo que podria 547 00:34:25,210 --> 00:34:29,250 definitivament els dos diferents costats que sorprenent i divertit. 548 00:34:29,250 --> 00:34:32,920 I d'aquesta forma, no se sent tan malament sobre com obtenir la contrasenya d'inici incorrecta, o 549 00:34:32,920 --> 00:34:36,730 almenys és com, sóc gairebé feliç d'haver té una contrasenya incorrecta perquè llavors 550 00:34:36,730 --> 00:34:39,580 vaig veure aquest divertit ou de Pasqua. 551 00:34:39,580 --> 00:34:45,290 Encara és una mica de vermell i potser té una reacció visceral que em sento 552 00:34:45,290 --> 00:34:48,850 com l'aplicació m'està amenaçant, però és sens dubte un enfocament diferent. 553 00:34:48,850 --> 00:34:52,040 I és aquest tipus de coses que val la pena considerar, 554 00:34:52,040 --> 00:34:53,469 pensar fora de la caixa. 555 00:34:53,469 --> 00:34:55,570 >> Com que en una pàgina d'inici de sessió, hi ha un munt de coses a considerar. 556 00:34:55,570 --> 00:34:59,320 Aquí està el teu nom d'usuari, contrasenya, però llavors, com vas a posar el 557 00:34:59,320 --> 00:35:03,900 Heu oblidat la contrasenya a la pàgina de d'una manera que no és - 558 00:35:03,900 --> 00:35:06,800 que és el tipus de coses que la gent fa servir de vegades, potser un munt de gent utilitza 559 00:35:06,800 --> 00:35:09,580 tot el temps, i ho estan passant realment comptar amb aquest botó, però no ho fem 560 00:35:09,580 --> 00:35:14,230 vull que ocupa espai i distreure del flux que volem que la gent 561 00:35:14,230 --> 00:35:15,740 passar. 562 00:35:15,740 --> 00:35:17,865 I el mateix tipus de coses amb iniciar sessió, i 563 00:35:17,865 --> 00:35:18,810 crear un nou compte. 564 00:35:18,810 --> 00:35:20,150 Aquestes són totes les coses que vostè ha de tenir en compte en 565 00:35:20,150 --> 00:35:22,360 la creació d'una pàgina com aquesta. 566 00:35:22,360 --> 00:35:26,200 >> I llavors, com fer realitat aconseguir pràctica amb això? 567 00:35:26,200 --> 00:35:29,860 I aquest és, de nou, només un parell captures de pantalla del que vaig fer al 568 00:35:29,860 --> 00:35:35,140 estiu que en algun moment, en la ploma i paper, que acabo d'escriure el que jo pensava 569 00:35:35,140 --> 00:35:37,810 un bon disseny seria que podríem fer. 570 00:35:37,810 --> 00:35:42,460 I després, en algun moment, he creat una maqueta en Android. 571 00:35:42,460 --> 00:35:45,930 >> Aquests són només els dissenys, i aquests estan utilitzant el mínim indispensable 572 00:35:45,930 --> 00:35:46,530 del que puc fer. 573 00:35:46,530 --> 00:35:49,925 Hi ha molt poc de lògica en l'esquena, aquí, això no és en realitat un 574 00:35:49,925 --> 00:35:54,570 implementat aplicació, però jo només volia tenir una idea del que podria semblar. 575 00:35:54,570 --> 00:36:00,550 I si vostè està fent la seva pròpia aplicació, que havia Veritablement recomano que separa els 576 00:36:00,550 --> 00:36:06,640 parts de la mateixa, la lògica i el backend frontal visual, i provar alguns 577 00:36:06,640 --> 00:36:10,670 diferents coses i pensar en el que que funciona i el que no funciona i 578 00:36:10,670 --> 00:36:13,870 realment com desitja l'usuari per sentir, i el que vol que facin. 579 00:36:13,870 --> 00:36:17,990 Tracta d'ajudar amb això i que sigui una bona experiència. 580 00:36:17,990 --> 00:36:21,300 >> OK, així que això és bàsicament el per el meu concepte de disseny. 581 00:36:21,300 --> 00:36:27,160 Un cop més, sóc nou en això, i crec que aquest és el camí que vaig seguir. 582 00:36:27,160 --> 00:36:33,370 I espero que per a les persones que estan intentant, especialment als nostres desenvolupadors 583 00:36:33,370 --> 00:36:36,580 que estan tractant de pensar en formes puguin millorar la seva pròpia 584 00:36:36,580 --> 00:36:39,880 disseny, aquests són definitivament alguns bons punts de partida. 585 00:36:39,880 --> 00:36:44,400 >> I ara, en general, si vol començar amb aplicacions d'Android, seguiu aquest 586 00:36:44,400 --> 00:36:49,550 vincular, o simplement buscar Android començar. 587 00:36:49,550 --> 00:36:53,690 Hi ha una gran quantitat de documentació en línia i un munt de codi d'exemple. 588 00:36:53,690 --> 00:36:57,160 És molt, senzilla. 589 00:36:57,160 --> 00:37:01,100 I és d'esperar que serà molt agradable. 590 00:37:01,100 --> 00:37:03,850 Així que això és tot per a mi. 591 00:37:03,850 --> 00:37:09,460 Espero que vostè pot seguir endavant i fer una mica de codi Android, i mentre estàs 592 00:37:09,460 --> 00:37:12,910 fent que el desenvolupament, també pot pensar en el que fa a un bon disseny i 593 00:37:12,910 --> 00:37:16,210 el que fa bones aplicacions agradable per a l'usuari. 594 00:37:16,210 --> 00:37:17,460 >> Gràcies. 595 00:37:17,460 --> 00:37:19,424